モバイルゲームのUI開発を支える基盤の仕組み

モバイルゲームの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# { /// <summary> /// #DESCRIPTION#のScreenのPresenter ///
</summary> [DisallowMultipleComponent] [RequireComponent(typeof(#VIEW_NAME#))] public class #PRESENTER_NAME# : #PRESENTER_BASE_NAME#<#VIEW_NAME#, TransitionParam> { /// <summary> /// 初期化 /// </summary> 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設計の話お待ちしております！

ありがとうございました

モバイルゲームのUI開発を支える基盤の仕組み

モバイルゲームのUI開発を支える基盤の仕組み

QualiArts

More Decks by QualiArts

Featured

Transcript