「戦艦決闘空間」をUnityで創った話（３）

前回からの続きなのですが、GUI（ゲームのグラフィックユーザーインターフェース）作成では最初なので少し苦労しました。ちょうどUnityのuGUIが出てきたころでしたので、その勉強をしながら、試行錯誤しています。今回はuGUIによるユーザーインターフェース作成について紹介させて頂きます。

UnityのuGUIについて

スマホで動くアプリを創りたかったというのが自分のアプリ開発の最初のきっかけでしたが、スマホ機器は皆画面表示さいずが違うのでその点をどうするのかは一番心配な部分でした。

ネット先生（ググった結果ということ）や参考書等を見ると、当時の新しいuGUIはこの画面サイズ問題をうまく対応してくれていることがわかりましたので、uGUIを使うこととして勉強していきました。過去の若干のプログラム経験等から、画面に何をどう表示してイベントをどう受け取る必要があるか等の基本部分はまあ理解していましたので、自分がやるべきことをuGUI上でどうやって実現するのかということを調べ始めました。

試行錯誤の結果として、だいたいのことはわりと簡単にスマホおよびタブレット上で実現できるようになりました。ユニバーサルということでしょうか。ただ画面サイズ対応の本質的な部分の理解が若干不足しているので、タブレット上での表示がいまいち適正ではない部分がありますが、現状はこれで使い倒している状況です。

uGUI制御スクリプトについて

もう完全にコードは決まりつつあります。いつも手順が悪くてプレファブを作って他アプリへの展開という観点では良くできていませんが、登場人物はテキスト、イメージ、ボタン、スティック程度ですので、これを組み合わせて作っています。

最近は階層化（親オブジェクトの下に子オブジェクトを加えるということ）を徹底的に活用しています。ひとつの大きな機能（例えば大砲射撃とか）の関連するイメージやテキストやボタンをひとつの親イメージ上に載せます。そしてその機能全体を活かすときには表示画面内にその親イメージを移動させ、使わないときには画面の外に移動させます。

最初のアプリ制作時にはいろいろ細かく制御していましたが、今は上記アプローチで簡単に創りこめるようになりました。この方式の良いのは事前に基本的な構成を考えなくて良いところです。必要な機能を必要な順に追加していくことができるのです。スクリプトで記述するコードも皆同じようになりますので、後から見ても検索機能を使いながら簡単に思い出すことができるのでまあ満足しています。

それとひとつだけ、きっと当たり前のことなのでしょうけど、オブジェクトや変数名にはuGUI関連であることを示すように変数名の先頭に区別用の先頭文字を決めています。これによりuGUIかそうでないかは良く分離されていてわかりやすくなっています。違う意味で言えば、普通行われるような変数や関数名の命名法とかは一切使っておりませんから、この対応はどうしても必要となってこうしているということになります。

uGUIで使う各種リソース（アセット）について

Unityが無い状態で画面操作プログラムを創る場合には、自分でGUI用の画像を創る必要があります。ボタンとか表示板とか。まあこれが楽しい部分でもありましたけど、結構時間がかかります。

ですが、流石のUnityにはアセットストアに様々なGUI用のアセットが存在します。自分の場合には動作が見えにくいスクリプト付のアセットはあまり使いませんので、画像素材に特化したアセットを使っています。

「戦艦決闘空間」のGUIで使っているアセットは「Fantasy Game Interface」というすてきなデザインのアセットです。下記に紹介します。（うまくリンクへ跳べない場合があるようですが、PCからだと行けました）

あまりにデザインがすばらしいので購入してしまいました。パネルやスイッチやボタンや表示器とかのイメージ素材が多数含まれています。

結果的には、自分の創っているすべてのアプリのGUIではこの素材を中心に使わせて頂いております。ゲーム内容に全然合わないのに使ったりしていて問題があるのですが、もうここからは変えられないと感じています。

現在では他にもいろいろなGUIの素材を使っていますが、最初のアプリ作成ではこのアセットのみを使いました。

戦艦操作系GUIについて

戦艦操作系GUIは一番最初に創ったGUIです。スマホ用ジョイスティックはUnity標準のcrosplatform用アセットに含まれているアセットを使っていますが、イメージ等はすべて自作です。Photoshopとかでしこしこ創ったのです。なのでなんかとても暗くて残念な感じですかね。

イメージを創り、画面に載せて、制御スクリプトを記述して、最初は主砲砲塔制御から、主砲発射、戦艦操舵と加えて行きました。

このアプリの操作系はかなり複雑で難しいとの評判ですが、まあこう創りたかったというのが実情です。

下記のアプリ紹介ビデオで画面両脇に見えるのが戦艦制御のGUIです。左側は主砲射撃制御系、右は戦艦航行制御用です。必要なすべての要素を自分ひとりで制御できるようにするために、盛りだくさんの機能となり複雑になっていますが、今考えてもこれしかないかんとは思います。ただ、このアプリは近々アップデートすることを考えていますので、その際には少し変更しようかなとは考えています。

最後に

GUIはスマホアプリ開発において重要なひとつの機能です。デザイン要素が重要になりますし、操作性が悪いアプリではユーザーの方に長く遊んでもらうことはできません。そういう意味で、アセットストアでのすてきなGUIアセットを活用して簡単に優れたGUIを構築できるUnityは本当にすばらしいです。

今後創るアプリのGUIはよりシンプルに美しくと考えてはいます。

以上