突撃！ヨーコ道場開発話ソロー版
どうも、そりゅースタジオのSor担当のSOrowことソローです。
前回は夕目さんが時系列に沿ったアプリシステム制作秘話を書いてくれたので、私の方は画像周りで書いていきたいと思います。
アプリ紹介
https://www.youtube.com/watch?v=HhUPLvy1Kvc
UI案
これは割とすんなり決まった気がします。夕目さんが先に仮ベース組んでてくれたのかな？（すでに記憶が怪しいやつ）
懐かしきドット絵時代。
更新日が2021年11月4日だったので、配置自体は初期から固まっていたみたいです。やるじゃないか。
ただ、ここから今の形に落ち着くまでが長い長い道のりでした。
というのも、スマホアプリなので、スマホで操作性がよいかどうかが最重要になるわけですね。PC上の見た目がよくても操作性が悪ければどうしようもない。
レイアウト自体は初期の初期からほぼ変わりがないのですが、細かい詰めにかなり時間を取りました。
ただ、そのおかげで、サクサクプレイできる状態にはできたのではないかと思います。夕目さんのおかげです。ありがとう夕目さん（隙あらば感謝）。
こんな感じで人形の大きさをどうするか比較してみたりしてました。
ADVの感じも。
余談
スマホアプリでは、実機でのテストが大切となります。
が、しかし。わたくし、スマホを持っておりません。
いまだにガラケーです。結構落としたりしましたが、長持ちしています。充電も結構もちます。やったぜ。いや何もやってはいないぞ。
そのため、スマホでのテストプレイは夕目さんに任せっきりでした。UIのデザインはこちらで大体やっていたので、スマホで操作しづらいところの変更なども、大体は夕目さんの意見を聞いてこちらで変更してお渡しするということになり（夕目さんにそこもお任せしていた部分ありますあります）（作業量うおー）。こちらで実機プレイができないことにより、余計な手間をかけさせてしまい、時間も取ってしまったなあという反省があります。
スマホ……ないとゲ制には不便ですね……。実機環境は複数あった方がよいというのもあり、今後の課題です。
今回はカスタムパッケージでやり取りしていたのですが、そこもちょっと不便さがあったので、今後はGitHubとか使っていかないとだめかなーという感じもあります。
Unity独自の要素に慣れるまで四苦八苦
「マサオのジャンピングレース」で1回Unityを触ってはいたので、なんとな～くはわかっているつもりだったのですが、いざスマホ用のゲームを開発するとなると、全然わかっていなかったことが判明しました。気付くの遅いな！？
ウディタやティラノスクリプトだと、1pxが単位で、画像の大きさも座標も1px＝1pxなんですよね。1280×720の解像度でゲームを作るなら、全画面の背景画像とかは1280×720pxのを用意すればいいわけで（真っ黒なら1px×1pxの黒画像を1280×720に引き延ばすとかもできますが）。
でもUnityの場合、PPU（Pixels per Unit、1ユニットのピクセル数）という単位で、これは……何だっけ？（忘却）
カメラのサイズを満たす1ユニットのピクセル数だったかな。これが独特なんですよね。複数解像度、マルチプラットフォームに対応しているからこそのものなんだろうなあと思うんですが、理解するまで？？？？？となりまくりました。いまも理解していない可能性あります。
ただ、これを決めないと、というか統一しないと、オブジェクト配置がうまくできない。画像の拡大縮小とかにも関わってくるからです。
今回は、最終的に夕目さんがプロジェクトの構成からCanvasなどの基本的な配置をしっかり組んでくれて、ウディタライクな原寸大で扱えるカメラサイズとPPUにしてくれました。ありがとう夕目さん（隙あらば（ｒｙ
しかし、ここに至るまで、自分のUnityでの制作スキルなさすぎ問題から、自分の方で調べても実際どうすればいいかわからん……ということで曖昧な感じで相談して、夕目さんに全部対応してもらうという任せきり状態になりまして、反省しきりです。今後は自分でもUnityスキルを上げていかねばならないと思っています。
ドットにするかラスター画像にするか問題
ベースとしたウルファール道場では、人形はドット絵、会話などのキャラ画像はラスター画像で作っていました。
そのため、Unityでもそんな感じでいいか～ぐらいの感じでいたのですが。
上記PPUと絡み、サイズをどうするか問題が発生しまして。
ドット絵を歪みなく表示するなら、PPUを人形のサイズ基準で設定する……にしても、まず画面に対する人形の大きさを決める……にしても、スマホでの表示感とかを考える必要が……にしても、今回はタップもさせるなら相当の大きさが必要で……にしても、大きすぎてもアスペクト比が細長いやつとかだとあふれる問題が……。
しかし！ドット絵は！細かい拡縮に！向いていない！
倍々サイズならいいんですが、1.1倍くらいがちょうどいいなあ……となったときに、そう簡単に1.1倍にできない問題があります。
RPG向けのキャラチップやアイコンなどでは、すでにツクールやウディタ用の、40×40などの決め打ちがあって、それを活かすサイズやPPUにすればいいわけですが。
今回は、そういうのとは関係なく、スマホアプリでいかに人形が見やすく、叩きやすいかが問われることになる。というか、自分で問う。それはプレイしやすいのか。それでプレイに集中できるのか。
この微妙な拡縮によるサイズ変更に対応しやすいのは、ドットよりもラスター画像だなと。いうわけで、四苦八苦したすえに、今回は全部ラスター画像にすることにしました。
ドットの方が味わいがあるんじゃないかと、ラスターで人形描くのも試行錯誤したのですが、結果的にはいい感じにできたのではないかと思っています。
没となったドット案とクマさん。
Unityでドット絵を使うなら、全部ドットにするか、RPGのような感じにするか、PPUを開発初期に確定させるかでなければ、難しいものがあるなあと感じた次第です。
Unityのテクスチャの最大サイズという概念
Unityは、画像のそのままのサイズ（大きさ）で扱うわけではないんですよね。ここもウディタに慣れていると、？？？？？となる部分でした。
縦横のサイズが4の倍数でなければ圧縮されないみたいで、ウディタみたいにぎりぎりまで余白削ってPC上でのサイズを減らしても、Unityだとむしろ増えているという。最初はどういうことなんだ状態だらけでした。
ただ、仕様がわかってくると、そういうものなんだな～という感じで、作業も楽になってきました。
スプライトアトラスという、ひとつの2のべき乗テクスチャにまとめてしまえば、個々の画像のサイズは関係なくなるやつがあるのも、気にしなくていい部分が増えてよかったです。ウディタでも、アイコンなどをひとつの画像にまとめて表示したりするのと、同じ感じですね。細かい画像をひとつひとつ表示するよりも、ひとつの画像でどうにかした方が、メモリにも優しいみたいな。でも大きすぎてもだめよという。先読みとかのパフォーマンス系は、ゲームだと同じだよなあと思います。
Unityの画像サイズについては、下記の記事がわかりやすかったです。参考までに。
【間違えやすい】Unityの正しい画像サイズとは - 渋谷ほととぎす通信
で、ここまで書いて普通に忘れていた、見出しのUnityのテクスチャの最大サイズなのですが。
Unityは画像をそのまま扱うわけではない感じで、大きい画像を入れても、最大サイズを小さくしたら小さいサイズで扱われるんですよね。
なんか自分で書いててわかりづらい文章になりましたが、でかすぎる画像を投入しても、最大サイズを1024から512に減らすことで、512以下のサイズの画像として扱われるという感じです。
だから、わざわざこの画像でかすぎるから縮小しないとなー、みたいにしなくても、Unity上でどうにかできるという。しかもプラットフォームごとにその上限も変えられる。
今回は、通勤電車のなかでなど、さくっとアプリを起動してさくっとプレイしてもらえたらいいなという風に作っていたので、全体的なサイズはできる限り削りたかったんですね。
そんなとき、このテクスチャの最大サイズを小さくすると、とりあえず解像度下がった状態の画像がどうなるのかの表示を見られて、よかったです。
実際縮小するなら、イラストソフトでやった方がきれいなのですが、テクスチャの最大サイズをいじって、この解像度でもまあ別にそんな粗出ないな、と確認できるのはありがたかったです。
画像が即更新される
これはUnityのよかった部分です。画像を更新したときに（ファイルを直接上書きする）、ゲームを更新しなくても反映されるんですね。
ウディタやティラノでは、UI画像などを更新したあとは、ゲームを更新、というか再起動して、メニュー画面の調整ならメニュー画面開いて表示を確認して、やっぱこのウィンドウ違うなとなったらまた画像を更新して再起動して……という感じでやりますが、Unityだと画像更新したらもう反映されます。どういうことなんだ。そういうことでした。
これは本当に、UIの試行錯誤がしやすくて助かりました。まじか……Unityすげえ……となりました。インポートしたらもう反映されるってどういうことだよ。そういうことでした。
ゲームというか、エディター上のシーン上でもう反映されるので、CanvasごとにUI作っていたらそれ表示していれば確認できるのが、やりやすいなーと感じたところです。ここはUnityすごいぜでした。
あとUnity、PSDファイルもそのまま扱えるんですよね。ちょっと意味わからないレベルのつよさです。PSDファイルそのまま入れられてサイズも変わらないってどういう（ｒｙ
画像作る側としては、こんなにありがたいこともないなあと。感動した部分です。
UIのアンカーとか
複数解像度に対応すると、UIの配置をどうするかが難しいところでした。配置というか拡縮というか。
下のやつは下に固定して、上のやつは上に固定で……これを伸ばすのか、サイズも固定にするのか……うーん……みたいな。
アンカーとかピボットとか、なんかいまいちよくわからん……というまま作っていて、UIをアニメーションさせたら縦長のアスペクト比のときに中央に表示されないんですが！？とかあったのですが、終盤でようやくそのへんの使い方がわかりました。致命傷を治せた。
座標じゃなくて画面に対する位置関係で設定するというのは、慣れないと理解しづらいところだなあと思います。何回ググっても覚えられません。つまりわからなければググればよい。逆説。
TextMesh Pro周り
ここもちょっと罠が多かったですね。今回とにかくビルドサイズを縮めたいのもあって、公開用にフォントも最小限にしてサブセットしたのですが、そこから更に追加したい文字が発生したりしたので、上書きするとなんか違う……フォント接続切れる……タスケテ……ということが何回か起きました。痛かった。
ビルド用の構成は本当に本当の公開間際にしましょうという格言を貰えました。誰から。
ただ、フォントをサブセットして使えるのと、同じフォントでもマテリアルの設定を変えれば違う彩り方ができて、バッチは増えますがテクスチャが増えないのがいいなーと思います。
今回画像で文字を作ってしまったところがあって、そこもフォントでやった方が取り扱いが楽だなあと感じたところです。ソシャゲ見ても同じフォントで色とか縁取りとか効果とか変えてイメージ変えてるのありますもんね。使い勝手よく使っていきたいです。
おわりに
Unityはほんと、独自の要素や考え方があって、しかもアプデで仕様が微妙に変わったり新要素が入ったりするので、慣れるまでが難しいなあという感想です。
ただ、慣れると簡単なアプリとか作りやすいだろうなとも感じます。がっつりしたのもいけそうな気がします。
今後、スマホアプリをどういうペースで作っていくか、細かく決めているわけではありませんが、コンスタントに出せたらいいなと。PC向けのゲームも作ってみたいですね。WebGLで出してみるのも面白そうだなあと思います。
そういうわけで、今回夕目さんに頼りきりの開発となり、ソローとしては反省点がめっちゃ多いですが、今後自分もどうにかしていきたいと思うとともに、新しいゲームもそりゅースタジオとして出せていけたらいいなと思う次第であります。
立ち絵
せっかくなので、立ち絵とキャラを紹介してみます。
ヨーコちゃん
ヨーコちゃんです。ウルファールさんはさすがに使えないので、どういうキャラにするかな～と描いていたのですが、割とすんなり決まりました。胸のカッパードの飾りがアクセントです。
マサオくん
最新版マサオ君です。実家のような安心感。この立ち絵を使ってマサオ君ゲーも作れればなと思います。
カブ
最新版カブです。カブのグッズも作ってみたいですね。
偽マサオくん
偽マサオ君です。髪の色だけ変えてみました。
クマさん
お散歩ロードのクマさんです。毛の流れがちょっと難しかったですが、いい感じの最新版クマさんにできたかなと思います。
ラディ
新キャラのラディさんです。先に人形を作ってから立ち絵に起こしたので、人形の部分と立ち絵ならではの部分のマッチングが難しい点でした。でもムキムキな番人感は出せたかなと思います。この顔のキャラも久々に描けて楽しかったです。
ザ・スター
こっそり参戦、お散歩ロードのザ・スターさんです。全身を描くのははじめてだったので、下半身がちょっと難しかったかもしれません。肌色は多いけど健全な感じを目指しました。
今回なんか見た目が強そう（漠然）という基準でキャラを出していったので、完成する頃になって、「これ……肌色率高くない……？」となってました。気付くのが遅いな！！！審査通ってよかったです。この路線なら大丈夫なんだなあ。
追伸？
最後に、制作途中までググってはコピペしてたものの途中から力尽きたUnity参考リンク一覧です。こいつ力尽きてるな……という風に見ていただければ幸いです。
アプリ
UI
参考
最適化系
参考になりそうな記事
多分最新のやつの方が良い。しかしUnityも最新にしないといけない気がする。でも最新の方が早くなっているらしい
Web系
公式系
- Unity UI の最適化に関するヒント
- Unityのパフォーマンスの最適化に関するベストプラクティス
- #unitytips で生産性を上げ、仕事を半分に減らそう
- 最適化の最前線から：Addressables を使ってメモリを節約する
- モバイルゲームのパフォーマンスを最適化しよう：専門家が語るグラフィックスとアセットに関するヒント
2D系
なんとなく押さえとこう
不要なレイキャストターゲットRaycast Targetを外す
- クリックに必要のないものは外す。
不要なマスク可能とかも外す
- 不要なものは外していけ。
レイアウトグループは回避する
- 並べたい場合、コンポーネントをつけて、並べた状態で外す。
テクスチャのMaxSizeを減らす
- 画像自体を変更せずにサイズを削減できる
- 画質との兼ね合い
- イラストソフトで出力する際にサイズを減らした方が綺麗になりそうなので、Unity上で確かめてからそうするのが良さそう
テクスチャ圧縮方法
- クランチ圧縮が最強っぽい。
- 不可逆らしいので、やたらめったら使うと画像が荒れる……かもしれない。
- 【Unity】Crunch圧縮でロード時間は速くなるのか？
スプライトアトラスを使う
- テクスチャを一つにまとめることで、ドローコールを減らせる。
- 個別の画像が4倍等になっていなくても、テクスチャのサイズが自動でそうなるので、サイズが削減できる。
- 圧縮方法を個別に指定しなくても良い
- 個々の画像を最大限綺麗に表示したい場合は、試行錯誤が必要そう
- ただ2048でまとめて使うとメモリが常に圧迫されるかどうかが謎
- [Unity]複数のスプライトをアトラス化して描画負荷を軽減する
- Unityであつかう画像サイズのすべてを4の倍数にする必要はない
テクスチャフォーマット
- スマホ向けはまだ分からない点が多い
- [Unity] テクスチャの圧縮フォーマットを自動設定 / 一括変換する
- Unity Texture周り 備忘録
- 「デカいテクスチャはどれだ?」テクスチャのリストを吐いてみる
その他
textmeshpro
paddingを取らないと縁取りなどの分がなくなる。
- 【Unity】TextMeshProのMaterial Preset設定サンプル集
- TextMeshProGUIを動かした時、どの方法が一番負荷を下げられるのか試してみた
- 日本語WEBフォントをサブセット化する際の参考文字列一覧