V24 – 2D主体のUIデザイナーが3DUIを制作した話

こんにちは！マネージャー・テクニカルアーティスト・アートディレクターなどを担当しています遠藤博紀です

今回はV24のUIについて紹介したいと思います。実際に制作を担当いただいた㈱ドキドキグルーヴワークスの小川様に記事も書いていただきました（遠藤の方ではシーンやデータ構造について記事を書きました）

この記事はUnityで2DUI制作をされているデザイナーの方などを対象にした内容です。3DUIを制作するにあたっての気づきや苦戦したポイントについて書いています

プロジェクトV24概要

V24の概要および紹介については以下リンクにてご確認ください。
V24プロジェクト紹介記事

こちらが作成したリールです

BGM : ©Composer Squad

はじめに

この記事はUnityで2DUI制作をされているデザイナーの方などを対象にした内容です。 2DUIだけではなく3D空間上に配置されるUIを併用した表現に取り組み、そこで得られた気づきや苦戦したポイントについて書いていきたいと思います

イマドキ感のある表現なのでつい多用したくなりますが、カメラの動きや設定で見え方が変わったり歪んだりするので、視認性と操作感を損なわないデザインを心掛けました。 具体的には、ユーザーに伝えたい情報や操作を必要とする部分は固定したり極端なパースにならないように調整しました

ＵＩのお題

ゲームのキャラクター情報を確認する想定で作られたこのシーンでは下記のお題が技術向上やデザイン幅の拡充を考慮してつくられました

準備

ラフデザイン

まずはコンセプトアートを参考にしながらUIの配置やデザインラフを作っていきます
Photoshopレイヤーをスマートオブジェクトにして、歪みを加えて3D空間に配置されたイメージを想像しながら作業しました

※左の画像：確認　／　右の画像：作業

3Dキャラが選択された装備やスキルのアクションを取ってくれるコンセプトなので、アイコンはシンプルで主張しないシルエットデザインを採用することにしました

このあとUI・背景・キャラクターそれぞれ並行して作業が進められるように、最初に仮モデルでシーンのデータ構造とカメラを作成します

仮のカットシーンがUnityで確認できるようになったら、UIのIN / OUTアニメーションをカメラの動く方向に合わせた動きにすることを考えながら作業を進めます

3Dとの親和性を高める

UIを3Dとの親和性を高めるためには背景にあるものと合わせるのが効果的です。石碑にステータスが書かれている風にしたり、スキル選択画面ではキャラクターの立っている床に魔法陣が現れるようなデザインを作りました

武器選択シーンでは武器を構えたキャラクターが煽りでかっこよくみえることを狙ったシーンで、その印象を壊さないようにタイトルやUIもやや煽りの角度で配置することにしました

Unityへの組み込み

UI素材をインポートしたら、カットごとにPrefab化しながらAnimatorやDotweenでUIアニメーションを作っていきます。ここまでは2DUIでも3DUIでも同じで普段通りの作業です

そしていよいよUIのPrefabを3D空間に配置していきます普段はほとんど触ることのなかった3Dビューでの操作が新鮮でした

実際に配置するとコンセプトと違う

コンセプトイラストと実際の3Dモデルではカメラやキャラクターの大きさが違うので、配置するとUIの大きさが異なります。これらの点からも早めに組み込むのが重要です

慣れている2DUIの組み込みとは違ってカメラに映る位置や距離の感覚を掴むのに苦戦しつつ、ゲームビューでの見え方を確認しながら作業を進めました

3Dの作業が進んでレイアウトが決まったらUIのサイズやデザインをブラッシュアップしていきます

３Ｄ上にＵＩを配置する場合に起こる問題

よく起こる問題が、オブジェクトとの前後関係とポストエフェクトです。３Dオブジェクトとどのように干渉するのか？が素材ごとに変わる問題が起きます

素材ごとに下記のように要件がことなります

これらのニーズごとのカメラを用意したあとに下記の方法で表示を分けます
１．カメラに設定したレンダーテクスチャをＵＩに表示する
２．グラフィックスコンポジッター（URPのカメラスタック）を使う
今回は方法がシンプルでトラブルが少ない１を使っています。

コントローラ操作を意識したUI表現

メニューから装備変更を選択したときのアニメーション

今回のお題ではコントローラで操作するUIを想定しています
スマホゲームのタッチ操作とは違って、まずはUIを「選択」してから「確定」する操作になるので「どこが操作できるUIなのか」「何が選択されているのか」をわかりやすくしたいと考えました

操作が可能になった場所をアニメーションさせて視線誘導を行い、ユーザーの操作には必ずレスポンスを返すようにします

選択中のUIはポジティブカラーの黄色+発光+カーソルアニメーション

UIのポジティブカラーにはオレンジがかった黄色を選びました
このプロジェクト全体のテーマカラーでキャラクターにも使われている美しいターコイズブルーの反対色でもあり、暗めの背景にもよく映えるので正解だったと思います

UIアニメーションをタイムラインに並べていく

実際のゲームの開発ではUIの挙動についてエンジニアと相談しながら実装を進めます。今回はビジュアルのデモで実際に操作をするところまでは作らないため、人が行う操作をアニメーションで作成しました

表示時間の長いメニューはなるべく後から調整がしやすいようにアニメーションを以下のように分割しています。これはユーザの操作でアニメーションが変わるゲームでも同じような作り方をします

これらを3Dカットシーンのタイミングに合わせながらタイムラインに並べていきます。

完成したものがこちらです

あとがき

3D空間上にUIオブジェクトを配置してタイムラインでアニメーションを編集したり、コントローラ操作を意識したUI表現を考えるなど、沢山の新しい学びを得ることができました

例えばキャラクターが直接UIに干渉したり、オブジェクトの後ろから手前へ回り込んでくるようなUIといった3DUIならではの表現も今後は提案することができるようになったので表現の幅が広がったと思います

デザイナーを募集中です

Aimingでは、より良いものを追い求める技術向上や表現の追求に興味があるデザイナーを募集中です。今回はデザイナーの話をしましたが、企画やエンジニアも同じような方々が集まっている会社です。このような環境でゲームを作りたいと思った方は、ぜひ下記の応募欄から応募をお願いいたします。

最後まで読んでいただき、ありがとうございました！

一緒にゲームを作る仲間を募集中です！！詳しくは各ページをご覧ください！