第二章 演出と手応えNo.006
カメラのデッドゾーン
Camera Dead Zone別名 カメラウィンドウ、カメラの遊び
概要
キャラクターが画面の中の枠にいるあいだはカメラを止め、枠からはみ出した分だけ追う仕組み。少し動いただけでは画面が動かないので、立ち位置を直す細かい動きやジャンプのたびに画面全体が揺れずに済む。枠が広すぎると、走り出してもなかなか追わず、進む先が見えにくくなる。
使われる場面
- 横スクロールのアクション
- 敵の前で間合いを測ったり足場の上で立ち位置を直したりする細かい動きでは画面を止め、走り出したときだけ追う。背景や敵が画面の上で止まったままなので、位置を合わせやすい。
- ジャンプの多い場面
- 縦の枠をふつうのジャンプが収まる高さにする。跳ぶたびに画面が上下に揺れず、枠より高く登ったときや枠より下へ落ちたときだけ縦に追う。
- 見下ろしのアクションや探索
- 部屋の中を少し歩く程度では画面を動かさず、枠を出たときだけ追う。上下左右のどちらにも動くので、枠は横と縦の両方に取る。
- 3D の三人称視点
- キャラクターが画面の中央付近で少し動いても、カメラの位置と向きを変えない。小さな動きのたびに視点ごと揺れると、周りの位置関係をつかみにくい。
判断基準
| こういうとき | こうする |
|---|---|
| 少し動いただけで画面全体が揺れて落ち着かない | デッドゾーンを入れる。横の枠は画面の幅の 2〜3 割から試す。立ち位置を直す程度の動きが枠に収まるかを見て、1〜4 割の幅で調整する。 |
| ジャンプのたびに画面が上下に揺れる | 縦の枠を、立っているときの足元からふつうのジャンプの頂点での頭まで収まる高さにする。縦は着地したときだけ合わせる作り方もある。 |
| 走り出してから画面が追い始めるまでが遅く、進む先が見えない | 横の枠が広すぎる。狭くするか、「カメラの先読み」で進む向きの先を広く見せる。 |
| キャラクターが枠の辺に着いた瞬間に画面が急に流れ出して見える | はみ出した分を一度に詰めず、数フレームかけて追う。その分、キャラクターは一時的に枠から少し出る。 |
遊んでこう感じたら
指示の例
少し左右に動くだけで画面全体が揺れて落ち着かない。カメラにデッドゾーンを入れて、画面の幅の 3 割くらいの枠の中ではカメラを動かさないようにして
ジャンプするたびに画面が上下に揺れる。カメラのデッドゾーンを縦にも取って、ふつうのジャンプの高さなら画面が動かないようにして
走り出してもカメラがなかなか付いてこず、進む先が見えない。カメラのデッドゾーンの横幅を今の半分くらいに狭くして
詳細
画面全体が揺れて見える理由
カメラをキャラクターの位置にそのまま合わせて常に追うと、キャラクターは画面の上で止まったままになる。代わりに背景も地形も敵も、キャラクターが動いた分だけ逆向きに動く。走っているあいだはこれで困らないが、敵の前で間合いを測ったり足場の上で立ち位置を直したりすると、小さく動くたびに画面全体がずれる。左右に細かく動けば画面全体も左右に細かく往復するので、揺れて見える。位置を合わせる相手(敵や足場の端)も画面の上で動くため、目で追いにくい。この揺れは、攻撃が当たったときなどにわざと画面を揺らす「画面揺れ」とは別物で、カメラの追い方から生じる。
枠の中では追わないカメラ
そこで、画面の中に枠を決め、キャラクターが枠の中にいるあいだはカメラを動かさない。キャラクターが枠からはみ出したら、はみ出した分だけカメラを動かし、キャラクターを枠の辺まで戻す。この枠をカメラのデッドゾーンと呼ぶ。枠の中の細かい動きでは画面が止まったままなので、動いているのはキャラクターだけに見える。走り続けると、キャラクターは枠の進む側の辺に押し付けられたまま進み、画面はキャラクターと同じ速さで流れる。走って止まった後に向きを変えて戻るときも、枠の反対側の辺に着くまで画面は動かない。
// 1 ステップごとに、キャラクターを動かした後で(座標はワールドの座標)
const zoneLeft = cameraX + (viewWidth - zoneWidth) / 2; // 枠の左の辺
const zoneRight = zoneLeft + zoneWidth; // 枠の右の辺
if (playerLeft < zoneLeft) {
cameraX -= zoneLeft - playerLeft; // 左にはみ出した分だけ左へ
} else if (playerRight > zoneRight) {
cameraX += playerRight - zoneRight; // 右にはみ出した分だけ右へ
}
// 縦も同じように、枠の上の辺と下の辺で比べる
枠をキャラクターと同じ大きさまで狭めると、キャラクターは常に画面の同じ位置に置かれ、常に追うカメラと同じになる。
はみ出した分をその場で詰めると、キャラクターが枠の辺に着いた瞬間に、止まっていた画面が走る速さで流れ始める。これが急に見えるときは、はみ出した分を数フレームかけて詰める。その分、キャラクターは一時的に枠から少し出る。
枠の幅の目安
枠の中でキャラクターが動ける距離は、枠の幅からキャラクターの幅を引いた分になる。立ち位置を直す程度の動きがこの距離に収まれば、その動きでは画面が動かない。横の枠の目安は画面の幅の 1〜4 割ほどで、2〜3 割から試して調整する。細かく位置を合わせることが多いゲームほど広めが合い、速く走り続けるゲームほど狭めが合う(理由は次の節)。
デモで枠を画面の幅の 3 割にすると、中央に立った状態から走り出して 16 フレーム(約 0.27 秒)で枠の辺に着き、そこから画面が追い始める。自動再生の最初の場面の動きはすべて枠に収まるので、下の段の画面は一度も動かない。2 割まで狭めると、同じ向きに続けて動いたところで枠を出て画面が動く。1 割ではほとんどの動きで画面が動く。
広すぎる枠と進む先の見え方
走り続けているあいだ、キャラクターの前の端は枠の進む側の辺にある。そのため、前方に見える距離(キャラクターの前の端から画面の端まで)は画面の幅の (1 − 枠の幅の割合) ÷ 2 になる。枠を画面の幅の 3 割にすると前方は画面の幅の 35%、8 割にすると 10% になる。常に追うカメラではキャラクターが画面の中央にいるので、前方は画面の幅の半分からキャラクターの幅の半分を引いた分(デモでは画面の約 47%)見える。
前方に見える距離をデモの走る速さで走り切るのにかかる時間に直すと、常に追う場合は約 1.0 秒、3 割の枠は約 0.75 秒、8 割の枠は約 0.21 秒になる。8 割の枠では中央から走り出して画面が追い始めるまでにも 48 フレーム(0.8 秒)かかる。同じ距離が見えていても、走る速さが速いゲームほど見えてから着くまでの時間は短い。進む先を広く見せたいときは、枠を狭めるか、「カメラの先読み」で枠やカメラを進む向きの側へずらす。
縦方向の扱い
縦にも常に追うと、ジャンプのたびに画面全体が上下に動く(デモの上の段)。縦の扱いには、主に次の二つの作り方がある。
- 縦にも枠を取る:枠の高さを、立っているときの足元からふつうのジャンプの頂点での頭まで収まるようにする。平らな地面で跳ぶだけなら画面は縦に動かず、高く登って枠の上の辺からはみ出したときや下へ落ちて下の辺からはみ出したときだけ追う。デモの下の段はこの作り方である。跳ぶ高さはキャラクターの背の約 2 倍、枠の高さは背の約 3.5 倍にしてある。
- 着地したときだけ合わせる:空中にいるあいだは縦に追わず、着地した足場の高さに合わせて画面を動かす。
縦にも枠を取る作り方では、高い足場に乗っても枠に収まっているあいだは画面が動かない。キャラクターは画面の上のほうに寄ったままになり、そこから跳ぶと枠を出て画面が上下に動く。着地したときだけ合わせる作り方なら、足場を登るたびに画面が一段ずつ上がり、跳ぶたびに画面が動くことはない。ただし、下へ長く落ちるときは着地する場所が見えなくなるので、キャラクターが画面の下の端に近づいたら着地を待たずに追う。
入力のデッドゾーンとの違い
アナログスティックにも中央付近の小さな傾きを入力として扱わない範囲があり、これをスティックのデッドゾーンと呼ぶ。小さな変化を無視する範囲という点は同じだが、対象はカメラの位置ではなく入力の値で、調整する物が別になる。調整を頼むときは「カメラのデッドゾーン」「スティックのデッドゾーン」のように、何のデッドゾーンかを付けて言う。