javascript - 2D自上而下的小 map

我想制作一个我的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();
  }

给出：

最佳答案

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

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

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

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

另一件事是图形：缩放操作可能是昂贵的（从性能角度考虑），尤其是在每一帧完成缩放操作时，因此，如果您对小地图使用相同的图形，则应该至少使用缓存的DisplayObject而不是对每个图形进行缩放帧。

关于javascript - 2D自上而下的小 map ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18318459/