UnityでUI開発を効率化するための工夫

2022/07/29 公開8 min read

はじめに

株式会社QualiArtsでUnityエンジニアをしている住田です。Unityのプロジェクトにてクライアントリードエンジニアをしており、並行して「CA.unity」や「技術書典」といった会社を跨いだ横軸活動の牽引などもしております。

さて、Unityでゲーム開発を進める上で欠かせないのが、デザイン仕様に基づいたUIの実装量産です。ボタンやリストなどゲーム画面を構成するUI要素は多く存在します。

よりクオリティの高いUIを実現するには、製作する工程の効率化とトライアンドエラーによるブラッシュアップが高速かつ柔軟に行える仕組みづくりが重要です。本記事では、QualiArtsのUnityプロジェクトにおいて、UI開発の効率化のために実践している工夫を4つほど紹介します。

汎用パーツのテンプレート生成と実装

UIを高速に作成するために重要なのがUIの実装を量産できる仕組み作りです。画面を構成するUIの機能は多く、似たような機能の実装を毎回やっていては多大なコストが必要となってしまいます。

そのために、QualiArtsではUnity用のUI基盤「quaunity-ui」を開発しています。どのプロジェクトでも必要になるようなUIの基本設計と機能を提供しており、プロジェクトではそれを利用して実装します。

実際現在リリースされている「IDORY PRIDE」においても、「quaunity-ui」が利用されています。これにより基本的な部分の実装を行わなくて済むため、プロジェクト側の開発コスト削減につながります。基盤化されているのはリストやタブ、ダイアログといった基本機能が共通するようなパーツです。複数のプロジェクトに導入することを加味して、導入側で拡張しやすい形となっています。

たとえばリストであれば、要素の配置やスクロールといった基本的な機能は用意されつつも、イベントや配置に伴うロジックなどは独自に実装可能です。基本的には「quaunity-ui」を利用したプロジェクト側の基盤が作られ、そこからそれぞれの具体的なリストが実装されることが多いです。

また、Unityにおいてはコードの実装からオブジェクトの配置と適切なコンポーネントのアタッチと設定という手順が存在します。そうした作業も効率化すべく、テンプレートの自動生成も機能として備えています。 GUI上で必要なパラメータを入力して操作するだけで、基盤を使ったコードの雛形からそれらを適切にアタッチしたPrefabの生成までを行います。例として、「quaunity-ui」によって生成されるコードの一部とPrefabについてサンプルを次に示します。

using System;
using System.Threading;
using Cysharp.Threading.Tasks;

namespace Sample
{
    /// <summary>
    /// サンプルのリストのプレゼンター
    /// </summary>
    public class SampleListPresenter : ListPresenterBase<SampleListView, SampleListCellPresenter, SampleListItemModel>
    {
        /// <summary>
        /// セルクリック時のコールバック
        /// </summary>
        public Action<SampleListCellPresenter> onCellClickedCallback;

        /// <summary>
        /// 初期化
        /// </summary>
        public override async UniTask InitializeAsync(CancellationToken ct)
        {
            await base.InitializeAsync(ct);
            SetEvent();
        }

        /// <summary>
        /// Viewのイベントをセットする
        /// </summary>
        private void SetEvent()
        {
            Action<SampleListCellPresenter> action = (cell) => onCellClickedCallback?.Invoke(cell);
            foreach (var cell in _allCells)
            {
                cell.onClickedCallback += action;
            }
        }
    }
}

サンプルのコードについてはSampleListPresenterだけを書いていますが、ジェネリクスで指定されているListViewや、リスト要素を表すCellPresenter、リスト要素のデータを表すItemModelも自動生成されています。これによって、実装者はまず最低限必要な実装とオブジェクト構造をサクッと生成し、機能部分の実装にすぐ取り掛かることが可能です。

以上のようにUI開発の基盤整備によって機能と生産性の両面について担保しているのが大きな工夫の一つです。また、QualiArtsではUIのようにどのプロジェクトにも必要になる機能は積極的に基盤化を行なっています。こうしたエンジニアの基盤文化について気になる方は、こちらの記事を参考にしていただけると幸いです。

QualiArtsのUnity開発を支える基盤の紹介

量産パーツにおけるPrefabの活用と生成フローの整備

UIパーツを量産する上で、それぞれのパーツのPrefab化はやはり欠かせません。QualiArtsではダイアログ、リスト、ボタンといった汎用的なUIパーツでは積極的にPrefab化して運用しています。 Prefab化していくパーツの中でも、他のパーツで流用されるような部分はNested PrefabやPrefab Variantsを活用し、同じような構造であれば何度も作らなくていいような運用を心がけています。前述のテンプレート生成でも、これらのNested PrefabやPrefab Variantsを加味した雛形のPrefabが生成されるようになっています。

そして、Prefabとして作成したUIのパーツについては、メニューから生成できるようフローが整備されています。これはボタンやタブ、チェックボックスといった多用するUIパーツを迅速に生成するためです。

