javascript - 2D トップダウン ミニマップ

Question

RPG ゲームのミニマップを作成したいと思います。

すべてのオブジェクトの寸法、速度、および座標を、必要なミニマップの大きさで分割するのと同じくらい簡単にミニマップを作成していますか?

以下に例を示します... 1000x1000px のサイズ、500x500px のキャンバス (ビューポート) があり、プレイヤーはビューポートの中央に配置されています... 実際の世界の半分のサイズのミニマップが必要な場合は、次のようにします。 :

• プレイヤー/ビューポートx,y速度/2
• プレイヤー/ビューポートx,y座標/2
• キャンバス、ワールド、およびすべてのオブジェクトの幅と高さが 2 で除算されます

等...

そうすれば、世界のミニマップのレンダリングと速度が正確にスケーリングされますか? 何か不足していますか？

ありがとう！

---

編集：このようなもの？

function miniMap() {
  $(".minimapHolder").show();
  $("#mini_map").text("hide minimap");
  var minicanvas = document.getElementById("miniMap");  
  ministage = new createjs.Stage("miniMap");
  minicam = new createjs.Shape();
  minicam.graphics.beginStroke("white").drawRoundRect(0, 0, 100, 40, 5);
  //blip representation of Player
  player_blip = new createjs.Shape();   
  player_blip.graphics.beginFill("yellow").drawRoundRect(0, 0, 11.2, 12, 1);

  animal_blip = new createjs.Shape();   
  animal_blip.graphics.beginFill("red").drawRoundRect(0, 0, 24.4, 21.6, 1);

  player_blip.x = players_Array[0].x/5;
  player_blip.y = players_Array[0].y/5;

  animal_blip.x = animalContainer.x/5;
  animal_blip.y = animalContainer.y/5;

  minicam.x = players_Array[0].x-110;   
  minicam.y = players_Array[0].y-110;   
  ministage.addChild(player_blip, animal_blip, minicam);
  ministage.update();

}

function updateMiniMap() {
  player_blip.x = players_Array[0].x/5;
  player_blip.y = players_Array[0].y/5;

  if (ContainerOfAnimals.children[0] != null) {
      var pt = ContainerOfAnimals.localToGlobal(ContainerOfAnimals.children[0].x, ContainerOfAnimals.children[0].y);
      console.log(pt.x);

      animal_blip.x = pt.x/5;
      animal_blip.y = pt.y/5;
  } else {
      ministage.removeChild(animal_blip);
  }
  minicam.x = player_blip.x-40;     
  minicam.y = player_blip.y-15;                     
  ministage.update();
  } 

与えます: