Step 6 : Draw Mini MAP

We want to draw the map over the virtual 3D environment. This step will make easier the rest of the coding. The mini-map will be displayed on the top right of the screen. The mini-map will be overlayed over the 3D virtual environment. The whole map can be huge if it represents a game level, for instance. So we will will draw on the screen only a part of the mini map. The part of the mini-map to be displayed will have a size of 32*24 cells (Grid coordinates). Each cell will have be a square of 16 pixels width (unit coordinates).

MAP_MAX_WIDTH=32;
MAP_MAX_HEIGHT=16;
minimapdisplaywidth = MAP_MAX_WIDTH*16;
minimapdisplayheight = MAP_MAX_HEIGHT*16;

We need also a vertical and horizontal offsets.
xoffset = canvas width - minimapdisplaywidth
yoffset = 0

Any coordinates can be expressed in the Mini-map coordinates system or the unit coordinates system.

xunit = xmap*64/16+xoffset
yunit = ymap*64/16+xoffset

xmap=xoffset+xunit*16/64
ymap=yunit*16/64


			fromUnitCoordinatesToMiniMapCoordinates : 	function(xunitplayer,xornot){
					var xminimap=Math.floor(this.mini_map_size*xunitplayer/this.wallsize);
					if(xornot==1){
						xminimap=xminimap+this.xminimapoffset;
					}
					return xminimap;
			},

We are all ready to draw the mini-map overlayed with the 3D environment.

Next: Step 7: Move forward/backward

step7.html

Back: Step 5

step5.html