HUD

画面に重ねて出す表示

遊んでいるあいだ、プレイヤーは体力や弾数を何度も確かめる。メニューを開かないと見られない作りでは、確かめるたびに遊びが止まる。そこで、ゲームの画面に重ねて、遊びながら読める表示を出す。この表示を HUD と呼ぶ¹。体力、弾数、所持金、地図、目標、残り時間などを載せる。

載せる情報の選び方

HUD に載せるのは、遊んでいる最中に確かめて次の行動を決めるのに使う情報である。見分けるには、その値を見て次にすることが変わるかを考える。体力が少なければ下がって回復し、弾が少なければ撃つのを控えて込め直す。こうした情報は戦っている最中にも読めるよう HUD に載せる。一方、店でしか使わない所持金は、店に着くまで次にすることを変えない。こうした情報は変化したときだけ出すか、メニューで見せる。

載せる項目が増えるほど、目当ての項目を見つけるのに時間がかかり、画面の多くが覆われる。どの項目を大きく目に入りやすい位置に置くかは、「情報の優先度」で決める。

置く場所と画面の端からの余白

HUD は画面の四隅に置く。カメラがキャラクターを画面の中ほどに映すゲームでは、プレイヤーはその辺りを見て遊ぶので、隅に置けば遊びの邪魔になりにくい。ただし、隅にも世界は映っている。デモでは右上の所持金と右下の弾数の板にコインが半分ほど隠れ、左下の地図の板に柱の下のほうが隠れている。常に出す上の段では、これらがいつも見えにくい。

テレビは機種によって画面の端が欠けて映る。スマートフォンは角の丸みやカメラの切り欠きで端が欠け、画面に触って操作する指が隅を隠す。そこで、HUD は画面の端から幅と高さのそれぞれ 5〜10% 内側に置く。デモの HUD は端から幅と高さの 5% 内側に置いている。端が欠ける幅は機種によって違うので、HUD の余白を設定で変えられるようにする。画面に触って操作するゲームでは、操作に使う辺りに HUD を置かない。

大きさと見分けやすさ

HUD を画面の大きさに合わせて拡大縮小する作りでは、画面が小さく映る環境ほど文字や目盛りも小さくなる。そこで、HUD の大きさは遊ぶ環境のうち画面がいちばん小さく映るもので読めるように決める。デモの HUD の文字は画面の高さの 9% にしてあり、このページを幅 360px の画面で開いても 11px 以上になる。

HUD は場面ごとに変わる背景の上に重なる。文字と同じくらいの明るさの背景では、文字が背景に溶けて読めなくなる。文字の後ろに半透明の暗い板を敷くか、文字に縁取りを付けると、どの場面でも見分けられる。板を敷けば、その分だけ板の下の世界は見えにくくなる。デモの HUD は暗い半透明の板の上に書き、段の右上に出す面積はこの板の面積で数えている。

常に出すか、変化したときだけ出すか

HUD の出し方には、常に全部出す作りと、値が変化した項目だけをしばらく出して消す作りがある。常に出せば、プレイヤーはいつでも確かめられる。その代わり、画面の一部が覆われ続け、項目が多いほどどこを見ればよいかわかりにくくなる。変化したときだけ出せば、ふだんは世界がよく見える。表示が出ること自体が、値が変わったことの知らせになる。

デモの自動再生の 1 周（約 13.8 秒）で、常に出す上の段の HUD は画面の 21% を覆い続ける。変化したときだけ出す下の段は覆う面積が平均 4% で、落ち着いている場面では 0% になる。「攻撃を受ける」場面では下の段だけ、何もなかった隅に体力の表示が現れる。

体力や弾数を何度も確かめる戦いの場面では、その項目を常に出す。景色を見せたい探索の場面では、変化したときだけ出す。一つのゲームの中で出し方を切り替えるなら、敵が近くにいるあいだや武器を構えているあいだは体力と弾数を出し、戦いが終わったら消す。

出しておく時間

変化したときだけ出す場合、出しておく時間は 1〜3 秒の幅から試す。短すぎると、ほかの所を見ているうちに消え、変わった値を読めない。長すぎると、立て続けに変化する場面で出たままになり、常に出す作りに近づく。デモの「下の段で出しておく時間」は 2 秒を既定にしてあり、5 秒にすると下の段の覆う面積の平均は 7% に増える。

消すときは一度に消さず、薄くしてから消す。表示が急に消えると、視界の端で起きた変化として目を引く。デモでは出しておく時間の最後の 0.25 秒で薄くしている。

変化が続くあいだは、変化するたびに、出しておく時間を初めから数え直す。最初に変化したときから数えると、続けて変化している途中で表示が消え、また出る。デモの「弾を撃つ」場面では、3 発を約 0.23 秒おきに撃ち、弾数の表示は最後の 1 発から 2 秒後まで途切れずに出ている。

// 1 ステップごとに、項目ごとの「変化してからのフレーム数」を 1 増やす
for (const item of items) item.since += 1;
// 値が変わった項目は 0 に戻す（出しておく時間を初めから数え直す）
if (hp !== lastHp) hpItem.since = 0;

// 項目を出すか
function visible(item) {
  if (item.always) return true; // 常に出す項目
  if (item === hpItem && hp <= maxHp * 0.3) return true; // 体力が少ないあいだは出し続ける
  return item.since < holdFrames; // 変化してから決めた時間だけ出す
}

隠しすぎたとき

変化したときだけ出す作りでは、プレイヤーが確かめたいときに表示が出ていないことがある。次の戦いの前に残りの弾数を確かめたくても、撃つまで弾数は出ない。確かめたい項目は常に出すか、押しているあいだ HUD を全部出すボタンを置く。デモの「下の段でも常に出す」を「体力と弾数」にすると、下の段の覆う面積の平均は 11% になる。

地図や目標のように値が変わらなくても見たい情報は、変化を待って出す作りでは出る機会がない。デモの下の段では地図は一度も出ない。こうした情報は常に出すか、ボタンを押したら出す。

体力が減ったことに気づかないまま、やられてしまうこともある。体力の表示が出るのは減った直後の数秒だけで、そのときほかの所を見ていれば、減ったことに気づかない。そこで、体力が少ないあいだは変化がなくても体力を出し続け、色を変えて目立たせる。出し続ける境目は、残りの体力が強い攻撃 1〜2 回分を下回ったところにする。デモでは 1 回の攻撃で体力が 20 減り、境目を最大の 3 割（30）にしてあるので、あと 1 回でなくなる 20 から出し続ける。「体力が 3 割以下なら出し続ける」を切ると、最後の攻撃から 2 秒後に体力の表示が消え、体力が 20 のまま何も出ていない画面になる。

世界の中に表示を置く方法

HUD はゲームの世界の外から画面に重ねる表示である。これに対し、残りの弾数を武器に付いた小さな画面に出すように、表示を世界の中の物に置く作り方を「ダイジェティック UI」と呼ぶ。画面の隅を覆わずに済む代わりに、その物が画面に映っていないと読めない。

脚注

1. HUD は Heads-Up Display の略。航空機の操縦士が下の計器に目を落とさず前を向いたまま情報を読めるよう、前方の視界に重ねて映す表示装置の名前に由来する。 ↩