« DrawDevice の変更予告 | メイン | 部分的マルチプラットフォーム化による段階的移行 »

2016年04月24日

吉里吉里Z 開発:: 吉里吉里Z本体に9 patch ( 9 slice )を入れるか検討する

    

Android、iOS、Flash、Unity、Cocos2dx などで使われている UI の背景などを描画する機能(仕様)。

角の4隅は等倍でコピーして、上下左右の4辺はそれぞれ横or縦に拡大、真ん中の領域は拡大することで、伸縮可能な画像を作る。
下図を見てもらうとどこがどのように拡大されるのかわかりやすいはず。
ninepatch_20160424.png

実際にやるとどうなるかは下のような角丸四角がわかりやすい。
toast_frame.9.png
CC BY 2.5によってライセンスされた Android のリソースデータです。 Copyright (c) 2005-2011, The Android Open Source Project

拡大するとこんな感じ
round_rect_20160424.png

四隅や辺が維持されているので、拡大しても荒れない。

このメリットは――
1. 任意のサイズに見た目の劣化なく拡大できる(制約はあるものの)
2. メモリ、ストレージの節約
3. 再利用しやすくなる
4. 見た目のデザインとレイアウトを分離できる
5. ベクター描画よりは軽量

1.
制約としては
・拡大される部分は単一色もしくはグラデーションであれば劣化しない。
・元画像のサイズより小さくは出来ない。
の2つ。
それをクリアすれば、色々なサイズに使用できる。
サイズが変えられると言うことは、アニメーションもさせられる。
9patch_20140424.gif

2.
メモリの節約は吉里吉里ではあまり意味がない。
レイヤーに描画した時に描画後サイズが持たれるので、メモリは節約にならない。
ストレージは節約されるが、PC では多少画像が大きくなってもさほど問題とはならない。
と言うことで、節約と言う意味では効果は薄い。

CPU 描画系ではなく、GPU で描画する時テクスチャ面積を大きく節約できるメリットがある。
その場合は、四隅は反転、四辺も反転することでより節約できるが、9patch では少し無駄がある。
とは言っても、反転するとある程度想定できるので、画像を比較して機械的に変換できるので、変換してしまえばその無駄もなくせる。
ストレージは、PC ではなく容量にシビアな環境では効いてくる。

3.
UI ウィジェットを準備したら、後は各パーツの画像の差し替えで見た目を変えられるが、9patch があれば背景等のサイズが可変になるので使いまわしやすい(個々のウィジェットに合わせて画像を準備する必要がない)。
スキンとして、パーツ画像セットを準備すれば、その画像セットを差し替えることで UI の見た目をゲームごとに調整できる。

4.
UI ウィジェットの見た目のデザインとレイアウトを分業できる。
レイアウトはツールがないと面倒なので、将来的には配置用のツールが欲しいところ。

5.
基本的には単純なコピーと拡大なのでベクター画像のような複雑な処理は要らない。

以上のように便利でツール用途でもゲーム用途でも使えるので本体に組み込もうと思っていたのだが、プラグインでいいんじゃないか?と反対されて少し検討し、本エントリーを書く。

問題は――
・画像自体ではなく画像の使い方に意味を持たせて処理すること、プリミティブな機能ではなく複合的な機能であることを懸念
・汎用性に懐疑的(うちは使わないので)
と言ったところのよう。
同種の機能としてはカラーキーがある。
今ではほとんど使われなくなったが、使い方に意味を持たせて処理している。

9 patch の汎用性については、今のところ吉里吉里Zに実装自体されていないので使われていないけれど、実装されツールも整備すれば普通に使われる機能になると思われる(他環境での使われ方からしても)。

と言うことで、やっぱり本体に組み込んでしまっていいんじゃないかと思った。


投稿者 Takenori : 2016年04月24日 23:13




comments powered by Disqus
Total : Today : Yesterday : なかのひと