ダメージ表示

体力の棒だけではわからないこと

攻撃が当たると、相手の体力が減る。相手の頭の上に体力の棒を出せば、減ったことはわかる。しかし、棒が示すのは最大体力に対する残りの割合である。1 回の攻撃でどれだけ減らしたかは、棒の縮んだ長さを目で測るしかない。最大体力が相手ごとに違えば、同じ長さだけ縮んでも、与えたダメージは同じではない。

そこで、攻撃が当たるたびに、与えたダメージの値を当たった相手の位置に数字で出す。この表示をダメージ表示と呼ぶ。数字は短いあいだ出して消すので、一つの数字はその 1 回（まとめて出すなら、その一続き）の値を伝える。

デモの「範囲攻撃を 2 回当てる」では、範囲攻撃の波が 5 体の人形に 6 回ずつ当たる。終わったとき、上の段では弱点のある人形の体力の棒は 50%、普通の人形の棒は 51〜56% まで縮み、ほとんど同じに見える。弱点のある人形は最大体力が 200 で、ほかの人形（100）の 2 倍ある。2 倍のダメージを受けても、棒は普通の人形と同じくらいの割合でしか縮まない。下の段では普通の人形に 44〜49、弱点のある人形に 100 と出て、弱点のある人形に 2 倍あまり効いたことがわかる。

数字が伝えるもの

数字があると、攻撃の強さを値で比べられる。デモのダメージは弱い攻撃が 10、強い攻撃が 30 を基本にして、当たるたびに 0.8〜1.2 倍の幅でばらつく。「弱い攻撃 2 回と強い攻撃を当てる」では下の段に 11、9、35 と出て、強い攻撃が弱い攻撃の 3 倍ほど効くことを値で読み取れる。上の段でも棒の縮み方の違いは見えるが、何倍かまでは読み取りにくい。

弱点を突いた攻撃や会心の一撃のように特別な条件でダメージが増えたときも、数字でわかる。条件を満たしたことがわかれば、プレイヤーは次も同じ条件を狙えばよいと判断できる。デモの弱点のある人形は同じ波で普通の人形の 2 倍前後のダメージを受ける。

反対に、効きにくい相手に当てたときは数字が小さく出る。デモの硬い人形は範囲攻撃の波 1 回で 1 か 2 しか減らず、体力の棒は 1 回あたり 1〜2% しか縮まない。上の段では攻撃が当たっていないのか、当たっても効いていないのかを見分けにくい。下の段では小さな数字が出るので、当たっているのに効きにくいとわかる。攻撃を変えるか、ほかの相手を先に倒すかを決められる。

レベルや装備で強くなるゲームでは、数字が強くなったことの確かめにもなる。同じ相手に同じ攻撃を当てて前より大きな数字が出れば、どれだけ強くなったかを値で確かめられる。

手応えの演出との違い

「ヒットストップ」や「画面揺れ」は、当たった瞬間の動きで攻撃が当たった手応えを作る演出である。ダメージ表示はそれとは別に、当たった攻撃がどれだけ効いたかの量を伝える。デモの二つの段は火花と人形ののけぞりを同じにしてあり、違いは数字を出すかどうかだけである。数字を出しても、当たった瞬間の手応えは変わらない。当たった気がしないときは、数字を足すのではなく、手応えの演出を入れる。

二つを組み合わせるときも、数字は当たった瞬間に当たった場所に出す。数字が遅れて出たり離れた所に出たりすると、どの攻撃の数字かが結びつかない。

数字の見せ方

数字が多く出る場面では、一つずつ読んでいる時間はない。大事な数字が先に目に入るよう、数字の中でも「情報の優先度」を付ける。デモの下の段は弱点を突いた数字を普通の数字の約 1.5 倍の大きさにして目立つ色にし、後ろに「!」を付けている。硬い人形の数字は約 0.7 倍の大きさにして灰色にしている。「弱点と効きにくさで見た目を変える」を切ると、どの数字も同じ大きさと色になり、値を読まないと違いがわからない。色の見え方は人によって違うので、色だけでなく大きさと印も変える。

数字は人形や床、ほかの数字の上に重なって出る。背景に溶けないよう、数字に暗い縁取りを付ける。デモの数字にも縁取りを付けている。

出しておく時間は 0.5〜1.5 秒の範囲から試す。短すぎると、ほかの所を見ているうちに消え、値を読めない。長すぎると、画面に残る数字が増え、後から出た数字と重なりやすくなる。デモの「数字を出しておく時間」は 1 秒を既定にしてあり、0.2〜2 秒の範囲で変えられる。消すときはデモと同じく、出しておく時間の最後の 4 分の 1 で薄くしてから消す。

数字の動きはデモの「動き」で次の三つを切り替えられる。

