モバイルゲームのUI開発を 支える基盤の仕組み 株式会社QualiArts 住田直樹

1 はじめに

住田 直樹 •株式会社QualiArts Unityエンジニア 2018年度新卒 技術書典「UniTips」シリーズ執筆、CA.unity運営 Unity/C#/Airtest/Rust/Jenkins •Twitter: https://twitter.com/udon_qu •GitHub: https://github.com/Nitudon •ブログ: うどんてっくメモ

アジェンダ QualiArts社内のUI基盤「quaunity-ui」の紹介 • 提供する機能 • 機能設計 • IDOLY PRIDEでの使い方 IDOLY PRIDEの事例を元に UI開発を支える基盤の機能や特徴について紹介します ※時間の都合上、画面設計に絞った内容となります

IDOLY PRIDE 「IDOLY PRIDE」はアイドルをテーマとした メディアミックス作品 • アイドルマネジメントRPG • 2021年6月24日リリース • Unity2020のLTSを使用

2 QualiArtsの Unity基盤文化

QualiArtsの基盤文化 •モバイルゲームのUnity開発では共通する機能を基盤化 どのプロジェクトでも大体必要になるという機能は積極的に推進 •基盤の数は2022年現在で20以上 UI、ビルド、描画、ADV、通信、課金、ツールなど Unity系は「quaunity-〇〇」という命名パターンが多数

基盤の開発体制 •基盤はUnity Packageとして管理 社内レジストリで配信し、各プロジェクトで適宜バージョンを見て利用 開発自体はGitHubのリポジトリとして管理、GitHub Actionsでパブリッシュ •開発の主体はプロジェクトとは別の「開発推進室」が担当 プロジェクトを横断で見て、必要な基盤や機能開発に従事

3 quaunity-uiについて

quaunity-uiとは UI開発の基本的な機能とツールを提供する基盤 「IDOLY PRIDE」をはじめとして、多くのプロジェクトに導入 uGUIベースでUnity2021に対応 非同期処理の部分はUniTaskを使用 TextMeshProに対応

quaunity-uiの提供機能 •画面設計 •リストビュー •テキスト •ボタン •ダイアログ •ドラッグや長押しなどのジェスチャー •セーフエリア対応 etc...

quaunity-uiの提供機能 •画面設計 ← 今回の話はここ •リストビュー •テキスト •ボタン •ダイアログ •ドラッグや長押しなどのジェスチャー •セーフエリア対応 etc...

画面設計 モバイルゲームが実現すべき画面設計の要件 • 色々な機能の画面を量産したい ホーム画面、カード画面、ミッション画面、ガチャ画面、イベント画面など • 画面間の頻繁な遷移をサポートしたい • 前の画面に戻ったり、画面間の情報を受け渡したい 画面間の遷移が柔軟で、効率的な量産が可能な基盤が必要

4 柔軟な遷移を実現する 画面設計

ツリー構造の画面設計 Nodeという単位で画面を表現し、ツリー状に管理 Scene-Window-Screenという階層関係で親Nodeが子Nodeを管理 子Nodeは複数管理可能で、最後に開いたNodeがアクティブ Scene Window Screen OutGameScene └ HomeWindow 　└ HomeTopScreen └ CardWindow 　└ CardListScreen 　└ CardDetailScreen

遷移処理の一例 開く処理 ● Open ○ 子のNodeやツリーを追加 ● Switch ○ 子のNodeやツリーを差し替え　 閉じる処理 ● Close ○ 子のNodeを削除 遷移時の処理 ● OnInitialize ○ 初期化時 ● OnOpenIn ○ Openで表示する時 ● OnCloseIn ○ 前面にCloseされて表示する時 ● OnOpenOut ○ 前面にOpenされて非表示する時 ● OnCloseOut ○ Closeで非表示する時

HomeTop IDOLY PRIDEのツリー遷移 Card CardList Card CardList Card CardList CardDetail Open Close

