$30 off During Our Annual Pro Sale. View Details »

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

QualiArts
September 16, 2022
820

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

QualiArtsではUnityの開発を支えるために、さまざまな機能の基盤化を行なっています。 その中からUI開発を効率化するために欠かせない基盤「quaunity-ui」の機能と特徴について紹介します

QualiArts

September 16, 2022
Tweet

More Decks by QualiArts

Transcript

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

    View Slide

  2. 1
    はじめに

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. 2
    QualiArtsの
    Unity基盤文化

    View Slide

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

    View Slide

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

    View Slide

  9. 3
    quaunity-uiについて

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  34. 6
    まとめ

    View Slide

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

    View Slide

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

    View Slide

  37. ありがとうございました

    View Slide