今日から始まりました！Qiitaアドベントカレンダー！！
今年もサムザップエンジニアは参加しています！
サムザップ Advent Calendar 2021 初日12/1の記事です！
突然ですが、UnityをつかったUI開発って難しくないですか？ぼくだけ...？
（今うなずいてくれた人、ありがとう！）
プロジェクトが始まった当初は問題なく進むのですが、
途中から調子が悪くなりますよね。。。
そう、ぼくたちが作っているのはゲーム。
仕様変更、ブラッシュアップの嵐が巻き起こる世界。
仕様変更のたびにUIシステムを修正しますが、そのタイミングでシステム的な矛盾が生じることはよくあります。
矛盾を見過ごしてそのまま突っ切るか、修正するためにだいぶ巻き戻すか。。。迷いどころですね。
そもそも、そのような大きな修正が生まれないようにすることはできないのでしょうかね。正直 「おさえるべきポイントを教えてくれ！」 とお思いの方も多いでしょう。
この記事を読んでいる方は、少なからずUI開発に興味があり、UI設計方法を知りたい人に違いない！
（...と思います。思いたい！）
そこで本記事では、「おさえておきたいUI開発3つのポイント」を紹介します。
その前にさっきから偉そうにお前、誰だよ...？だと思うので、簡単に自己紹介すると株式会社サムザップのオオバです。UI開発歴12年、Unity歴は9年ほどの元デザイナー。新規ゲームの立ち上げ多数。UI開発・設計が得意です。
TwitterやこのブログでUI開発について発信しています。
興味ある方はフォローしてください。
X : @ohbashunsuke
話を戻しますが、実務の中でUI設計は、かなりの数をこなしてきました。その経験から得た知見を共有したいと思います。
また、ひとことで「UI開発」と言っても広すぎるため、 「画面遷移」にしぼった解説をします。
- UI設計をしたことのないUnityエンジニア
- これからUIの設計を学びたい新卒エンジニア
- エンジニアリングに興味のあるUIデザイナー
ターゲットは👆のような 「UI設計に自信がない」 人たちです。
断言できますが 「UI開発は設計が命」。
設計次第で簡単にプロジェクトは失敗します。
この記事がUIの設計力を磨く助けになればうれしいです。
では、いきなり結論から解説行っちゃいましょう。
UI開発で重要なのはこの3つ！
画面遷移を設計する上で 重要なのは3つのポイント です。
- 直接遷移できますか？
- 戻る仕組みが考慮できていますか？（Androidバックキー含む）
- 各画面を拡張して開発できますか？
どれか1つでも考慮できていない場合は、プロジェクトの中盤で破綻します。
リリース後の運用に耐えられるUI設計をしていきましょう。
では1つずつ解説していきます。
👉DOTweenの教科書を読んでUnityアニメーションをプログラミングしてみよう！
1. 直接遷移できますか？
画面遷移システムにとって
「直接遷移」は超重要であり必須機能です。
つまり直接遷移とは、どこへでも遷移できる仕組み。
必ず仕様変更で必要になる直接遷移
ゲーム開発中に仕様変更は起こりやすいものです。
みなさんも経験あると思います。
直接遷移できる仕組みにしておくと、仕様変更にも対応できます。
「A画面 → B画面 → C画面」という仕様が、「A画面 → C画面」に遷移するように変更が入ったとしても直接遷移できれば開発遅延は最小限におさえられます。
ソースコードを数行書き換えるだけでしょう。
もちろんバトル結果など、特定の画面からしか遷移できてはいけない仕組みも必要です。
ただし内部の設計はどこへでも遷移できるように作っておくと安全。
直接遷移は画面遷移システムを作る上で はじめに覚えておきたいこと なので、最初に紹介しました。
2.戻る仕組みが考慮できますか？（Androidバックキー含む）
直接遷移に続いて、「画面遷移」で重要なのは「戻る」仕組みです。
「A画面 → B画面 → C画面」と遷移したあと、「C画面 → B画面 → A画面」と戻れる必要があります。
ここでも重要になるのが「直接遷移」の仕組みです。
直接遷移が実装されていれば、「B画面 → A画面」は特に何も問題は起きません。
つまり直接遷移の範囲内の仕様だからです。
このように「戻る」仕組みと直接遷移は密接です。
そして、この戻り先の情報をどのように管理するかも重要です。
ではどうやって戻るを実装するか？
画面遷移システム内で遷移の履歴を管理
遷移した画面の履歴を保持しましょう。
「A画面 → B画面 → C画面」と遷移したら、「B画面データ、A画面データ」という履歴データが画面遷移システム内に登録されます。
ここで「戻る」を実行してみます。
戻るときには、画面履歴データを参照し、最新の履歴データを取り出して遷移します。
👆このようにB画面データが取り出せました。
つまりB画面に遷移しました。
B画面に遷移後、再び戻るを実行します。このとき画面履歴データは「A画面データ」のみです。
👆このようにA画面データが取り出せました。つまりA画面に遷移します。
このように画面システム内に履歴を管理する仕組みを持つことでシンプルな設計で「戻る」を実装することができます。
このままでは終われない！スマホゲームの「戻る」機能
実は「戻る」機能の話はまだ続きがあります。スマホゲームの場合、戻るは特殊です。
- 画面内の戻るボタン
- Androidバックキー
この2つの操作があり、両立する設計が求められます。同じような要素ですが注意点が1つ。
いつでも実行可能なAndroidバックキーの攻略
画面内の戻るボタン と Androidバックキー には決定的に違うポイントが1つあります。
「戻る」ボタンは、戻るボタンが表示されているときしか実行されません。
しかし Androidバックキーはいついかなる時でも実行可能 です。
これが大きな違いであり、開発者を悩ませる最大のポイント。
つまり 「戻る」を実行するタイミングの管理も必要 だということです。
どう管理するかはプロジェクト依存になりますが、
- 画面遷移中
- ダイアログを表示中
- 何かしらの演出中
といった「戻るを実行する」と都合の悪いときはAndroidバックキーをブロック（動作させない）することが多いです。
つまりAndroidバックキーをブロックすることで、想定外の遷移リスクがなくなります。
重要なのは画面遷移を設計する上で 常にAndroidバックキーは意識しておく必要があるということです。
3. 各画面を拡張して開発できますか？
最後にゲーム仕様を満たすために各画面は拡張できる必要があります。
以下の4つが最低限の拡張ポイントです。
A. 表示する前処理
B. 表示アニメーション処理
C. 非表示アニメーション処理
D. 非表示後の処理
具体的な用途を解説します。
A. 表示する前処理
画面を構築するための拡張ポイントです。
- 通信してデータを取得
- 画面UI要素の構築
- アセットのロード
など。
つまり画面の初期化処理を実装します。
B. 表示アニメーション処理 / C. 非表示アニメーション
画面遷移の表示非表示アニメーションの拡張ポイントです。各画面要素が違うため、それに合わせたアニメーションを実装します。
実装する方法は、いくつもありますが、ソースコードで実装することをオススメします。
オススメはしませんがAnimationClipを使うことも可能っちゃあ可能です。ただし 作り方に制限 を伴います。
AnimationClipはGameObjectの階層構造を元に動作します。
各画面の階層構造が全く同じになるでしょうか。
最初はがんばって同じ構造にできると思います。
しかし問題になるのはプロジェクト中盤から後半、そしてリリース後です。
仕様変更、機能拡張によってどうしてもGameObjectの構造制限がキツくなる時が来るでしょう。想像しただけでもゾッとしませんか...
結局AnimationClipをやめるときがやってきます。
明るい未来のことを考えて、表示・批評にアニメーションはAnimationClipではなくプログラミングで処理するやり方をオススメしています。
D. 非表示後の処理
非表示後の処理とは、画面の「おかたづけ拡張ポイント」です。つい、可愛らしく行っちゃいましたが画面非表示後に必ず呼び出す処理です。
イベントの解除、動的に作成したオブジェクトの破棄、アセットバンドルのアンロードなどを想定しています。
「特定の画面に遷移するとメモリーリークする」といった不具合はよく起きます。
※メモリーリークとは使用メモリがどんどん増えていくことで、プログラマー的には想定外の事態のことです。
おかたづけタイミングを明示的に作ることで、👆のようなトラブル発生率は低くなります。
大人になっても（むしろ大人こそ）おかたづけ大事です。
まとめ
今回の記事では
- 直接遷移できるか？
- 戻る仕組みが考慮できているか？（Androidバックキー含む）
- 各画面を拡張して開発できるか？
以上の3つのポイントを説明してきました。
ぶっちゃけますが、この記事を読んでも 設計に失敗する と思います。
設計とはトランペットと同じ。最初から上手に吹けるわけがないのです。
夜明け前に起床してかごからハトを出し、家の屋上でトランペットの練習を毎日続ける。
その先に堅牢なUIシステムが待っているでしょう。
むしろ失敗していろいろ試すことをオススメします！
この記事がUI設計の学びのきっかけになるとうれしいです。
※アドベントカレンダーなので文章中のテンションはお許しください。🙇♂️
この記事が気に入ったらフォローしよう
「Unity初心者大学」というUnity初心者向けのYouTube始めました！！
ぜひチャンネル登録をお願いします！
最後まで読んでいただきありがとうございました！
すばらしいUI開発ライフをお過ごしください。
