[英]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.