• 上へ浮かぶ：出た瞬間に少し跳ね上がり、消えるまでゆっくり上がり続ける。
• 横へ跳ねる：左右に交互に跳ね、少し上で止まる。
• 動かさない：当たった所にそのまま出す。

出た瞬間に動く数字は、ほかの所を見ていても目に入る。デモの数字は出た瞬間と値が増えた瞬間にも、少し大きくしてから元の大きさに戻している。ただし、動かし方を変えても、短い間隔で続けて当たる数字の重なりはあまり減らない。上へ浮かぶ数字でも、後から出た数字が跳ね上がって、ゆっくり上がっている前の数字に追いつく。

数字が重なるとき

敵が群れで出てくる場面の範囲攻撃や、短い間隔で何度も当たる連続攻撃では、数字が一度に多く出る。同じ相手の数字が積み重なると、どれも読めなくなる。少し横にずれて重なった数字は、別の値にも読める。デモでも隣り合って重なった 8 と 7 が「87」のように見えることがある。デモの数字はどの設定でも、同じ相手に出すたびに出す位置を左右に少しずつ変えているが、この程度の違いでは重なりは防げない。

下の段の上の行に出している「重なった数字」は、ほかの数字と重なっている数字の数である。「同じ相手に続けて当たったとき」を「そのまま」にすると、「範囲攻撃を 2 回当てる」で出る 30 個の数字のうち最大で 25 個が重なる。「動き」を「横へ跳ねる」にしても 20 個、「動かさない」にすると 27 個が重なる。出しておく時間を 0.5 秒に縮めると最大 14 個に減り、1.5 秒に延ばすと 29 個が重なる時点がある。

重なりを減らす方法には、次のものがある。

• まとめる：同じ相手に短い間隔で続けて当たったダメージを一つの数字に足していく。デモでは最後に足してから 0.4 秒以内に当たった分を足す。「範囲攻撃を 2 回当てる」の 30 個の数字は、人形ごとに一つずつの 5 個になる。「弱い攻撃を 5 回続けて当てる」では、10 前後ずつ足されて 50 になる。数は減るが、1 回ごとの値は読めない。
• ずらす：新しい数字を当たった所に出し、同じ相手の前の数字を 1 行分上へ押し上げる。1 回ごとの値を読めるまま、デモでは重なった数字が 0 個になる。その代わり、同じ相手の数字が縦に積み上がる。「範囲攻撃を 2 回当てる」では人形ごとに 6 個ずつ積み上がり、最大 9 個の数字が画面の上の端からはみ出す。
• 小さい数字を省く：決めた値より小さいダメージの数字を出さない。デモの「5 未満の数字を省く」を入れると、「そのまま」で重なる数字は最大 22 個になる。ただし、省かれたのは硬い人形の数字である。硬い人形には攻撃が当たっても何も出なくなり、効きにくいことが伝わらない。

どれを選ぶかは、何を読ませたいかで決める。連続攻撃の合計が大事なゲームではまとめ、1 回ごとの値や会心が出たかどうかが大事なゲームではずらす。小さい数字を省くなら、効きにくい相手に当てたときは、弾かれる火花や効果音のような、数字のほかの反応を返す。

ずらす方法は動き方と組み合わせて確かめる。デモの「動き」を「横へ跳ねる」にしたまま「ずらす」を選ぶと、重なった数字は 0 個にならず、最大 6 個残る。横へ広がった数字が隣の相手の数字と重なるうえ、跳ねる数字は上がってから少し下がるので、押し上げた前の数字が後から出て上がってくる数字に近づくことがある。

まとめる処理は、次のように書ける。

// 攻撃が当たったとき。同じ相手の数字が 0.4 秒以内に更新されていたら、そこに足す
function onHit(target, damage) {
  const last = popups.findLast((p) => p.target === target);
  if (last && last.sinceUpdate < 0.4) {
    last.value += damage;
    last.sinceUpdate = 0; // 出しておく時間も初めから数え直す
    return;
  }
  popups.push({ target, value: damage, age: 0, sinceUpdate: 0 });
}

数字を出さない作りと設定での切り替え

ダメージ表示は「HUD」と同じく、ゲームの世界の中にある物ではなく画面に重ねて出す表示である。怖さや緊張を見せたいゲームで数字が次々に出ると、画面がにぎやかになり、その雰囲気と合わない。敵が 1〜2 回の攻撃で倒れるゲームや、体力をハートの数のような少ない数で数えるゲームでは、数字を出しても体力の表示以上のことはほとんど伝わらない。こうしたゲームでは数字を出さず、体力の棒や相手のよろめき、効きにくいときに弾かれる反応で効き具合を伝える。

数字を出すゲームでも、全部出す、弱点と会心の数字だけ出す、出さない、から設定画面で選べるようにする。数字で細かく確かめたいプレイヤーも、画面を広く見たいプレイヤーも、自分に合わせて選べる。与えたダメージと受けたダメージは別々に切り替えられるようにする。