キャンバス要素の「カメラを動かす」ためのクリーンな方法を見つけようとしています。
これは私のプロトタイプゲーム(サイドスクローラー)用です。ノードのセット全体を動かして「カメラ」の動きをシミュレートするよりも良い解決策があると思います。
簡単なハウツー(オフセットを使用)を読んだことはほぼ確実ですが、そのようなものが見つからないという事実は疑問を投げかけ始めます...私はそれを読むことを想像しましたか?
明確にするのを手伝ってくれてありがとう...J
おそらく、ゲームシーン全体を1秒間に30回(多かれ少なかれ)再描画します
ゲームシーン全体を再描画する必要がありますが、最初にCanvasコンテキストをオフセットで変換します。
context.translate(x,y)
まさにあなたが望むものです。save()
とメソッドだけでなく、その使用法についても読んでおく必要がありrestore()
ます。
コンテキストを翻訳すると、その後に描画されるすべてのものがその量だけシフトされます。
したがって、を使用して50,50で常に何か(おそらく敵)を描画しdrawImage(badguy,50,50)
ます。次に、プレーヤーが移動します。これにより、x
oftranslate
が0ではなく-1に変更されます(プレーヤーが右に移動しているため)。コマンドを使用して敵のスプライトをdrawImage(badguy,50,50)
描画しますが、描画すると、敵は次の場所にいるかのように表示されます。context.translate(-1,0)
コマンドが描画される前にすべてをシフトするため、49,50 。
もちろん、パフォーマンスを始めるときは、実際に画面に表示されるものだけを描いていることを確認する必要があります。のレベルがはるかに低い場合はcontext.translate(-2000,0)
、オブジェクトを50,50で描画する必要はなく、表示可能領域と交差するオブジェクトのみを描画します。