2D自上而下的小地圖

Question

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

給出：

Answer 1

短anwswer： 「那（最有可能）的工作。」 ...... 但：

你所想達到的只是縮放舞臺/容器，所以你也可以只使用一個副本的一切，放入容器中，將其縮小到0.5，但那是不是小地圖的目的。小地圖的

對象只應對象在「真實」世界表示，因此不應該有任何速度ECT（特別要不能單獨從「真正的」世界更新） - 而你的方法可能會奏效，你總是必須跟蹤和更新每一個屬性，如果你錯過了一些小事情，這會很快變得混亂，甚至導致分歧。

對此，一個更「乾淨」（簡單）的方法每個小地圖對象都有一個對'真實'世界中的對象的引用，並且在每個刻度上只讀取x/y協調並根據小地圖更新自己的座標。另一件事是圖形：縮放操作可能是昂貴的（性能明智的），特別是當他們完成每一幀時，所以如果你使用相同的圖形的小地圖，你應該至少使用一個緩存的DisplayObject，而不是圖形按比例縮放每一幀。