Javascript 二维自顶向下小地图

我想为我的rpg游戏制作一个小地图

制作一个小地图是否简单到将所有物体的尺寸、速度和坐标除以你想要的小地图的大小

例如下面。。。您有一个1000x1000px的大小，一个500x500px的画布（视口），播放器位于视口的中心。。。如果你想要一张只有实际世界一半大小的小地图，你可以：

• 播放器/视口

  x，y

  velocity/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();
  } 

给出：

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

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

小地图的对象应该只是“真实”世界中对象的表示，因此不应具有任何速度等。（尤其不应与“真实”世界分开更新）-虽然您的方法可能会起作用，但您必须始终跟踪并更新每个属性，如果你错过了一些小东西，这会很快变得混乱，甚至导致差异

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

另一件事是图形：缩放操作可能代价高昂（性能方面），尤其是在每一帧进行缩放操作时，因此，如果您对小地图使用相同的图形，则至少应该使用缓存的DisplayObject，而不是在每一帧缩放图形。

Short anwswer:“它（很可能）会工作。”但是：

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

小地图的对象应该只是“真实”世界中对象的表示，因此不应具有任何速度等。（尤其不应与“真实”世界分开更新）-虽然您的方法可能会起作用，但您必须始终跟踪并更新每个属性，如果你错过了一些小东西，这会很快变得混乱，甚至导致差异

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

---

另一件事是图形：缩放操作可能代价高昂（性能方面），尤其是在每一帧都进行缩放时，因此，如果您对小地图使用相同的图形，则至少应该使用缓存的DisplayObject，而不是在每一帧缩放图形。

是的，这看起来是一种干净的方法！-我猜只有1个

animal_blib

是设计的，对吧？我最终会有x个光点，所以每次添加一个新对象时，我都会修改代码来创建一个新的createJS对象。是的，这看起来是一个干净的方法我猜只有1个

animal_blib

是设计出来的，对吧？我最终会有x个光点，所以每次添加一个新对象时，我都会修改代码来创建一个新的createJS对象。