HTML5 キャンバス ゲーム (2D) を開発しています。キャンバスのサイズは 2000x2000 ピクセルです。私の画面の解像度は 1920x1080 です。JavaScript でカメラ オブジェクトを作成して、プレイヤーに追従するカメラを模倣したいと考えています (ビューポートの中心にある必要があります)。
以前のゲームの 1 つから、これを C# (XNA) で使用しました。
center = new Vector2(player.position.X + (player.rectangle.Width / 2) - (view.Width / 2), 50);
transform = Matrix.CreateScale(new Vector3(1, 1, 0)) * Matrix.CreateTranslation(new Vector3(-center.X, -center.Y, 0));
HTML5 Canvas を使用して、これを JavaScript に「変換」するのを手伝ってくれる人はいますか? 本当に感謝します！
以前に作成したゲームで行ったことは、ビュー オブジェクトを作成することです。このビュー オブジェクトには x 変数と y 変数があり、プレーヤーに従います(おそらくコーディング方法を理解できるでしょう。ビューの x と y に従ってプレーヤーの x と y をチェックするだけです)。部屋全体）
編集: 明確にするために、プレーヤーの x と y の値に従って、ビューの x と y の値を変更します。ビューの X と Y をプレーヤーの X と Y に設定しないでください。キャンバスがプレーヤーを 0,0 に描画する原因となります。代わりに、プレイヤーがビューポートの境界内にいることを確認し、そうでない場合は、それに応じてビューポートを移動します。
次に、キャンバスに描画するときに、ゲーム内のすべてのオブジェクトの描画を次のように指定します。
ctx.drawImg(img, x - view.x, y - view.y);
これにより、カメラのビューに関連するすべてが描画されます。JavaScript ゲーム エンジンを開発しようとしていますが、同じ問題がありました。これが役立つことを願っています。さらに明確にする必要がある場合は、お気軽にお問い合わせください。