オインクゲームズで製作中のアレコレ
最新ニュースはこちら
はじめまして。オインクゲームズ新入社員のきゅぶんず( @kyubuns )です。
今日は、9slice用の画像を自動で作成してくれるライブラリを開発したので、ご紹介したいと思います。
ゲームUIやWebサイト用の画像を作る時に、9sliceはとても便利です。本来、描画サイズを変更しても角が伸びないようにするためのものですが、素材の無駄な部分をカットできるので、テクスチャサイズの削減という大きなメリットも得られます。
しかし、1つ1つ手作業で9slice形式の画像を準備して、スライス（画像のどの部分を伸ばすか）の設定もしないといけない というのは面倒です。
そこで、今回開発した「オニオンリング」を使うと、全てのUIテクスチャを自動的に9slice形式の画像に変換し、さらにUnity上でのスライス設定まで行ってくれます。
これにより、人間は何も意識すること無くテクスチャサイズの削減が出来るのです！
先日リリースしたiOSアプリOLYMによる実際の例を交えながら紹介します。
実は、OLYMのUIテクスチャは元々9sliceを使用しておらず、表示するサイズそのままのテクスチャを持っていたため、テクスチャ容量が大きかったのです。
これは、UIテクスチャを独自ツールでpsdから自動生成している（この話は、また機会があれば！）ため、9slice形式の画像を作成する作業をフローに入れ込めなかった という言い訳があったのですが、そんな言い訳も今日で終わりです。
例えば、この画面。
これを表示するために使用していたテクスチャはこんな感じです。
このテクスチャを、9slice形式に変換すると、このようになります。
左上の素材や、ジェムマークのついたボタンの素材を見ると、効果がわかりやすいと思います。サイズも、高さが512px->256pxと、半分にすることができました！
他にもいくつか変換例を紹介します。もちろん、変換前と後で全く同じ物を描画できます。
最後の例では、2048x512もあったテクスチャが16x16に収まってしまいました！なんと、4096分の1です。
OLYMはフラットデザインということもあり、UIテクスチャ全体で容量が80%減という大幅な削減ができました。
今回開発した9slice用の画像を自動生成するライブラリ「オニオンリング」は、こちらでRubyのModuleとして公開しています。
Unityと絡めた使い方などの技術的な情報は、こちらに載せておきます。
- kyu-oink