3

Javascript でゲーム エンジンを作成しています。回転可能なカメラ オブジェクトが必要です。カメラが回転すると、2D シーン全体もカメラの位置を中心に回転してレンダリングされます。各ビジュアル エンティティも同様に回転できます。これがその方法です。

context.save(); //As we are about to change the context's state, we need to save it so it can be restored.

context.translate(entity.position.x + entity.width/2, entity.position.y + entity.height/2); //Translate to the center of the entity so the context can be rotated with the desired effect.
context.rotate(entity.rotation); //In radii.
context.drawImage(entitiy.image, -entity.width/2, -entity.height/2);

context.restore(); //Restore the previous context state so it can be used later by other entities.

同様の方法でカメラの回転を実現したいと思います。基本的に、すべてのエンティティを調べてレンダリングする前に、次のようにします。

if (camera.rotation != 0)
{
    renderer.context.save();
    renderer.context.rotate(camera.rotation);
}    

//Loop through entities and render.

そして、エンティティが終了した後 (同じコンテキストを何度も保存して復元した後)、次のように、コンテキストをレンダリング前の状態に復元したいと思います。

if (camera.phi != 0)
{
    renderer.context.restore();
}

両方ともある程度回転している 2 つのエンティティと、回転しているカメラがあるとします。プロセスは次のようになります。

  1. 保存
  2. 保存
  3. 平行移動と回転
  4. 2から復元。
  5. 保存
  6. 平行移動と回転
  7. 5から復活。
  8. 1から復元します。

このタイプの動作はサポートされていますか? 実装したところ、動作しているようですが、バグもあるので、状況を正しく評価できません...

4

1 に答える 1

4

これは適切な動作である必要があります。それを必要とするキャンバス機能のコンテキストを保存した後に新しいbeginPath（）呼び出しを作成し、必要に応じて復元する前にclosePathを作成することを忘れないでください。

ここを見てください：save（）とrestore（）を理解する

プロジェクトでは、ネストされたコンテキストの保存と復元を使用しています。頭の中でスタックのどこにいるかを追跡する必要があります。したがって、何かを変換する場合は、次の保存などの操作を開始するときにその変換を行うことになります。

于 2012-07-10T21:29:35.893 に答える