ゾンビとUnity

ゾンビネタとUnityでのゲーム制作について綴るブログです。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Unity ゲーム製作 16 GUIのデザイン

キャラを先にやろうと思ったんですが、かなり長くなりそうなので、先にGUIについて決めたいと思います。
詳細を決めるには、先にゲームの仕様を作らなきゃいけないので、ここで決めるのは基本的な部分だけです。

とりあえず、そもそもGUIって何よ?という話をちょっとだけ。

GUI=Graphical User Interface(グラフィカルユーザーインターフェース)

ウィンドウとかHUD(ヘッドアップディスプレイ)とか、グラフィックを表示していろいろ操作したり、しなかったりするインターフェースのこと。
今ではパソコンを使っててもゲームをやっててもGUIしかないので、それがGUIと呼ばれるインターフェースだということを意識する必要がないです。当たり前すぎて気づきません。

昔のパソコンはCUIというインターフェースを使っていました。
いわゆるコマンドプロンプトやDOS窓と呼ばれている、文字を打ってファイルをコピーしたり、プログラムを起動する方式。
ゲーム開発でも普通にコマンドラインツールを使うので、CUIに慣れておいて損はありません。

Unityにも、Unityエディタを開かずにプロジェクトをビルドできるCUIの機能があります(他にも色々できる)。
Unityマニュアル - コマンドライン引数
http://docs.unity3d.com/ja/current/Manual/CommandLineArguments.html

話がれた。


GUIデザインのサンプル

参考のために他のゲームのGUIデザインがどうなっているかを見てみる。

Ragnarok Online

ここでも取り上げたのは、オンラインゲームでは珍しく、GUIのスキンを自由に作成できる機能を持っているから。
他にもある(あった)かも知れませんが、私は他に知りません。

自分で作ったオリジナルのスキンは自由に配布することができるので、ユーザーが沢山のオリジナルスキンを作成し、配布している。
そのスキンをダウンロードして所定のフォルダにコピーすれば、ゲームで使用可能。
画像を差し替えるだけなので、ボタンやアイコンの配置位置・サイズは変更できない。

ro_skin 01 デフォルトのスキン
ro_skin 02 スキンを変更

※公式サーバーではプレイしていないため、このスクリーンショットを撮るためにエミュレーターサーバーに接続しています。

MapleStory

このゲームのGUIの良いところは、右クリックを使わない左クリックだけで完結するシンプル操作、ドラッグ&ドロップの挙動(アイコンをクリックするとドラッグ状態になり、もう一度クリックするとその場でドロップ。ずっとマウスボタンを押しっぱなしにしなくて良い)。
悪いところは、ウィンドウを閉じる×ボタンが小さくて押しにくいところ。パッド操作の不便さ。

ウィンドウはショートカットキーでも閉じられるのですが、マウスでアイコンをいじったり、スクロールバーをドラッグしたり、ボタンを押したりした後にウィンドウを閉じようと思ったら、そのままマウスカーソルを×ボタンまで移動させて閉じたいものです。

ショートカットキーの位置に指が置いてあれば、ショートカットキーを押してすぐに閉じられるので良いですが、いつもそうなっているとは限らず、また、ショートカットキーに対応していないウィンドウもあります。

私はゲームパッドで操作しているのですが、ゲームパッドなので両手を使います。
メイプルストーリーのゲームパッド操作はウィンドウの操作には対応していないため、ウィンドウを操作する必要が出たら右手をゲームパッドから離してマウスに持ち替えてウィンドウの操作をする形になります(左手はゲームパッドを持ったまま)。
そうなると、キーボードに指を置いていることはまずないので、ショートカットキーを押して素早くウィンドウを閉じるということができません。
ウィンドウを操作するたびに、マウスに持ち替える必要があります。

ユーザーインターフェースをデザインするときに配慮すべきなのは、このちょっとの手間なんです。
オンラインゲームのユーザーは何百時間、何千時間と、このインターフェースに付き合わなければいけません。
ちょっとの手間が積もり積もって大きなストレスになります。

