はじめに

本記事では「CA社員がどうUnityを現場で扱っているか」をテーマに、私たちUIデザイナーの2人がUnityを使用してどのようにUIを実装しているかをご紹介します。

現在ゲームUIデザイナーとして働いている方やこれから目指そうと思っている方、また UnityにおけるUI実装に興味がある方向けの内容となっています。

概要

以下の順番で説明していきます。

UnityでXDやFigmaで制作したUIを配置
UnityでUIアニメーションを作成
実際のゲームでの使用例

1.UnityでのUI配置

まず、 UI を配置する上でのポイントを3つご紹介します。

01「分解」

1つ目は「分解」です。

Unity では各オブジェクトに対してアニメーションをつけることが可能です。その際、どのようなアニメーションをどのようなオブジェクトにつけるかによって、オブジェクトの構成や分解の数が変わってきます。

例として上記のようなロック解放演出を想定します。鍵の上半分と下半分を分解して書き出すことで、オブジェクトごとにアニメーションを制御することができます。

02「階層」

2つ目は「階層」です。

UIは一見すると平面的に見えますが、実際は分解された複数のオブジェクトを組み合わせて構成されることが多いです。

例として上記のようなリストUIを想定します。最下層に下地、その上に装飾要素、テキスト、最上層にロックオブジェクトという4つの階層から成っていることが分かるかと思います。

三次元的な奥行きを意識することが大切です。

03「基点」

3つ目は「基点」です。

昨今、スマートフォンやタブレットなど様々な画面比率の端末が普及しています。各端末において表示が破綻しないように、各オブジェクトの基点を設定してレイアウトすることが大切です。

実際の作業でも、Unity上で各画面比率を確認して、UIが破綻していないかチェックするように心がけています。

これまでのポイントを活かして、サンプルで作成したUIを実際にUnityで組み込んだ例がこちらです。

2.UnityでのUIアニメーション制作

続いて、UnityでのUIアニメーションについて説明します。今回はUnityに標準搭載されているAnimator、Animation Clipを使用します。

01「ファイル作成」

まず、アニメーションに必要なファイルを作成します。

アニメーションをつけたいオブジェクトに対して、Animatorコンポーネントをアタッチします。次に、新規Animation Clipを作成します。AnimatorはAnimation Clipを管理するデータ、Animation Clipはアニメーションそのもの、とイメージすると分かりやすいと思います。