Maps and levels
See also: layers
System:
loading/unloading maps
Tile Buffer
A tile buffer – draw once, reuse many times
Draw map onto a buffer canvas – then render the buffer canvas – and this is what can be animated?
Logical layers
Tile size
Map size
loading levels and different rooms etc.
a 2 way door – can be lockable – other properties? destroyable – changeable (e.g. destination changes)
predictive loading?
if player is heading towards a door – door has a sensor a certain distance away from it that detects approach, and loads into level cache – would remove whatever is in there
Multi-rooms
An approach – Multi-room Platformer Game Tutorial with JavaScript and HTML Canvas
Collision blocks
map-based blocks that players can’t travel through
well, maybe in certain directions – see: Directional Collisions
Working with Tiled data
creating the map
export all the data
in the game engine – for each layer in ’tiled’, create a 2d array
need to know the width of the game in tiles
Change map
In Overworld.js, change map using:
{type: “changeMap”, map:”DemoRoom” }
in OverworldEvent.js
changeMap(resolve){
this.map.overworld.startMap(window.OverworldMaps[this.event.map]);
resolve();
}
in Overworld.js
startMap(mapConfig){
this.map = new OverworldMap(mapConfig);
this.map.overworld = this;
this.map.mountObjects();
}
Change map transition
Fade to black – change map – fade from black
Use iris would be better
Fade out: black – 1.2s
Fade in: black – 1.2s