スポンサーサイト

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

StayblueメインUI作成時に注意したことと今後の課題

2013-04-28
れいあうと

Stayblueのメインメニューを作る時に気を付けたことや
作り終わってからこうしておけば良かったなぁ思ったことなどを纏めてみました。

【レイアウト関係】

■1a/1b コマンドフレーム(a)と一覧表示用フレーム(b)

 それぞれの台紙部分の色を同じグレーでも濃さを変えて、
 これとこれは違う動作をしますよ、というのがなんとなく解るようにしています。
 別の言い方をすると、aに表示される選択肢とbに表示される選択肢は違うグループです。
 というのを印象付けています。

■2 コマンド一覧

 よく使う処理を決定キー1回または上下選択を1回+決定で呼び出せるよう並べています。
 メニュー画面は頻繁に使う処理なので可能な限りキー入力操作を減らせるようにしています。

 2、3回メニューを見たら決定音とかカーソル移動音だけでカーソル位置が判断できて、
 左フレーム(1a)は見なくても操作出来るようにするのが理想です。


■3 右フレーム(1b)の上限と下限の印象付け

 処理内容によって下に解説が出たり出なかったりするので、
 いざ解説を出した時に意識がそこに向くまでにラグがあると突っかかりを感じるので、
 メニューを表示した時点であらかじめ下にもテキストが表示されそうだなと
 プレイヤーさんが予想出来るように右下に文字を入れてます。


■4 所持金とプレイ時間

 左下に何もないと絵的に地味なので入れました。
 ただ、プレイ時間はメニュー起動中も動くのであまり主張が過ぎると
 アイテム選んだりする時に集中出来なくて煩くなってしまうので、
 意識から外れやすい位置に配置しています。

 所持金も確認は出来たほうが良いけれどメニューを使っていて変動する数値ではないので、
 一回見たら後は意識から外れてしまうよう小さく隅に配置しています。


■表示する情報としない情報の選択

 一番解りやすいのがステータス画面が無いことです。
 Stayblueは普通の学校が舞台で特殊能力者がバトルしたりするわけでもないので
 装備の概念がありません。
 ステータスの変動はレベルアップかゲームオーバー時の補正でしかしないので、
 あえて確認する意味が薄いためバッサリ削りました。

 配置等もメニューをいじっていて変動するもの以外は意図的に視界の外に行くよう、
 ちょっとだけ外側に置くような配置にしています。

 HPとSPだけのCONDITION部分はちょっと文字が小さいかなとも思うのですが、
 減ってるか減ってないかだけ確認出来れば十分だと思うのであれでOKにしました。


■フォントの使い方で注意したこと
 
 読んで判断しなくてはいけないものだけ可読性の高い止め跳ねの強弱があるフォントを、
 それ以外のものは可視性の高いゴシック系(線の太さが均一なフォント)を使っています。
 画像だとアイテム一覧とアイテムの説明だけ可読性重視フォントです。

 右上の行動力とかも同じフォントなんですが、あれメニューじゃなくて別処理なんです。
 先に作っちゃったので後から修正するのも大変で、
 位置的に見ようと思わなければ意識向く場所でも無いのでそのままになっています。


【デザイン関係】

■デザインのとっかかり

 ゲームの雰囲気に合わせれば良いのは解るけどもうちょっと具体的にお願いします。
 そんな状態の時は主人公をイメージすると切り口を掴みやすい気がします。
 今回は現代もの、学生ものなので文房具的な雰囲気、テーマカラーが青なので青系、
 それでも迷ったので主人公が使っていそうなノートの雰囲気……くらいまで詰めてみました。

 しかしStayblue主人公はどう考えてもキャンパスノートとかを安い時に買いだめて
 ほとんど使わないまま風化させるタイプだったので、
 それだけではどうしようもなくてコクヨのホームページを舐め回すように見て参考にしました。

 とっかかりはこうしたい、っていうイメージを具体的にするための
 資料を集めるきっかけくらいにしかなりませんでしたが、
 あると無いとだと結構違う気がします。


【今後の課題】

■一つデザインを決めるとそれに固執してしまって幅が無くなる

 戦闘とそれ以外は全く雰囲気が違うので差別化出来たのですが、
 それ以外がちょっと似たりよったりすぎて退屈になってしまったので、
 統一感は持たせつつ変化が楽しいデザインをしたい。
 これは色んなデザインを注意深く観察して情報を溜めこんでいくしかないので
 地道に勉強します。

