見出し画像

実装者を殺せるUIデータで打線組んだ

↓本記事はアドベントカレンダー「Game Graphic Design Advent Calendar 2019」用に書きました。

ゲームのUIデザイナーとして仕事をしていると時々驚くような実装をしているプロジェクトに遭遇することってありますよね。今回はそんな基本的なことだけれど「あるある」なアイタタ…unity実装ネタを書きたいと思います。ひとつひとつは大した内容ではないのですが、誤った方法で作られたリソースで誤った実装のされ方をし、それが積み重なった上で最終的(主に処理上げのタイミング)にパスされ「短期間で直して。」と言われた際の絶望感がすごいです…初期段階から正しいフローで実装し、綺麗なデータ作りを心がけたいですよね。

あくまで自分の経験と感想です。ゲームエンジンを普段から触ってGUI実装をしている方には鼻で笑って貰い、これからunityを始めるUIデザイナーさんには「こんなこともあるのかぁ」くらいに受け取って貰えれば幸いです。

実際に遭遇したデータ(選手)たち

1.活用されない9slice
 同じようなサイズのボタンがあっちにもこっちにも点在しているなんてことないでしょうか?デザインにもよりますが汎用的、四方がパターン化出来るフレームやボタンなどは9sliceで可変対応しCommonフォルダなどにまとめておくのがスマートです。

画像1

2.使われないタイリング

背景のパターン画像などは1000px超えのテクスチャを作ったりせず、メモリ節約の為にも「tiled」を活用したいです。ただタイリング機能を使うとunityは描画しているメッシュが複製されて頂点数が増えてしまうので、メモリを取るか、描画負荷を取るか…ケースバイケースで考える必要があります。

画像2

処理上げ作業をやってるとメモリ容量を小さくすることに注力しがちになってしまいますが、こういった罠もあるので…メッシュ作ってマテリアルでパターンもたせた方が余程効率がよいのかもしれない…そういう処理計測ネタも面白そう。
と、半ば諦めてなぜそういう仕様なのか調べていたところ改善策が見つかりました…Tiledでお困りの方はぜひ。

3.巨大テクスチャ

画像3

用途に合わずびっくりするほど大きい、2のべき乗でもない。印刷物でも作る気だろうか…

綺麗に見せたいが為につい大きめに作ってしまうことはあるけれど、UIに割り当てられたメモリの範囲内でいかに綺麗に見せるサイズに落とし込むか?もUIデザイナーの技量が問われるところなんじゃないだろうかと思います。

4.トリミングされていないImage(sprite)

画像4

2D spriteとして使う時の注意。unityは自動でテクスチャトリミングをしてくれるうえ、アトラスにパッケージングもしてくれる。大抵のGUI素材はそうしてテクスチャ運用していると思います。アトラス自前で作っている方は分かると思いますが、不要なアルファ部分をもたせるのはその分無駄に処理を走らせることになるので避けたいです。

5.アルファ別に用意されたテクスチャ

画像5

つまりは半透明のテクスチャがPhotoshopでいうところのalpha10~90%分用意されていた…Photoshopの色味を再現できないという声をたまに聞くけれど、Photoshopとエンジン側のガンマ値の違いなのでPhotoshop側の設定を変えて作業することをおすすめします。アルファは後からの変更や修正を考えればエンジン側で値を持ちたいです…

リニア色空間については綺麗に説明できる自信がないので興味のある人はぜひご自分で調べてみてください。

6.不規則 pixel per unit

スクリーンショット 2019-12-01 23.19.06

imageはTransformだけでなく、あらゆる方法でサイズをいじれます。Pixel Per Unitもそのひとつですが、規則性なくこれを使われると後からデータを触る人間が泣くことになります。個人的には、開発時にPixel Perは絶対触らないようにしたい値のひとつです。unity4の頃ひとつひとつのプレハブを解体して画像サイズ変えている場所を探す作業をしたのはトラウマ…

7.散らかり放題テクスチャ、アニメーター、アニメーション群

画像7

これもケースバイケースだけれど、デザイナーはついページ毎にUIリソースを作ってしまいがちだと思います。というか私もやります。汎用パーツはCommonに置くとしても、作業を分担すればするほどみんな好き勝手にUIパーツを置くようになります。そしてバッティング…こうして出来たゴミテクスチャを開発後期にはUnity Resource Checkerのようなツールを使って整理して行きます。これTextMeshProみたいにUnity公式化してくれないだろうか…

テクスチャは最終的にはパッケージングしてシーンに呼び出されるわけだけど、出来れば呼び出すアトラスの枚数は減らしたい。新規画面デザイン実装段階で「いくつのページで使用するデザインか?汎用が可能か?どこに置くか?」をデザイナー、PG間で決めておけると嬉しい…アニメーションやアニーメーターも同様に汎用が効くリソースを洗い出しデータの氾濫を防ぎたいです。