パーツが増えてくると必然的にUnity上で探す手間も増えてきます。小さな手間ですが、UI開発では何度も繰り返す操作であり積み重なると多大な時間のロスにつながります。ちょっとした実装で解決できるので、費用対効果的にもおすすめの取り組みです。

デザインルールのシステム化

QualiArtsではUIデザインを行う上でのデザインルールについて、システム的に解決することで設定の手間を省いたり、柔軟な変更を可能にしたりしています。ここでは「色」と「文字」のデザインルールについて、システム化することによる効率化について説明します。まずは「色」についてです。QualiArtsでは「uPalette」というOSSのツールをプロジェクトに導入し、検証しています。

uPalette

uPaletteは色をデータとして管理し、Unityのエディタ上及びスクリプト上からその色を参照できる機能を提供してくれます。エディタ上のGUI操作による手軽な設定や、即座に反映してくれる利便性、そしてエンジニアがスクリプトから使用することが考慮されているという柔軟性からこちらのツールを選択しています。デザインルールとして決められた色をuPaletteで列挙して管理することで、Unity上での色の設定作業もスムーズですし、色のルールが変更されたときにも柔軟に対応することが可能です。

次に文字です。QualiArtsでは文字の描画にTextMeshProを利用しています。

文字のデザインルールを考える上で、サイズ、色、文字効果、字間など多くの要素を考える必要があります。たとえばアウトライン付き文字はこのマテリアルと文字間、見出しはこの色でこのサイズ、といったようなものです。 TextMeshProでも当然それらの設定は個々で可能ですが、同じような設定を繰り返し行うのはやはり無駄が多いです。

そこで文字スタイルを定義するTMProTextStyleというクラスを設け、テキストに関するオプション群のプリセットを管理できるような形にしています。

通常の文言設定や強調する文言設定、英数字用の設定などデザインルールを基に設定を定義します。後はインスペクタから設定したり、スクリプト側で設定したりすることで、反映されます。これによって一括で調整する場合などにも設定を更新するだけで柔軟な対応が可能です。デザインルールは開発を進めていく中で細かい調整が入りがちなので、こうしたシステム的な制御は非常に有用です。

デザインツールとの連携

QualiArtsのUnityプロジェクトでは、UIデザインはAdobe XDというデザインツールを用いて、UIデザイナーさんが担当しているケースが多いです。 Adobe XDで作られたデザインをUnity上で効率よく再現すべく、社内でコンバートツールを開発し、各プロジェクトにて導入しています。コンバートツールは以下の二つで構成されています。

quaunity-xd-exporter : XDのデザインデータを解釈し、json形式で出力するXD用ツール
quaunity-xd : xd-exporterが出力したjsonからUnityのGameObjectや各種コンポーネントとして変換するUnity用ツール

quaunity-xd-exporterはXD用のプラグインとしてJavaScriptで、quaunity-xdはUnity用のツールとしてC#で実装されています。導入する際にはそれぞれプロジェクト側でXD側とUnity側への導入を行なっています。対象のXD上のデザインに対して、このプラグインを用いてパーツの名前や位置といった情報と対応する画像などを出力します。

そして、quaunity-xdを導入したUnityのプロジェクト内に出力されたデータのインポートを行い、Prefabを生成します。XD上のUI構造からGameObjectの構造やTransformの設定を行い、文字情報や画像情報からコンポーネントを設定します。生成されるPrefabは次のようになります。

これによって、デザインデータを見てエンジニアがImageやTextなどを手作業で配置し、設定するという手間を省くことができています。また、このコンバートツールが対応するのは位置や画像といった基本的なデザイン要素の再現だけではありません。拡張が可能になっており、XDから出力した情報をもとに、追加の適用処理を行うことが可能です。たとえばXD上の命名規則から特定の部分をPrefabで置換したり、XD上の効果をUnity上のコンポーネントに反映するというのが実際の拡張例です。デザインデータから実装に組み込む形に落とし込むまでを自動化することを実現しています。

前の方で言及したデザインルールの適用についても、XDのデータから自動的な反映を行なうことで、デザインルールが変更されてもシステム的に柔軟な変更が可能になっています。このように、見た目の自動適用だけでなく、Unity上の色々な設定作業まで自動化することを実現しているのがこのツールの強みです。以上がXDとUnityのコンバートツールによる開発効率化の工夫となります。

ちなみに、QualiArtsでは企画側でもXDを採用するなど、開発フロー全体でXDを活用しています。コンバートツールも含めた全体のXDを活用する開発フローについてはCEDEC2021でも発表しています。興味のある方はこちらも参考にしてみてください。

大規模モバイルゲーム開発を高速化するAdobe XD活用術〜企画立案からUnityと連携した実装まで〜

おわりに

UIの開発において、速度と柔軟性を兼ね備えた製作フローを整えることはゲーム開発にとって重要な部分です。 Unityの機能の活用はもちろんのこと、内製ツールやライブラリの拡充や、デザインツールとの連携など様々なアプローチが存在します。今回紹介させていただいた取り組みが、少しでも皆様の開発のヒントになれば幸いです。