ダイジェティック UI

世界の中の物に出す表示

体力や残りの弾数は「HUD」として画面の隅に重ねて出せる。HUD はどの場面でも同じ所にあって読めるが、画面の隅を覆い、読むたびに目を画面の中ほどから隅まで動かすことになる。そこで、情報をゲームの世界の中にある物に出す作り方がある。残りの弾数を武器の側面の目盛りで、体力をキャラクターの背中の灯りで、扉が開くかどうかを扉の横の灯りで示す。このように、世界の中の物として情報を出す表示を ダイジェティック UI と呼ぶ¹。

デモの上の段は体力、鍵の有無、残りの弾数を HUD で画面の隅に出す。下の段は同じ情報を背中の灯り、扉の横の灯り、武器の目盛りに出す。ゲームの進み方は二つの段で同じで、違うのは情報の出し方だけである。

世界の中、世界の外、その中間

画面に出す表示は世界の中の物か、世界の外から重ねる物かで分けられる。

• 世界の中の表示：武器の目盛り、背中の灯り、扉の灯り、運転席の計器のように世界の中に物として存在する表示。キャラクターにも見えている物として作る。ダイジェティック UI はこれを指す。
• 世界の外から重ねる表示：画面の隅の体力や弾数のように世界とは関係なく画面に重ねる表示。HUD はこれにあたる。
• 中間の表示：敵の頭の上の名前や体力の棒、行き先を示す印のように世界の中の位置に合わせて画面に重ねる表示。世界の中の物ではないが、示す物のそばに出る。

中間の表示は世界の中の物と同じく示す物のそばに出せ、HUD と同じく画面の上での大きさを保てる²。デモの「下の段の体力」を「頭の上」にすると、下の段の体力はキャラクターの頭の上に重ねた棒で出る。

目を動かす距離

プレイヤーは遊んでいるあいだ、キャラクターや敵を見ている。HUD の情報を読むには、そこから画面の隅まで目を動かし、読んだらまた戻す。ダイジェティック UI では情報がその物に付いているので、その物を見ていれば目をほとんど動かさずに読める。

デモではキャラクターの目の位置を見ている所とする。そこから、いま見たい情報の表示の中心までのまっすぐな距離を、画面の幅に対する割合で「目の移動」として出している。「敵を撃つ」場面では、上の段の弾数の表示は右下の隅にあり、目の移動は 61% になる。下の段の武器の目盛りまでは 5% である。「砲台に撃たれる」場面では、上の段の体力の表示（左上）までが 30〜40%、下の段の背中の灯りまでが 6% になる。

画面の隅を覆わない

HUD は画面の隅に映る世界を覆う。デモの上の段では右上の「鍵」の表示の裏に砲台があり、砲台の弾は表示の裏から飛んでくる。下の段は隅に何も重ねていないので、砲台が見え、どこから撃たれているかがわかる。ダイジェティック UI は画面に世界の外の物を重ねないので、景色や暗さを見せたい場面で隅まで世界を見せられる。

向いている情報と向いていない情報

ダイジェティック UI に向いているのは、数が少なく物と結び付いた情報である。武器の弾数は武器に、キャラクターの体力はキャラクターに、扉が開くかどうかは扉に結び付いている。多いか少ないかがわかれば足りる情報も向いている。

向いていないのは、細かい数値と、結び付く物のない情報である。デモの武器の目盛りからは残りが 3 分の 2 ほどだとはわかるが、8 発か 7 発かは読み取れない。上の段の「弾数 8/12」なら一目で読める。所持金、経験値、残り時間、スコアのように世界の中に結び付く物がない情報は、無理に物に載せるより HUD に出す。常に確かめたい情報を世界の中に出すなら、キャラクターの体や持ち物のようにいつも画面に映る物に出す。

読めなくなるとき

世界の中の表示は、その物が見えていないと読めない。読めなくなるのは物が画面の外にあるとき、小さく映るとき、暗い所にあるとき、物の向きで表示が裏に回るときである。