8.テキストを含むテスクチャ

画像8

一つのテクスチャにロゴや文字などのテキストを含む画像が…結構このタイプに出くわすことが多いです。国内のみのリリースであれば問題ないのかもしれませんがローカライズが必要な文言や仕向地によってタイトルロゴのデザインが変わる等の可能性を考慮して、各リソースは別々に書き出し管理したいです。出来れば差し替えようのステートも先に用意しておきたい…

画像9

またUIの賑やかしでテキストを使用することもあると思います。3Dモデルアセットなどでもそうですが、賑やかしに使うテキストは読むことが出来ないように加工するか、新言語を生み出すしかなさそうです。表現をぼかした結果生まれる、プレイヤー間の推察も嫌いではないですが…

9.バラバラ描画優先

unityの描画優先はこちらもあらゆる方法で設定することが出来ます。Canvas内ですとPhotoshop同様オブジェクトの並び順に表示されます。

が、他ゲームオブジェクトと同じ空間に配置して、マスクをかけたり、エフェクトをおいたり、とそれぞれに描画優先の為の設定を付けだすとかなりややこしいことになります。ただこれは演出や仕様上避けられないことの方が圧倒的に多いので、UIに限らず複雑な構成のアセットを作る際は資料化して情報を残しておきたいですね。GUIと他オブジェクトとの描画優先を書き出すと1記事かけてしまうので今回は見送ります。

なぜ整理しておかなければならないか

1.処理上げ

unityはシーン再生時にアトラスメッシュを呼び出すわけですがその際にCPUが各リソースを探し回ってまとめたうえで、GPUに渡すことになります。この時のCPU側の仕事を減らす為に常駐UIとそのシーン独自のものを分けたりする対応をする必要があります。

画像10

2.メモリ削減

これは皆さんよくご存知のアプリサイズになります。当然軽ければ軽いほどユーザーさんには喜ばれますよね?特にAssetBandleを使用しない案件の場合、AppleStoreは4GBの縛り付きなので更に厳しくなります。最近のアプリはAssetBandleをUIでもバリバリ使用しているんでしょうか?それを抜きにしてもスマホゲームでも3Dゲームが当然のように遊べる近年、開発側としてはUIよりもキャラや背景といったアート側にメモリを費やしたいはずです。無駄なテクスチャを削除、整理整頓してチームイチスリムなセクションになりたいですね。

3.ブラックボックス化を防ぐ

運営タイトルにしろ、売り切りにしろ、会社やチームで物作りをするのであれば人に理解されやすいデータを作るのが重要だと思ってます。将来的に自分以外の誰かが、スキルセットの分からない誰かがプロジェクトを開いた時迷わないようにしておきたいものです。

GUIの最適化については公式で分かりやすく解説しているスライドがあるのでぜひ目を通してみて下さい。

今後のUnity GUI

UIElemets がやってくる

unity2019から正式に導入されたUIErements、ImGuiに置き換わる機能としてリリースされたそうだけど機能紹介に注目。

❝今後のリリースでは、uGUI に代わってランタイム UI を作成する予定です。❞

シレッと何か言ってます。じゃあUIElementってどんなものやろ。とレビュー記事を漁ってみたところ、分かりやすく解説している方がいたのでここでシェアさせていただきます。

現在はエディタ拡張に使うことが目的で、UIデザイナーが触って面白そうな機能はなさそうです。今後の情報に期待。2018を最後に暫くunity触れていませんので年末はunity2019でUIElementsを触ってみようかと思います。

----------------

以上が、主に私が過去Over time的な意味で殺されたUIデータたちの一部です。もっとフォントやアセットの話もあるけど打者が満杯です。新規実装より、こういうものを一つ一つ探して修正するような作業の方が多かった気がします。モバイル開発はキャラや背景意外の演出部分はUIデザイナーが担当することが多い印象があります。UIデザインをしているとついつい表に出るデザイン部分に目が行きがちですが、”ゲーム”というインタラクティブなコンテンツである以上、処理負荷やメモリといった内部処理にも目を向けなればなりません。どれも基本的な技術であったり心得ですが、意外と見落とされがちです。常に初心を忘れず開発者もユーザーも幸せになれる楽しいゲームライフを目指しましょう!

来年も面白おかしくゲーム開発ができることを祈って…
Merry Christmas!

■記事制作に使用させていただいたリソース配信元
ユニティちゃんライセンス いらすとや easy UI emerald

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

45
関西のゲーム屋で色々やってます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。