アドベントカレンダー9日目の記事になります。
このブログでは普段アンリアルエンジンでのUI制作に関することを書いています。
今回は久しぶりにエンジンは起動しないで、ゲームUIのネタとして、体力ゲージ的なやつを取り上げてみようと思います。
体力ゲージ的 という曖昧な言い回しになるのは、役割が同じでも見た目が違うものも含めてしまえという、ちょっと欲張ったネタにしようと思い立ったからです。
ちょっとだけ昔の話を
さてさて、ビデオゲームが世に生まれてから、何かしらのゲージを見ないゲームはないんじゃないかと思えるくらい、当たり前のようにみかけます。ゲージの無いゲームを探す方が難しい気がします。いろんなゲージがある中でも、体力ゲージとかHPゲージ、LIFEゲージといった、ゲームの世界に生きているキャラクターが行動不能になるまでを視覚化した表現は、ゲージがなくなること＝ゲームオーバーやミッション失敗などプレイのやり直しを求められることが多く、ゲージが残りわずかになると、プレイ継続不可能な状況が迫っていることを否応なしにプレイヤーに突きつけてきて、緊張感を煽る存在でもあります。黎明期のアーケードゲームは１発でも当たったら死ぬという厳しさで、その無慈悲さを緩和するために残機が増えたり、シールドゲージがついたりしました。
パーティや部隊を組んでプレイするゲームは、ゲージが無くなっても他のメンバーが生きていたら続行不能にはならなかったりしますが、どちらにせよゲームのメカニズムにおいてかなり重要な要素として位置付けられていることは間違いないと思います。
一方で、プレイヤーが倒さなければいけない敵などに紐づく体力ゲージは、効率のいいプレイを探るモチベーションにもなったりします。
ただ長さが変わるだけの表示に、一喜一憂し、乾坤一擲の勝負に出、背水の陣で冷や汗を流し、盛者必衰を悟る体力ゲージ。
古今東西いろんなゲームでゲージに翻弄されるささやかな人間ドラマが繰り広げられている事実を知り、またそれを意図的にデザインしてほくそ笑むことができれば、生粋のUIデザイナーだと胸を張っていいんじゃないかと思います。
ゲームのUIデザインは ゲージに始まりゲージに終わる
この業界に長く身を置く者として、作ってきたゲージ類は数え切れません。今までたくさんゲージを作ってきた経験則を元に、ゲージをデザインする際に考慮すべきポイントを書き連ねてみました。ゲージのカタチを考える時や、企画の仕様に抜けが無いかの確認等に役立てられればと思います。
ちょっと小難しく親父語りを始めてしまいましたが、そろそろ今回のネタに移ろうと思います。ここからは画像が増えますよ。
そもそも体力ゲージ的なやつって？
体力ゲージと言ってしまうと、棒グラフ状のゲージに限定されてしまう恐れがあるので、あえてぼかした言い回しにしてみました。ゲーム内のポジションが同じなら体力ゲージでいいじゃん、というのもちょっと乱暴な気がして、これ！、というコトバが見当たらないのですが、面倒くさいのでとりあえず「体力ゲージ」と呼ぶことにします。
体力ゲージの見た目はさまざまですが、大きく分類すると３タイプに分けられます。
中でも棒ゲージタイプは、カーブしていたり、太さが均等じゃなかったりと、いろんな派生形がありますが、基本的には長さが 可変か固定か の２系統に分かれます。
３タイプそれぞれに向き不向きがあります。
棒ゲージタイプ
最大値に対して今どのくらい、というのがわかるというのが最大の長所。
可変する量が無段階なので、アナログ的な補正や調整がしやすい。
情報量に対し表現に必要な面積が少なく済み、長さを表現できるなら、シンプルな形状から複雑なものまでデザインの幅は広くとても汎用的で扱いやすい。
長さが固定の場合は成長して最大値が増えても比率でしか表現できないので、成長している実感は得られにくい。また、最大値がゲージのドット数より多い時、残りわずかな状態で、見た目に消えてしまうことがあるので注意が必要。
数値タイプ
ズバリの数値が表れているので、具体的な値での増減が分かりやすいのが長所。
その反面、直截すぎて桁数の表現が心理的にどう作用するかが個人差があって読みにくいのが難点。
ウソが付けないぶん後から補正やら調整が入れにくい。
最大値を常に表示するために、分数表記が採用されることも多い。
文字による表現は、脳内で変換が必要になるので、棒ゲージに比べて直観的ではないため、リアルタイム系のアクションゲームでは避けた方が無難。
また、シリーズを重ねるタイトルの場合、仕様の拡張によるインフレの懸念もある。
アイコンゲージタイプ
定量的に増減できるので、ダメージ量や回復量について説明するのが簡単なのが長所。
アイコンのデザインによるところが大きく、あまり大きくできないため、細やかな増減を表現するには不向き。数が増えてくると見た目にうるさくなりがち。
体力が減った場合、仕様的に最大個数を保持するかしないかで遊び方が変わる。保持する場合は、増えること＝成長 で安心感が得られ、保持しない場合は、増えること＝保険、という扱いになり、補充できないと辛くなる。
増減の方向として、リニアに変化するタイプや角度で変化するタイプなどがある。
もちろん不得意な部分を補う形で３タイプを混ぜて使う、いわゆる合わせ技という表現もあります。
ゲージで全体の割合を、数字で今の値を示したり、ゲージのカタチが分かりにくい代わりに数字で割合を示したりというのがあります。
デザインする
体力ゲージをデザインに落とし込むときにあれこれ考えながらベストなカタチを模索するのですが、ゲームのメカニクスを顧みず、見た目だけでデザインすると、後で不幸に見舞われるかもしれません。遊ばせ方を事前にすり合わせておくとそれほど迷わずに済みますし、ゲージの比重が明確だとレイアウトを考えるとき少しはラクになれます。
まずはいろんな仕様に対するゲージのふるまいや普段私自身が気を付けていることを挙げていくので、参考になれば。
成長要素があり、最大量が増える？
長くする。可変できる仕組みが必要
桁を増やす
アイコンの数を増やす
成長要素等で伸びていくタイプ。レイアウトに余裕があればそれほど問題はない。
ただ、余白の取り方で最大の長さを予測される恐れがあるので、ゲーム進行を気取られないようにしたいなら伸びしろの扱いに注意。
表示領域に制限があるけど増やしたい
色で本数を表現する。細かく増やせないし気づきにくい
カラフルになりがち。後述のバフ表現等と衝突する可能性
数字を小さくしたり、少し重ねたりすれば可能だけど
サイズ違いのアイコンを用意して x5とか x10 を表現
かなり無理してる感がある。どうしても後から仕様を付け足した感が出るので、成長するかどうかの『握り』＝仕様確認は大事。「なんとかならない？」と言われた場合は、合わせ技である程度解決できる。レイアウトを確定させるためにも早い段階で詰めておきたい。
割合が分かればいい
問題ない。リング（環状）にするのもいい
パーセント表記にする
向いていない
最大値が大きくなると変化量が小さくなるので、ゼロ付近が視認しづらくなる。ゼロになってもゲームオーバーにならないゲームでは有効。
表示面積が小さくできるので助かる。
満タン時の違いは必要？
色相を大きく変えなければ色替えがベスト
難しい
効果が薄い
格闘ゲームのパーフェクト K.O. や、満タン時のみダメージ軽減など、発動に特別な条件がある場合は、違いをある程度分かりやすくする必要がある。
どんな減らせ方がいい？
できるだけアニメーションさせたい
カウントダウン。アニメーションの時間に注意
できるだけアニメーションさせたい
一気に減らしてしまうと、変化に気づきにくいので、できるだけアニメーションさせたい。その方がヤバイ感というか緊張感が伝わりやすい。ダメージのタイプによっ演出をいれると豪華になるうえに、原因が分かって納得度を上げることができる。たとえば物理ダメージの場合は振動させたり、魔法ダメージだとそれぞれのエレメントに合わせたエフェクトを乗せてみるとか。
減った量を判らせたい？
ゲージを２重にしてアニメーションさせる
カウントダウンとマイナス分の表示を追加する
アイコンのカタチに依存するので難しい
ダメージを受けた瞬間にダメージ量を判りたいというのが、普通になってきているので、実装不可避な印象もあるけど、棒ゲージ以外は得意じゃないので、ゲージの近くか別の場所で減量分を表示するのがベター。
重要なのは、ダメージを受けた時、ユーザーはどこを見ているか？ という点に気を付けることです。そのあと、ゲージに視線誘導させるか否かで、演出やアニメーションのタイミングを調整します。
状態異常などバフ表示が必要？
ゲージの色を大きく変えたり、エフェクトを乗せたり
色替え程度しかできない
アイコンの色を変える。可能であればカタチも変える
まずは、わかりやすく色を変えてみる。棒ゲージはそこそこ面積があるので、UVスクロール系のアニメーションをオーバレイしたりすると効果大。ステータスを表すアイコンを添えるなど、ゲージの表現以外の要素も含めたり、他の条件と被らないかなど、情報設計のコストは割と高め。
色替えでわかりにくければ、動きを付けると目立たせることができる。
残り少なくなったらどうなる？
ゲージ本体または、ゲージの背景を点滅して強調
数字を色替え点滅
アイコンの色または、枠を点滅して強調
面積が小さくなった状態で点滅させても目立たない場合は、枠や下敷きを点滅させる。点滅のカラーはゲージカラーとも相談して慎重に選ぶ。赤色の点滅が一番心理的に響くけど、プロジェクトのカラースキームによっては、赤を使いたくないデザインもある。
あとちょっとという状態が重要なのに見づらいという場合は、ゲージのサイズを見直そう。
ピンチ表現を作り始めてようやくいろんな制約や問題に気付くこともある。点滅させたくない場合もあったりするので、どうすればピンチを伝えられるかのアイデアは日ごろから色んなゲームをプレイしてストックしておきたい。
回復表現はある？
アニメーションさせる
カウントアップさせる
アニメーションさせる
回復は嬉しいもの。多少動きがあると嬉しさもアップ。動きを考えるときに、嬉しい表現と残念な表現についても分かりやすく区別できるよう意識して設計する。例えば赤点滅＝ネガティブ表現、白点滅＝ポジティブ表現 というのを決め、それを徹底するようにするだけで、パラメータ―やステータス表現でもプレイヤーの学習コストを下げる効果が期待できる。
だいたいこんなところでしょうか。
体力ゲージは、とにかく減らされることがプレイヤーにとっては最大の不利益となります。 したがって減ることの理由を、納得いくように表現して差し上げるのが、UIデザイナーの使命でもあります。情報量を増やし過ぎると初見で拒否られるし、少なすぎると謎感が上がって不親切な印象を与えてしまいます。UIデザインって匙加減がとても難しいのです。
気をつけたいカタチ
体力ゲージは、ゼロになるとペナルティがある以上、残りわずかであること、つまりピンチであることを表現することが重要になります。
あとどのくらい？ いまどれだけ減った？ というのも大事なので、一方の太さが変わるようなゲージデザインは常時確認したくなる体力ゲージでは避けるべきです。
物理的にピクセルが少なくなるので残り僅かであることを視認しづらい。
反面これをチャージ系のゲージだとして考えると、ある程度溜まりきるまでは意識しない状態にできるし、溜まりきった時に最大面積になってようやく満タンになったよ！スキル使っていいよ！というアナウンスができます。
ONとOFFがハッキリしていて、あとちょっとで溜まりそう、という体力ゲージとはまったく逆の期待感を煽ることができるカタチです。まさにチャージ系のゲージに向いているといえます。
とここまで書いておきながら、体力がゼロになっておしまい、とは逆の、ダメージが最大になったら戦闘不能、という詭弁のような発想で、このデザインでも緊張感を煽ることは可能です。SUN値やピヨリなどのスタン系ゲージでも使うことができます。
ザックリとですが言ってしまうと、大事な局面で必要な情報がしっかり視認できればなんでもアリです。まぁゲームUI全般に言えることでもありますが。
全体のカタチとゲージの増減のカタチが合ってないのも時々見かけます。
棒ゲージの作り方いろいろ
カタチがシンプルで構成するパーツも少なくて済みます。いろいろアレンジもしやすく、周囲をデコレーションで差別化できれば大体完成できるということで、扱いやすいのも魅力。
用意するパーツは最低限２つあれば十分。ゲージ本体と、最大量が分かるための下敷きか枠。デザインは皆さんの素晴らしいセンスを発揮してもらえればバッチリなので、ここではゲージの増減についてちょっと技術的なところを書いていきます。
ゲージの増減方法は大きく分けて３つほどに分けられます。
簡単でコスパがいいのがスケーリングする方法。
ゲージにグラデーションや模様などを入れていると、拡縮した際残念な見た目になるのでシンプルなベタ色か、スケールに影響されない方向にグラデーションを入れるのが無難。
と、思わせておいて、実は発想を変えると可能です。つまり見た目の下敷きを上から被せる方法。下図は重なりを斜めから見たイメージ。
２つめはステンシル等のアルファマスクや、シェーダーを使って画面の表示ピクセルを削っていく方法。これだと、下敷きを上に載せるというトンチを使わずに、ゲージにグラデーションや模様をいれることができます。
シェーダーを使いこなせると面白い表現が可能なので積極的に使っていきたいですね。
３つめはUVスクロール。これはゲージの先端部分がカーブしていたり、斜めになっている場合に効果的。テクスチャのオフセットを動かして増減させます。3Dメッシュを使えば、複雑な形状でも、ゲージにすることができます。下の例はちょっと贅沢に下敷きを別に用意している場合。
アルファチャンネルを使わないで作ることも可能で、デザインにもよるけど、下敷きが不要でパーツが減る分処理が少なくできる。無双系やタワーディフェンス系のゲームで大量にゲージを出す場合は特に効果的。
ただの長方形だと安っぽいので、斜めにしたりすることが多い体力ゲージ。頂点を変形して斜めを作ると、UI描画の際アンチエイリアスが掛からないことが多いので、ピクセルの荒れを回避するなら頂点は長方形のままでUVスクロールがオススメ。
UVスクロールで動かす場合、テクスチャにゲージの長さの２倍の領域を確保しないといけないけど、テクスチャの設定をWrap（繰り返し）ではなくClamp（繰り返さない）設定にすると小さいテクスチャでもいい感じにできる。
おまけとしてシェーダーを使ったテクニックをひとつご紹介。
アルファチャンネルのUVを動かさずに、RGBチャンネルのUVのみをスクロールさせます。絵に合わせてスクロール量を調整すれば完成。表示パーツはたった１枚で済むのでエコです。テクスチャのやりくりができれば、きっとプログラマにも喜ばれるはず。
かつては・・・
大きなスプライト描画やポリゴンが登場するまでは、今のような自由なサイズのキャラを表示する仕組みがなかったり、解像度が低く拡縮でキレイに表示できなかったので、8ｘ8とか 16ｘ16とかのチップを並べてゲージを作っていました。ゲージは１ドットずつ変化します。これをプログラムで書き換えていくのです。
格闘ゲームなんかは１ピクセルがきちんと表示されていないとだめなので、丁寧に細かくパターンを用意していました。
開発にまつわる体力ゲージ
ゲームグラフィックの表現力が上がってより繊細になるにつれてゲージのようなゲームゲームした表現を忌み嫌う向きもそれなりに増えてきているように感じますが、いつ死ぬか分からない緊張感はストレスにもなりえます。そのストレスから解放してくれるのがゲージだったりするわけで、このあたりのジレンマを解決しておかないと開発終盤にニッチモサッチモという事態に至ることがよくあります。
「没入感」というキーワードを盾にしてUI要らないとか言い出すプロジェクトは、モーション（キャラクターアニメーション）やVFXの作成コストに跳ね返ることを考慮していないことが多く、最終的に作成コストが比較的安いと思われているUIに「やっぱり・・・」という事態に。
没入感と一緒に語られるダイエジェティックなUI表現も、アートディレクターがUIデザイナーを兼任しているプロジェクトでもない限り、UIデザイン側から発信するのはとても難しいと思います。
UIデザイナーがプロジェクトにアサインされる前にすでに検証やプロトタイプが進行していることはフツーです。プログラマがちょいちょいと作った簡素なゲージが表示されていることが多くて、開発中は見やすいし分かりやすいと当たり前のように鎮座しているのですが、どこかのタイミングで製品クオリティのデザインにしないといけません。ですが、シンプルイズベスト！ 下手にデザインしたものに差し替えようものなら、分かりにくいとクレームが来ることもたまにありますし、ずーとそれでデバッグしてきたから生半可なデザイン差し替えでは納得されないし、じゃぁ、と手を入れなさすぎるとデザインをサボってるかのような目で見られたりします。
「これ、そのうちデザイン変わるんだよね？」
「え！？ えぇ、も、もちろんです」（遠い目）
マジで棒ゲージ最強です。これ以上分かりやすい見た目はないです。実際に作るのにほぼコストはかかりません。誰でも簡単に思いつくしものすごく手間がかかっていない仕事として見られています。仕様を色んな角度から眺めて検討し、あーでもないこーでもないと悩みぬいた挙句の棒ゲージ。他の可能性やロジックをシェイプアップして作った究極の一本！それでも、
「これって、仮キャラ？」
「え！？ まぁ、今デザイン考えてるとこなんすよね～」（さらに遠い目）
やっぱり体力とかライフといえばハートだよね。形も可愛いし。ハートを並べるのは分かりやすくてワールドで受けが良さそう！
「なんか、ゼルダっぽすぎない？」
「！・・・そうっすね。」（心も遠くへ）
数字は桁が増えた時のインパクトは捨て難いよね。ちょっと生生しいけど、オシャレなフォントを使えば・・・ほら、いいカンジ！
「今回の仕様だと３桁ぐらいまでしか使わないんだけど」
「じゃぁ、後ろにゼロ３つくらい付けましょうよ」（汗）
「いや さすがにバレるだろ」
「・・・」（温泉行きたいな）
最後に
一度でもゲージ類を作ったことがあれば、ゲージのパッと見簡単そうに見えて実はとても奥が深くて、いろいろ考えさせられるということを体験されていると思います。
ゲージを笑う者はゲージに泣く
いつか言ってやりたいのですが、ゲージを作るのはUIデザイナーの仕事。十分思い知ってるからこその任せてもらってるんだと思いますが、ゲージを笑うやつは、たぶんゲージを作ることはないんだろうなと。残念ながら。シンプル過ぎてアレンジしにくいのをなかなか判ってもらえないですが、頑張って新たな地平を見つけたいと日々チャレンジし続けたいと思います。
ゲージに泣く者は、さらにゲージに泣く
全然救われない格言でシめようと思いますが、いいゲージができた暁には、アドカレに記事を書こうと思います。ゲージについて語り合ったりお題を解決するゲージデザインOnlyのイベントとかあっても面白そうな気がします。ちなみにすごいのができれば発明になるので、特許を申請できますよ。
え？この記事のゲージがダサい？
もちろん仮ですよ。サンプルですよ。お試しですよ。本気出してないだけ。あはは・・・・は。
ではでは
ハッピークリスマス！
ステキなゲージライフを！
※今回の記事に載せているアニメーションGIFは、すべてPhotoshopのフレームアニメーションで作成しました
２つのイベントにつないだら