Home HomeTop IDOLY PRIDEのツリー遷移 Home HomeTop Live LiveTop ライブボタンで LiveWindowを Open

ツリー構造の二つの利点 保留 展開

ツリー構造の二つの利点 保留 展開

ツリー構造の保留 前のNodeを残した上で、次の画面に遷移可能 別の画面機能で何かしらした後、戻りたいという要件を解決 デッキを 強化したい カード強化 をOpen 強化を反映 したデッキ 画面に戻る カード強化 をClose Scene └ Deck 　└ DeckTop Scene └ Deck 　└ DeckTop └ Card 　└ CardUpgrade Scene └ Deck 　└ DeckTop OnCloseIn で反映！

ツリー構造の二つの利点 保留 展開

ツリー構造の展開 ツリーごと開くことで、階層の深い部分に直接遷移することも可能 シーンを開いた際の画面構造の初期化にも便利 Scene └ Home 　└ HomeTop Scene └ Home 　└ HomeTop └ Card 　└ CardTop 　└ CardList Scene └ Home 　└ HomeTop └ Card 　└ CardTop CardTopの 先にある CardListに 行きたい CardListを Close

ツリー構造の二つの利点 画面間の頻繁に遷移を行い、その遷移で情報のやり取りが必要 => 前画面を保留して管理することで実現 階層の深いところへの遷移が必要 => 単一の画面ではなくツリーごと展開可能な作りによって実現 モバイルゲームの遷移要件に適応した画面設計

5 テンプレートの自動生成 ツールによる開発効率化

テンプレートの生成ツール Unity上のUIでC#のスクリプトとPrefabが生成可能 エディタ拡張として、テンプレートの設定と出力を行うツールを開発 画面設計以外のリストやダイアログでも同様のツールを開発

生成するテンプレート • 画面の種類を定義するEnum • Windowのスクリプト • WindowのPrefab • Screenのスクリプト • ScreenのPrefab

シンプルにテンプレートのC#スクリプトから置換する形で生成 テンプレートのスクリプト namespace #NAMESPACE_NAME# { /// /// #DESCRIPTION#のScreenのPresenter /// [DisallowMultipleComponent] [RequireComponent(typeof(#VIEW_NAME#))] public class #PRESENTER_NAME# : #PRESENTER_BASE_NAME#<#VIEW_NAME#, TransitionParam> { /// /// 初期化 /// protected override async UniTask InitializeAsync(TransitionParam param, CancellationToken ct) { } } }

テンプレートのPrefab • テンプレートのPrefab Variantsとして生成 • 最低限必要なスクリプトはアタッチ済み • プロジェクトごとの編集と拡張が可能

Enumの生成画面 WindowとScreenごとのEnum を入力してGenerateをポチる

Nodeの生成画面 enumに従ったNode一覧を表示 生成したいNodeの情報を入力し、Generateをポチる

画面実装手順の例 1. 画面のEnumを定義 2. 画面のスクリプトを作成し最低限の実装を行う 3. 画面のスクリプトをアタッチしたPrefabを作成 4. Prefabにデザイン要件に沿ってUIパーツを配置 5. 画面のロジックを実装

画面実装手順の例 1. 画面のEnumを定義←ツールで自動化 2. 画面のスクリプトを作成し最低限の実装を行う←ツールで自動化 3. 画面のスクリプトをアタッチした最低限のPrefabを作成←ツールで自動化 4. デザインに沿ってPrefabにUIパーツを配置←別ツールで半自動化 5. クエストの開始画面のロジックを実装 制作工程の自動化によって効率的な量産を実現

6 まとめ

まとめ •QualiArtsのUnity開発では「quaunity-ui」を元にUI開発を進行 プロジェクトと別の組織が開発、パッケージとしてPackage Managerで提供 •モバイルゲームに必要な遷移要件のために、ツリー構造の画面設計を提供 •スクリプトやPrefabのテンプレートを自動生成し、開発を効率化

みなさんのご家庭にあるUI設計の話 お待ちしております！

ありがとうございました