[英]2D top-down minimap
我想制作一个我的RPG游戏的小地图。
制作小型地图是否像将所有对象的尺寸,速度和坐标除以所需的小型地图一样简单?
例如,下面的示例...您有一个1000x1000px的大小,一个500x500px的画布(视口),播放器位于视口的中心...如果您想要一个小地图,尺寸是实际世界的一半,则可以:
x,y
速度/ 2 x,y
坐标/ 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();
}
得到:
简短回答:“它将(很可能)起作用。” ... 但是:
您想要实现的只是缩放stage / container ,因此您也可以只使用所有内容的副本并将其放入容器中并将其缩放到0.5,但这不是迷你地图的目的。
小型地图的对象只能代表 “真实”世界中的对象,因此不应具有任何速度ect(尤其不应与“真实”世界分开更新)-尽管您的方法可能会有效,您始终必须跟踪并更新每个属性,如果您错过了一些小东西,这将很快变得混乱,甚至导致差异。
一种更“干净”(且简单)的方法是,每个小地图对象都引用“真实”世界中的对象,并且在每个刻度上,它仅读取x / y坐标并更新其“坐标”。基于小地图比例尺的自己的坐标。
另一件事是图形:缩放操作可能是昂贵的(从性能角度考虑),尤其是在每一帧完成缩放操作时,因此,如果您对小地图使用相同的图形,则应至少使用缓存的DisplayObject而不是按比例缩放图形帧。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.