そういった点を実際にいじって確認してみるには、良いサンプルだと思います。

ms_gui 01

チョコットランド

ハンゲームでサービス中のお手軽RPG。
このゲームのGUIも、ワンボタンで完結するシンプル操作。
親切だと思ったのは、ウィンドウを閉じるボタンが2箇所にあること(全てのウィンドウに対応しているわけではない)。

choco 01 キャラ作成画面

choco 02 複数のウィンドウを開いたところ

choco 03 会話ウィンドウ

Phantasy Star Online 2

SEGAのMMOアクションRPG。
プラットフォームは、PC(Windows)、PS4、PSVita、iOS、Androidに対応。
スマホは別のゲームとしてデザインされているので、このGUIが使えるのはPCとコンソール。
インベントリ内のアイテムを使ったり、捨てたりなど、全てキー操作可能。
キーボードでもGUIを操作できるオンラインゲームは、ありそうで、あまりない。
ゲームパッドでプレイする場合にも、このキーボード操作が役に立つ。
コンソールでの操作も念頭にいれてデザインされたんだと思う。
PSO2と比較すると、MapleStoryのパッド操作がいかに酷いかが良く分かる。
MapleStoryは、GUIをいじろうとするたびにゲームパッドから手を離して、キーボードとマウスに持ち替えなければいけない。
PSO2はマウスもワンボタンで操作でき、非常によく考えられた設計だと思う(使いやすいとは言ってない)。

pso2 01
強制的に割り込む会話にイラっとさせられる。
割り込み会話は会話を終えるまで何もできない。

pso2 02
インベントリウィンドウ。
マウスでも操作できるし、キーボードだけでも操作可能。

pso2 03 NPCとの会話



GUIデザインについて考えること

・ウィンドウは移動可能か?
・基本デザイン
・今の時点で必要だと分かっているウィンドウ




ウィンドウは移動可能か?

FPSとかコンソール(コンシューマー)ゲームだと固定の方が良いけど、マウスカーソルを使うゲームにするので、ウィンドウは移動できるようにする。

もし、スマホにも移植するようなことになった場合は固定にすると思う。
ゲームパッドのアナログスティックを使ってウィンドウをドラッグするのは億劫だけど、スマホでウィンドウをドラッグするのは簡単。
でも、スマホはいくら解像度がフルHDになっても物理的な画面は小さい。
人間の指はそんなにサイズは変らないので、必然的にタップしやすいサイズは限定される。
そうなると、タップするアイコンの大きさも決まってしまうし、そのアイコンなんかを並べて表示するウィンドウも大きくする必要が出てくる。
画面いっぱいにウィンドウを表示して、アイコンやボタンも大きくして、タップしやすいように作ることになると思う。



基本デザイン

スキンは、だいたいこんな感じ

unity gui 02 ふつう

unity gui 01 8ビット風

今の時点ではどっちにするか分からないのと、ゲーム画面に表示してみて違和感があるようなら、別のスキンを作るかも知れない。

ゾンビの絵はこちらから拝借
Material World
http://members.jcom.home.ne.jp/hide.mats/


設計方針は以下の3つ。

●シンプルイズザベスト。
●自由にカスタマイズ。
●可能な限りアナログ表示。




●シンプルイズザベスト。

パっと見て分かる。
アイコンやゲージで画面をゴチャゴチャさせない。

サイレントヒルシリーズ(4とBOMを除く)くらいがいい。



●自由にカスタマイズ。

ユーザーインターフェースは、100人いれば100通りの好みがあるので、ユーザー自身に納得がいくまでカスタマイズしてもらうのが一番良い。
とは言っても、大半の人はめんどくさがってやらないので、必須な機能じゃない。
GUIを作るときに捗りそうだから、自分が作りやすいように、この仕組みを用意できたらいい。