■動きが少なく基本システムに依存しがち
 
 ディレイとかエフェクトとか正直使い方が全然わからないうえに
 複雑な処理してる基本システムに捻じ込むとか現時点では無理です。
 動的な要素がある部分は全部基本システムさんのおかげです。
 自分で動きつけたのは一ヶ所くらいです。

 操作してて楽しいのは何もアクション的なゲームにだけ必要なわけではなく、
 その画面、デザインに相応しいレスポンスはゲームへの没入感を深めてくれる
 大事な要素だと思うので、この辺りもっと追究していきたいです。

 しかしすぐに出来る気はしないので地道に勉強します。

***

まだまだ課題は山ほどあるし、
理解が足りなくて意識すら出来ていない問題点とかもきっとあると思うのですが、
丁寧にゲームを作って一段づつステップアップしていきたいところです。

自分の為の備忘録なのでちょっと不親切な書き方かもしれませんが、
とっかかりが掴めなくて迷ってる方の参考に……なればいいなぁ。
スポンサーサイト
ゲーム制作の為の備忘録

StayblueメインUI作成時にお借りしたコモンとテクスチャ素材のご紹介。

2013-04-28
ScreenShot_2013_0428_12_02_16.png

ScreenShot_2013_0428_10_34_38.png


【お借りしたコモン】

(1) お手軽ゲージ管理コモン っK様
 ここではデフォで指定可能なゲージを使っていますが、
 ゲージに画像を指定出来るので使いこなせればもっと綺麗な画面に出来るはずです。

(2) 画像選択肢コモン たては様
 下地に透明のダミー画像を用意して選択肢とカーソルだけ表示しています。
 縦にも横にも選択肢を増やせて色々なシーンで使えてすごく便利です。

制作記録でも以前ちらりとご紹介しましたが
この二つは汎用性が高くて使いやすいオススメコモンです。
この二つが無かったらたぶんゲーム制作投げてましたってくらい
よくわからない処理を簡単にしてくれています。

この他たては様の変数リファレンスにも
変数わからなくなった時等にすごくお世話になってます。

どれもウディタ公式サイトのコモンイベント集からDLできます。


【お借りした素材】

■1、2 LOST&TAKEN(英語サイト) http://lostandtaken.com/

 1:背景のベースになっている紙質感テクスチャ。
   カテゴリやテキストエリアはグレーでべた塗りしたものの透明度をいじっただけで、
   テクスチャはかけていません。全体のキーになった素材です。

 2:付箋紙っぽさを出すために
   1とは別のテクスチャを乗算で、単色ベタ塗りした素材に載せています。


■3、4、5 パターン素材 bambooo様 (pixiv)

 3、4:ノートのような格子やラインの素材を調整して用紙テクスチャを重ね紙っぽくしました。
   4の下に隠れている素材は回転縮小してるうちに淵が紙っぽくなった偶然の産物です。

 5:透過で透けた黒いスクリーンラインを隠すのと、
   購買担当キャラのイメージに合わせて他のUIより少し華やかさが欲しかったので
   ここに柄モノパターンをお借りしました。
   メインUIで柄ものを使っているのは多分ここだけです。


■6 背景 ぐったりにゃんこ様 http://guttari8.sakura.ne.jp/

 複製した画像をカットアウト処理を使ってエッジを飛ばし、
 飛ばした画像をさらにぼかして写真でいうピンぼけ状態にして、
 それを元々の画像に別レイヤー通常載せて透明度をなんとなくバーを動かして、
 なんとなくこのくらいかなぁ……というぼかし加減になるように調整しました。

 ぼかしだけ、カットアウトだけだと意識が背景にいきすぎてしまうので
 合わせて使っています。
 写真を背景に使う場合でも有効な処理だと思います。

 この画像では更に黒を別レイヤー通常で乗せて透明度をいじって背景を暗くしています。


■7 クリップ画像 白露様 (pixiv)
 
 クリップの重なった写真素材から一番ハッキリしたものだけ抜き出して、
 エッジを強くして色も青系にしました。しかしほとんど原形が残らなくて申し訳ないです。


***


デザイン初心者がなんとかメニュー画面を形に出来たのは、
改造しやすく作ってあるウディタの基本システムや汎用性の高いコモン、
イメージを湧かせてくれる素敵素材のおかげです。

素晴らしいコモンや素材を公開してくださっている作者様に頭があがりません、
本当にありがとうございます。
ゲーム制作の為の備忘録
 | ホーム | 

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