{"id":406,"date":"2025-07-08T16:44:44","date_gmt":"2025-07-08T06:44:44","guid":{"rendered":"https:\/\/nonlinearexperience.com\/?p=406"},"modified":"2025-07-27T15:56:14","modified_gmt":"2025-07-27T05:56:14","slug":"maps-and-levels","status":"publish","type":"post","link":"https:\/\/nonlinearexperience.com\/index.php\/2025\/07\/08\/maps-and-levels\/","title":{"rendered":"Maps and levels"},"content":{"rendered":"

Maps and levels<\/h1>\n\n\n

See also: layers<\/a><\/p>\n\n\n\n

System:<\/p>\n\n\n\n

loading\/unloading maps<\/p>\n\n\n\n

Tile Buffer<\/h2>\n\n\n\n

A More Efficient Tile Map<\/a><\/p>\n\n\n\n

A tile buffer – draw once, reuse many times<\/p>\n\n\n\n

Draw map onto a buffer canvas – then render the buffer canvas – and this is what can be animated?<\/p>\n\n\n\n

Logical layers<\/p>\n\n\n\n

Tile size<\/p>\n\n\n\n

Map size<\/p>\n\n\n\n

loading levels and different rooms etc.<\/h2>\n\n\n\n

a 2 way door – can be lockable – other properties? destroyable – changeable (e.g. destination changes)<\/p>\n\n\n\n

predictive loading?<\/p>\n\n\n\n

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<\/p>\n\n\n\n

Multi-rooms<\/h2>\n\n\n\n

An approach – Multi-room Platformer Game Tutorial with JavaScript and HTML Canvas<\/a><\/p>\n\n\n\n

Collision blocks<\/h3>\n\n\n\n

map-based blocks that players can’t travel through<\/p>\n\n\n\n

well, maybe in certain directions – see: Directional Collisions<\/a><\/p>\n\n\n\n

Working with Tiled data<\/h3>\n\n\n\n

creating the map<\/p>\n\n\n\n

export all the data<\/p>\n\n\n\n

in the game engine – for each layer in ’tiled’, create a 2d array<\/p>\n\n\n\n

need to know the width of the game in tiles<\/p>\n\n\n\n

<\/p>\n\n\n\n

Change map<\/strong><\/h6>\n\n\n\n

In Overworld.js<\/strong>, change map using: <\/p>\n\n\n\n

{type: “changeMap”, map:”DemoRoom” }<\/p>\n\n\n\n

in OverworldEvent.js<\/strong><\/p>\n\n\n\n

changeMap(resolve){<\/p>\n\n\n\n

   this.map.overworld.startMap(window.OverworldMaps[this.event.map]);<\/p>\n\n\n\n

   resolve();<\/p>\n\n\n\n

}<\/p>\n\n\n\n

in Overworld.js<\/strong><\/p>\n\n\n\n

startMap(mapConfig){<\/p>\n\n\n\n

   this.map = new OverworldMap(mapConfig);<\/p>\n\n\n\n

   this.map.overworld = this;<\/p>\n\n\n\n

   this.map.mountObjects();<\/p>\n\n\n\n

}<\/p>\n\n\n\n

Change map transition<\/strong><\/h6>\n\n\n\n

Fade to black – change map – fade from black<\/p>\n\n\n\n

Use iris would be better<\/p>\n\n\n\n

Fade out: black – 1.2s<\/p>\n\n\n\n

Fade in: black – 1.2s<\/p>\n\n\n\n

<\/p>\n\n\n\n

Resources<\/h2>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n


<\/p>\n","protected":false},"excerpt":{"rendered":"

See also: layers System: loading\/unloading maps Tile Buffer A More Efficient Tile Map 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"wp-custom-template-nlx-the-knowledge-page","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-406","post","type-post","status-publish","format-standard","hentry","category-the-knowledge"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/comments?post=406"}],"version-history":[{"count":3,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/406\/revisions"}],"predecessor-version":[{"id":582,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/406\/revisions\/582"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=406"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=406"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}