javascript - 2D top-down minimap -


i'd make minimap of rpg game.

is making minimap simple dividing object dimensions, velocities, , coordinates large want minimap?

for example below... have size of 1000x1000px, canvas (viewport) of 500x500px, player located in center of viewport... if wanted minimap half size of actual world, do:

  • player/viewport x,y velocity/2
  • player/viewport x,y coordinates/2
  • canvas, world, , objects' width , height divided 2

etc...

enter image description here

that way rendering of minimap on world , velocities scaled accurately? missing anything?

thanks!


edit: this?

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();   }  

gives:

enter image description here

short anwswer: "it will(most likely) work." ... but:

what trying achieve scaling stage/container, use copy of , put container , scale down 0.5, not purpose of minimap.

objects of minimap should representation of object in 'real' world , should therefore not have velocity ect.(that should not updated separately 'real' world) - while approach work, you'd allways have keep track , update every property, messy or lead differences if miss tiny things.

a more 'clean'(and simple) approach be, each minimap-object has reference object in 'real' world , on each tick, reads x/y-coordinates , updates its' own coordinates based on minimap-scale.

another thing graphics: scaling-operations can costly(performance wise), when done each frame, if use same graphics minimap should @ least used cached displayobject , not have graphics scaled each frame.


Comments

Popular posts from this blog

Detect support for Shoutcast ICY MP3 without navigator.userAgent in Firefox? -

web - SVG not rendering properly in Firefox -

java - JavaFX 2 slider labelFormatter not being used -