Template: Load and Save Large Tilemaps in Localstorage

Favourite 4 favourites
Tutorial written by pinoypixelOriginally published on 2nd, March 2017

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.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.


androidpro 2,669 rep

Hello and thank you for this great tutorial. can you please provide a capx example ?

Thursday, March 29, 2018 at 1:58:11 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.