2D自上而下的小地图

Question

我想制作我的RPG游戏的小地图。

制作小地图就像划分所有物体尺寸，速度和坐标一样简单，你想要小尺度吗？

例如下面...你的大小为1000x1000px，画布（视口）为500x500px，玩家位于视口的中心......如果你想要一个小尺寸的现实世界的一半，你会这样做：

• 播放器/视口x,y velocity / 2
• 播放器/视口x,y坐标/ 2
• 画布，世界和所有物品＆＃39;宽度和高度除以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();
  } 

给出：

Answer 1

简短的回答：“它（很可能）会起作用。” ...... 但是：

你想要实现的只是扩展舞台/容器，所以你也可以只使用所有内容的副本并将其放入容器中并将其缩小到0.5，但这是不小地图的目的。

小地图的对象应该只是“真实”世界中对象的表示，因此不应该有任何速度等（特别是不应该与'真实'分开更新）世界） - 虽然你的方法可能会奏效，但你总是需要跟踪并更新每一处房产，如果你错过了一些小东西，这将很快变得混乱，甚至会导致分歧。

对此更“干净”（和简单）的方法，每个小地图对象都有一个对“真实”世界中对象的引用，并且在每个刻度上，它只是读取x / y坐标并根据小地图比例更新其自己的坐标。

另一个是图形：缩放操作可能代价高昂（性能明智），特别是当它们在每个帧完成时，所以如果你使用相同的图形作为迷你图，你应该至少使用一个缓存的DisplayObject而不是图形缩放每帧。