デモの「扉へ向かう」場面では、扉は初めは画面の外にあり、下の段の数字は「画面の外で読めない」になる。扉が画面に入るまでの約 2.3 秒、下の段では鍵を持っているかを確かめられない。扉が画面に入った直後も、灯りは画面の右端にある。目の移動は 49% で、上の段の「鍵」の表示までの 41% より遠い。扉の前に着くと、下の段は 6%、上の段は 29% になる。世界の中の表示が目の近くにあるのは、その物のそばにいてその物を見ているときである。

小さく映るときも読みにくい。デモの「映す範囲の広さ」を 2 倍にすると、世界の物は画面の上で縦横が半分になり、武器の目盛りの長さは画面の幅の 6.5% から 3.25% になる。扉の灯りの ✕ と ○ も見分けにくくなる。その代わり、面のほとんどが画面に入るので、扉が画面の外になることはない。1.5 倍では扉が画面の外にある時間が約 1.2 秒に縮む。HUD の表示の大きさは映す範囲を広げても変わらない。

暗い所の表示は周りと一緒に暗くなる。灯りや目盛りそのものを光らせると、周りの明るさによらず見える。物の片側にだけ表示を付けると、物の向きによっては表示が裏に回る。カメラから見える側に置くか、両側に出す。

組み合わせ方

世界の中の表示だけで全部の情報を出すと、上に挙げた読めない場面が残る。情報ごとに出し方を選び、読めない場面を画面に重ねる表示で補う。

• 画面の外にある物：画面の端のその物がある側に印を出す。デモの「扉が画面の外なら端に印を出す」を入れると、扉が画面に入るまで下の段の右端に灯りと同じ色と形の印が出る。印までの目の移動は 43% で、上の段の HUD（41%）とほぼ同じになる。印は扉がどちらにあるかも示す。
• 小さく映るとき：頭の上の棒のような中間の表示にする。デモの「下の段の体力」を「頭の上」にすると、映す範囲を 2 倍にしても、棒は同じ大きさで出る。
• 正確な数が要るとき：ふだんは武器の目盛りで示し、弾を込め直すときのように数を確かめたい場面だけ数字を添える。
• 危ない状態：体力が少ないときは背中の灯りを赤くし、灯りの長さでも減ったことを示す。

デモの 3 つの切り替え（「下の段の体力」「弾数を武器に出す」「鍵の有無を扉の灯りに出す」）で全部を画面の隅に戻すと、下の段は上の段と同じ画面になる。一つずつ世界の中に移すと、情報ごとの効き目を比べられる。

扉の灯りのように画面に映っているかで出し方を変えるときは、表示する物の位置を画面の上の位置に直して判断する。

// 扉の灯りの位置を、画面の上の位置に直す
const p = toScreen(lamp.x, lamp.y);
const onScreen = p.x >= 0 && p.x <= screenW && p.y >= 0 && p.y <= screenH;
if (!onScreen) {
  // 灯りのある側の画面の端に、灯りと同じ色と形の印を出す
  const x = p.x > screenW / 2 ? screenW - margin - markW : margin;
  const y = clamp(p.y - markH / 2, margin, screenH - margin - markH);
  drawMark(x, y, hasKey);
}

色だけに頼らない

灯りで状態を示すときは、色のほかにも違いを付ける。色の見え方は人によって違い、赤と緑のように区別しにくい組み合わせがある。デモの扉の灯りは鍵がないときは赤に ✕、あるときは緑に ○ の形を重ねている。背中の灯りも体力が少ないときは赤くするのに加えて、光る長さが短くなる。

脚注

1. ダイジェティック（diegetic）は映画の用語で「物語の世界の中にある」ことを表す。登場人物にも聞こえている劇中のラジオの曲などを diegetic な音と呼ぶのと同じ使い方である。 ↩

2. 表示がゲームの空間の中に描かれるかと物語の世界の中にあるかの二つで、ダイジェティック、非ダイジェティック、空間（spatial）、メタ（meta）の四つに分ける分け方もある。この分け方では、頭の上の体力の棒は空間の表示、被弾したときに画面の縁を赤くする表示はメタの表示にあたる。 ↩