UI実装/配置を誰がやるか問題

「Game Graphic Design Advent Calendar 2019」の 12/24 記事です。

当方、UIプログラマとしてゲーム開発をしています。
今までの経歴でいつもUI実装方法について頭を悩ませてきて、様々なUI実装方法を行ってきました。結局どれにすべきなのか一度まとめたいと思っていたところ、ちょうど枠が空いていたので書くことにしました。
今回のAdvent CalendarはゲームのUIデザイナー向けのものだと認識していますが、ゲームにおいてUIをデザインしたあと誰がどうゲームに乗せるのかはUIデザイナーの方にも考えて欲しいことなのでこれを共有します。
またUIデザイナー向けを目指したのもあってコンパクトにまとめています。細かい話を聞きたければお気軽にご質問ください :)

１．プログラマがUI Editorで実装する

[概要]
指示書などで指示した配置通りにUI Editor上でプログラマが配置する
[良い点]
* 前準備/システムに時間がかからない
[悪い点]
* イテレーションができない
* デザイナーの指示書、プログラマの配置と無駄なコストがかかる

ナンセンスです。開発時にほぼ選択肢に入れる必要がないと思うので書くかどうか悩みましたが、注意喚起として書くことにしました。
私が1年目にやったプロジェクトでは経験がなかった故にこれをやってしまいましたが、無駄なコストがかかるだけでよくないので、やっている方がいたら以下から他の方法を考えた方が良いと思います。
言わずもがなですが、UIデザイナーが思っていることを実現してもらうのにそれを正確に伝えるのも大変ですし、汲み取った上でプログラマが正確に対応するのも大変です。

本当に時間がない時はこれをせざるを得ないかもしれませんが、インディーズスタジオでもコスト削減のためこの方法は避けると思います。

２．UIデザイナーが作ったデータをコンバートする

[概要]
PSDなどのデータをコンバートしてUI Editor上での配置を自動で行う。データバインディングはプログラマが行う
[良い点]
* デザイナーの作業環境が変わらない
[悪い点]
* プログラマの対応が結構必要（ゲームデータバインディング、アニメーション用のイベント設定等）
* デザイナーの自由度が低い

UIデザイナーが作ったものをコンバートする流れはUI配置の自動化という面では良いと思いますが、データバインディング（データと表示物の紐づけ）及びUI Editor上での作業にプログラマの手が必要になってしまうと、デザイナーだけでプロトタイピングやイテレーションがしにくいのが気になります。
DCCツール上でのデザインプロトタイピングの回数を重ねて、ゲームへの反映及び変更の回数を抑えれる、もしくはVisualだけの変更で済むならばこの方法がコストがかからずに良いと思いますが、ゲーム上でのイテレーションを多く回したい場合には他の選択肢が良い気がします。
また、規模が大きいプロジェクトほどゲーム上でのイテレーション回数を増やしたい傾向にあるかと思います。

中小規模のプロジェクトならばこの方法、規模が大きいプロジェクトなら下記の方法が良い気がします。

３．UIデザイナーがUI Editorで実装する

[概要]
FlashやUnity Editor上で直接作る
[良い点]
* イテレーションしやすい
* アニメーションつけやすい
[悪い点]
* UI Editorの習得コストがかかる
* 新しい条件を追加するにはプログラマの作業が必要

プログラマがUI表示用のデータとイベントトリガーにUI Editorからアクセスできるようにして、あとはUIデザイナーがUI Editor上で自由に組むのが主な手法かと思います。こうすることで、配置やアニメーションを自由に変更しゲーム上でイテレーションをすることができます。また、Unity Editor上でUIデザイナーが直接編集する際もこれにあたりますが、Unityの場合は前述したデータコンバートと組み合わせるのが多そうです。

ただ、UIデザイナーがUI Editor上で自由に組めるのは既存の条件を使っている限りとなります。たとえば、リスト中のものを自由に並べ替えできるようにしたいとUIデザイナーが思った時、並べ替えができるシステムを用意してもらう必要があるでしょう。もう一つ下の方法ではそれをUIデザイナーだけで追加することができます。

