Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

1 はじめに

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

2 QualiArtsの Unity基盤文化

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

3 quaunity-uiについて

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

シンプルにテンプレートの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) { } } }

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

6 まとめ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ありがとうございました