javascript - 2D 自顶向下小 map

Question

我想为我的 Angular 色扮演游戏制作一个小 map 。

制作小 map 就像将所有对象尺寸、速度和坐标除以您想要的小 map 的大小一样简单吗？

例如下面...您的尺寸为 1000x1000px， Canvas (视口(viewport))为 500x500px，玩家位于视口(viewport)的中心...如果您想要一个实际世界大小一半的小 map ，你会这样做:

• 玩家/视口(viewport)x,y速度/2
• 玩家/视口(viewport)x,y坐标/2
• Canvas 、世界以及所有对象的宽度和高度除以 2

等等...

这样世界上小 map 的渲染和速度就能准确缩放吗？我错过了什么吗？

谢谢!

<小时/>

编辑:类似这样的事情吗？

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，但这就是不是小 map 的目的。

小 map 的对象应该只是“真实”世界中对象的表示，因此不应具有任何速度等。(尤其不应与“真实”世界分开更新)世界) - 虽然你的方法可能会起作用，但你总是必须跟踪和更新每个属性，这会很快变得困惑，如果你错过了一些微小的事情，甚至会导致差异。

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

另一件事是图形:缩放操作的成本可能很高(性能方面)，尤其是在每帧完成时，因此如果您对小 map 使用相同的图形，您至少应该使用缓存的 DisplayObject 而不是图形按帧缩放。