Template: Load and Save Large Tilemaps in Localstorage

  • 10 favourites

Attached Files

The following files have been attached to this tutorial:



Download now 197.02 KB


2,557 visits, 3,263 views



This tutorial hasn't been translated.


This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Often times large world maps are difficult to manage. In this tutorial I have created a sample project that allows you to automatically save and load tilemaps inside the Local Storage. Creating a very large map in one layout, and rendering it in one go consumes a lot of memory. Not to mention if you have collision checks thus adding additional processing cycles on the large tilemap. The solution for this is to create small sized tilemaps and generating them on demand, and destroying the tilemap objects when it is not visible in the screen.

Below are the project content and the mapping of layout to event sheet.

Game -> 01 Game Event (includes A0 Tilemap Main)

0M World Map 1 -> A1 Tilemap Loader

0M World Map 2 -> A1 Tilemap Loader

Preloading Event

This event sheet A1 Tilemap Loader is used to store the tilemap and sprite objects to Local Storage. This event sheet also checks version number to ensure that the loaded tilemap and sprite objects are the latest versions.

Rendering and Loading Event

This event sheet A0 Tilemap Main is responsible for loading the current map to a Dictionary object from Local Storage. The data is loaded to a Dictionary to allow faster access and rendering cycle. Local Storage is only accessed if there is a change in World Maps. The tilemaps are rendered based on 8 adjacent axis, and the center axis. Rendering the axis allows seemless movement and the impression that the map is limitless.

Game Event

Initially player will be position based on the defined coordinates, and wait for the tilemaps to be loaded in the local storage. After the tilemaps are loaded, it will then be generated by calling the function "Tilemap.CreateAdjacentTiles(Player.axis_x,Player.axis_y)".

Tip in generating huge maps

This tilemap generation approach increase overall performance and increase design flexibility. One can use this method to auto-generate maps similar to this arcade game, create rouge dungeon maps, infinite game maps, diverging or transforming maps with learning algorithm. To read more related topic check my pinoypixel devlogs at this link.



Download now 197.02 KB

  • Order by
Want to leave a comment? Login or Register an account!