Flashを専門学校の授業で教わったことがあるのですが、その際講師の方(ゲームではなくIT系)が言っていたことを鮮明に覚えています。「これはプログラマの仕事ではなく、デザイナーの仕事だけどね」と。
たしかにユーザーが触れる部分はシステムよりデザインの比重が高いところであり、多少Scriptを使うとしてもUIデザイナーがやった方が良いのかなと納得していましたし、Web系では実際にデザイナーがやっていることも多いようです。

４．UIデザイナーがVisual Scriptingで実装する

[概要]
Unreal EngineなどのVisual Scriptingで作り、それがそのままゲーム上で動く
[良い点]
* プロトタイピングしやすい
* イテレーションが容易
* 一度システムができればデザイナーだけで完結できる
[悪い点]
* Visual Scriptingの習得コストがかかる
* 安定性/保守性が高いものを作るのは高度なスキルが必要

この方法は今のプロジェクトでやっていることで、今回一番共有したいことなので少し詳しめに解説します。
Visual Scriptingとは、ゲームのScriptを視覚的に構築できる仕組みです。視覚的に構築できる分前述のUI EditorでScriptを組むよりはまだデザイナーに優しいかと思います。Unreal EngineのBlueprintが一例です。
Blueprintを簡単に言うと、システムを一度プログラマが作ってくれれば、あとはゲームデザイナーだけでレベルを作ったり、ゲーム全体を作れるというようなVisual Scriptingです。

これをUIで使うとどういうメリットがあるかざっくり言うと
* 好きな条件でUIを配置しなおしたりアニメーションしたりできる
* システムのデータと表示上のデータを分けることもできる
* ナビゲーション(操作時の挙動)を自由に設定できる
ほぼ思い通りのUIをゲームに実装できます。XDでのプロトタイピングをゲーム上で行えると思ってください。

これを聞いて素晴らしい！是非使いたい！と思う方もいるかもしれませんが、もちろんデメリットもあります。
自由にUIを構築できるということは、自由にめちゃくちゃにできるということでもあります。条件を自由につけたり、値をScriptで保持したりできるのでやってることはプログラミングと変わりません。なので気を付けないとバグの温床になります。

それにどう対応するかというと、プログラマがScriptをレビューしたり、Technical UI DesignerというScriptを組むことを主として仕事をする職種があったりします。
実際に私も難しさを痛感していて、多くの時間をデザイナーのサポートに費やしてしていたり、他のプロジェクトの話で「次はVisual Scriptingを使いたくない」という話も耳にしました。形にするのが早くても安定性/保守性が高いものを作るのは１プロジェクト以上の経験を要すると感じています。

まとめ

個人的な今後の流れの予想としてはUnityやUnreal Engineでゲームデザイナーがゲームデザインを直接ゲーム上に実装できるようなったのと同じように、UI実装/配置するのはプログラマの仕事ではなくUIデザイナーの仕事になっていくのではないかと思います。
もちろんプロジェクトの規模/方針次第だとは思うものの、ゲーム上へのUI実装/配置をプログラマが仲介する作業は極力減らした方がお互いに嬉しいはずです。

この話に疑問を持つ方もいるかもしれませんが、例としてXDで作ったものがそのままゲームで使えたらと考えると納得頂けるかと思います。
ただ、実際にはXDで作ったものをそのままゲームに持って行ったとしても、データバインディングやトランジションの条件等の問題が残ってしまうので、そこをデザイナーのみで実装できる形にするならUI Editorで作るかVisual Scriptingを行う形になるかと思います。

とはいえ、実情としてテクニカルなことができるUIデザイナーはとても少ないので、すぐに全体的にそういう流れになるとは思いません。それぞれのメリットデメリットを頭に置いておくと良いと思います。

プログラマとUIデザイナーお互いにwin-winな関係を築けるように頑張りましょう！

以上となります。
Happy Holidays and Happy New Year!!

～クリスマスプレゼント～

大好きなBungieの素晴らしすぎる講演が悲しい再生数なので拡散したい :0