C#スクリプトで使える .Net Framework は json や XML のパーサーを標準搭載してるけど、どちらも無駄な文法というか表記が多くて、大量にデータを作るときに、このちょっとの手間が面倒になる。
沢山の機能が詰め込まれた複雑なウィンドウになってくると、配置するパーツも増え、必然的にデータ量が増える。
テキストで書かれたデータをテキストエディタなんかで開いて、上からだーっと読んで、何が書いてあるのか?を読み解くのに時間がかかってしまう。
なので、ゲーム中に表示されるウィンドウと同じグラフィカルなウィンドウを表示して、そこにパーツを置いたりなんかして、グラフィカルに編集できるエディタを別途作る必要が出てくる。
このエディタを作るのもめんどくさいし、かと言って、膨大なテキストデータを読み解くのもめんどくさい。
そうなると、1つあたりのウィンドウに書くデータ量が少なくて済む独自のファイル形式を作って、そのパーサーを作ることになりそう。

オプションウィンドウ {
 width=25%, height=25%,
 下地 { x=0, y=0, z=0, width=100%, height=100%, file=option_back.png, type=image }
 タイトルバー { x=10, y=5, z=1, width=90%, height=10%, file=option_title_bar.png, type=titlebar }
 閉じるボタン { ・・・type=button, help=閉じる }
 ディスプレイ { ...}
 オーディオ { ...}
 コントロール { ...}
 その他 { ...}
}

こんな感じ。

XMLで書くとこう。

<オプションウィンドウ width="25%" height="25%">
<下地 x="0" y="0" z="0" width="100%" height="100%" file="option_back.png" type="image"/>
<タイトルバー x="10" y="5" z="1" width="90%" height="10%" file="option_title_bar.png" type="titlebar"/>
<閉じるボタン ・・・ type="button" help="閉じる"/>
<ディスプレイ ・・・/>
<オーディオ ・・・/>
<コントロール ・・・/>
<その他 ・・・/>
</オプションウィンドウ>
うあー、めんどくさい!

画面の解像度は固定にはしないので、全てのパーツのサイズ(Width,Height)は、画面の解像度に対する比率で指定することになる。
画面の解像度が変ってもパーツのサイズは変えないという設計もできるが、その場合、最小の解像度に合わせて作らなければいけなくなる。
そうなると、画面の解像度が大きくなったときに、パーツが小さくて見づらい上に、操作しづらくなる。
それを良しとするゲームもあると思うが、このゲームでは、ウィンドウとパーツが見やすいこと、操作しやすいことを優先する



●可能な限りアナログ表示。

私はRPが好きな人なので、体力が数値で表示されたりすると

「この数値は誰がどうやって計測したの?ス●ウター持ってる設定なの?」

と思ってしまう。
Falloutみたいに、体の状態をデジタル表示できる機械を身につけているとか、主人公が機械ニンジャとか、そういう設定だったらRPも成立するので問題なし。

また自分に限らず、敵の体力やバフが表示されたりすると、その表示ばっかり見るようになる、あるいは、敵本体ではなく敵の頭上なんかについているバフのアイコンをチラチラとチェックすることになる。
だったら、敵の残り体力に応じて敵の顔色が変ったり、体に傷やアザができたり、装備がボロボロになったりする演出を入れる方がまだいい。

最近はそういうゲーム(特にRPG)がないので、余計にやりたい。

ウィンドウを何も表示していない状態ではHUD類(数値、ゲージ、アイコンなどのデジタル情報)の表示はしない。
ウィンドウ上では、数値はできるだけ表示しない(ゲージで判別できるならそうする)。ゲージ、アイコンはOK。




今の時点で必要だと分かっているウィンドウ

  • インベントリ(所持品)
  • 使える魔法
  • 所有しているゾンビの情報
  • 装備
  • 自キャラの情報
  • ショップ
  • 会話
  • タスク管理(クエスト)
  • オプション

インベントリウィンドウがちょっと特殊なデザインになる予定なので、プロトタイプを作っておきたい。
どうやって作ったかーなど、次の記事でまとめる形になると思う。
 
スポンサーサイト

- 0 Comments

Add your comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。