こんにちは。『NieR Replicant ver.1.22474487139…(以下Nier Replicant ver.1.22)」にてUIプログラマーを務めさせていただいたYです。本記事では、UIプログラマーの仕事について『Nier Replicant ver.1.22』の例を踏まえながら簡単にご紹介したいと思います。

UIプログラマーはどんな仕事をしているのか

「そもそもUIプログラマーって何をしているの？」と思う方がいらっしゃるかもしれません。そこで、まずは簡単にUIの説明とUIプログラマーの仕事についての説明をしようと思います。

UIは「User Interface」の略称で、ゲームに限らない様々な製品やサービスにおいて「ユーザーと接する部分」を指します。ゲームで言うと主に「メニュー画面」や「HUD」等の画面上に表示される情報がUIに該当します。

ではそのUIに携わるプログラマーは業務で何をしているのか。そのまんまの表現ではありますが、私は「ゲームのメニュー等の表示物をプログラムで実装する」お仕事だと思っています。

メニューを作る仕事と聞くと、デザイナーの領分に聞こえると思います。実際、メニューを構成するデザインそのものはほとんどデザイナーが考えて作成したもので、UIプログラマーは必ずしもデザインセンスのある方ばかりではありません。じゃあプログラマーが必要無いかというとそうではなく、デザイナーが用意したものをプログラムに組み込み、きちんと表示されるように息を吹き込んでいくのがプログラマーのお仕事になります。

例えばゲームキャラの体力を表現する「HPゲージ」。デザイナーが用意した段階ですでにゲージ自体は出来上がっているので、このままゲーム画面に表示するだけで終わりそうですが、そうではありません。ゲーム中はユーザーの操作によって主人公の体力が減ったり、回復したり、時には状態異常になったりと状況が変わっていきます。

また、『Nier Replicant ver.1.22』では主人公のレベルに応じてゲージの全長が変わっていくという仕組みが入っています。これらの「ユーザーの操作によって変わる状況」や「作るゲームで必要となる仕組み」に対応する為に、デザイナーの用意したものを制御するのがUIプログラマーの作業になります。

Toylogicでは内製エンジン「Toylo Engine(トイロエンジン)」が独自でサポートする形式のリソースを使い、ゲームのメニューやHUDを作成しています。次項では『Nier Replicant ver.1.22』の作業を一例にもう少し具体的に説明しようと思います。

『Nier Replicant ver.1.22』でのUI実装事例を紹介！

先ほどのUIの説明でも見せていた「HPゲージ」を一例に実装を紹介していきます。Toylo EngineではAfter Effectsで作成したデザインを独自のデータフォーマットへ変換してゲームに組み込んでいます。After Effectsで作成する為、デザイナーが比較的作業しやすいつくりになっています。また、独自のデータフォーマットを使用している為、プログラム側でパラメータの制御や要望の対応がしやすく、状況に応じたアニメーション制御が楽に行えます。ではどうやって実装を行っているのか。あまり詳しく書くことは出来ないので、流れを簡単にまとめようと思います。

まずプランナーから「このゲームではこういった表示をしたいです」という表示のルールを貰います。この時プログラマーやデザイナーが意見を出して、ユーザーにとってより良い表示が出来るように相談することもあります。次にデザイナーと相談しながらAfter Effectsでのデータを作成してもらいます。その後、内製エンジンで使う独自形式へ変換してゲームで表示出来るようにした後がプログラマーの本領発揮です。

『Nier Replicant ver.1.22』では主に「主人公のレベルに応じて全長が変わる」「敵から攻撃を受けるとHPが減る」「回復アイテムを使うとHPが回復する」「特殊な敵の攻撃で毒状態になる」といったルールがありました。これらに対応する為に、プログラマーは「今の主人公のレベルはいくつなのか」や「攻撃を受けたり回復をしたりして今のHPはいくつなのか」等のデータを計算し、デザインリソースの状態を変えていきます。

一通りのルールに対応させた結果がこちらになります。

攻撃を受けた際にHPが減る、毒状態によって段々とHPが減るアニメーションが発生する、アイテムを使用することでHPが回復する、といった一連の表示が行えていると思います。様々な表示物をルールに沿うように、かつユーザーにとってより良い形での表示になるようにどう制御すれば良いか。これはUIプログラマーが作業をする際に頭を悩ませる部分です。ですが、そうやって悩みつつ試行錯誤している自分の作業結果はゲーム画面にダイレクトに表示されるので、業務をしていて楽しい部分でもあります。

おわりに

『Nier Replicant ver.1.22』の例を踏まえながら、簡単にではありますがUIプログラマーのお仕事をご紹介させていただきました。皆さんが普段何気なく見ているゲームの表示物も、プランナー/デザイナー/プログラマーが力を合わせて作っているものです。「あのゲームのUIはどういった制御がされているのかな？」と考えながらゲームのUI表示を見てみると、また違った発見があって楽しいかもしれません。