QualiArtsではUnityの開発を支えるために、さまざまな機能の基盤化を行なっています。 その中からUI開発を効率化するために欠かせない基盤「quaunity-ui」の機能と特徴について紹介します
モバイルゲームのUI開発を支える基盤の仕組み株式会社QualiArts 住田直樹
View Slide
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を使用
2QualiArtsのUnity基盤文化
QualiArtsの基盤文化•モバイルゲームのUnity開発では共通する機能を基盤化どのプロジェクトでも大体必要になるという機能は積極的に推進•基盤の数は2022年現在で20以上UI、ビルド、描画、ADV、通信、課金、ツールなどUnity系は「quaunity-〇〇」という命名パターンが多数
基盤の開発体制•基盤はUnity Packageとして管理社内レジストリで配信し、各プロジェクトで適宜バージョンを見て利用開発自体はGitHubのリポジトリとして管理、GitHub Actionsでパブリッシュ•開発の主体はプロジェクトとは別の「開発推進室」が担当プロジェクトを横断で見て、必要な基盤や機能開発に従事
3quaunity-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がアクティブSceneWindowScreenOutGameScene└ HomeWindow └ HomeTopScreen└ CardWindow └ CardListScreen └ CardDetailScreen
遷移処理の一例開く処理● Open○ 子のNodeやツリーを追加● Switch○ 子のNodeやツリーを差し替え 閉じる処理● Close○ 子のNodeを削除遷移時の処理● OnInitialize○ 初期化時● OnOpenIn○ Openで表示する時● OnCloseIn○ 前面にCloseされて表示する時● OnOpenOut○ 前面にOpenされて非表示する時● OnCloseOut○ Closeで非表示する時
HomeTopIDOLY PRIDEのツリー遷移CardCardListCardCardListCardCardListCardDetailOpen Close
HomeHomeTopIDOLY PRIDEのツリー遷移HomeHomeTopLiveLiveTopライブボタンでLiveWindowをOpen
ツリー構造の二つの利点保留展開
ツリー構造の保留前のNodeを残した上で、次の画面に遷移可能別の画面機能で何かしらした後、戻りたいという要件を解決デッキを強化したいカード強化をOpen強化を反映したデッキ画面に戻るカード強化をCloseScene└ Deck └ DeckTopScene└ Deck └ DeckTop└ Card └ CardUpgradeScene└ Deck └ DeckTopOnCloseInで反映！
ツリー構造の展開ツリーごと開くことで、階層の深い部分に直接遷移することも可能シーンを開いた際の画面構造の初期化にも便利Scene└ Home └ HomeTopScene└ Home └ HomeTop└ Card └ CardTop └ CardListScene└ Home └ HomeTop└ Card └ CardTopCardTopの先にある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設計の話お待ちしております！
ありがとうございました
qualiarts
davidbonilla
hatefulcrawdad
danielanewman
brianwarren
reverentgeek
destraynor
kastner
sstephenson
addyosmani
lara
eitanlees
productmarketing