カメラの移動

camera （カメラ）とは、ゲーム全体から、どの範囲をキャンバスに映し出すかを定義する機能です。デフォルトでは、カメラはキャンバスの中央に配置されています。

カメラの移動には、 x や y の値を変更するか、 camera.moveTo 関数を使用します。

このコードサンプルでは、カメラはプレイヤーの x 方向への動きを、とらえ続けます。

カメラのズーム

zoom （ズーム）関数は、ワールド内のスプライトや他の要素の描画サイズの倍率を変更します。ズームを大きくするとスプライトは拡大描画（ズームイン）され、小さくするとスプライトは縮小描画（ズームアウト）されます。

zoomTo(target, speed) は、カメラのズームインとズームアウトをスムースに行うための、 async 関数です。第 2 引数を与えた場合、それは 1 フレームあたりのズーム速度の指定になります。

カメラのオン・オフ

デフォルトでは、 allSprites.draw() は p5.js の描画ループの最後に呼ばれ、そこでカメラが自動的にオンになります。しかし、スプライトやグループを描画するタイミングを手動で制御したい場合は、それらを別々に描画することができます。

このコードサンプルをご覧ください。ゲームのプレーヤーやその舞台のように、ワールドにおける座標系で指定された要素は、 camera.on() でカメラをオンにした後に描画します。

また、オレンジの四角で表現されている UI や HUD のスプライトといった、ワールドとは無関係にキャンバス上の座標で指定された要素は、 camera.off() でカメラをオフにした後に描画します。

mouse.x は、ワールドに対するマウスの x 座標を表します。ワールドがキャンバスからはみ出していても、ワールドの座標系における座標を示し続けます。一方で mouse.canvasPos.x は、純粋にキャンバス上でのマウスの x 座標を表します。

カメラにおけるマウスイベント

このコードサンプルでは、どのスプライトも移動していません！ カメラが左右に動いているだけです。

大きなスプライトは、カメラがオンのときに、ワールドに対して描画されます。小さいスプライトは、カメラがオフのときに、キャンバスに対して描画されます。

sprite.mouse 関数は、カメラのオン・オフにかかわらず、動作することに注意してください。