Uploaded May 2026 | Updated September 2026, 8 hours ago

---

This video tutorial covers the concept of how to create a metroidvana map in GameMaker. Every good sidescroller/metroidvania has it and now I can offer a simple, scaleable and performative version to you without tanking your performance.

The idea is quite simple, you need two things: Data and an instance displaying that data

first a data structure that holds all your maps information which hold each cells internal values like x,y position, color, if discovered, room id and each walls index (none, simple wall, connector).

Second you need an instance that get the correct center postion and in used event draws 1:1 each cells on a surface with the size of rows/columns of the data structure. That drawing is being stored in the vram as a sprite and once not needed destroyed afterwards. This is how the map becomes very fast and performative since you only have one draw event.

The following parts will be adding extra features like start location, visited/not explored cells aswell as map movement and zooming.


You can find the project file in my discord server under this section:
free-stuff_gamemaker or the first pinned comment by me


👑 Support me and get fresh game art and game maker projects every month:
patreon.com/1upindie

Follow me on:
📸 Instangram: instagram.com/1upindie
🐦 Twitter: twitter.com/1upIndie
💬 Discord: discord.gg/gvr98nb
📜 Udemy: udemy.com/course/become-a-video-game-developer-with-gms-23 (See youtube about page for discount)


0:00 What we will build in 2 parts
2:13 Subscribe
2:29 Need two objects, one holding all data and one using that data to draw the map
3:31 Creating the data structure via constructor with how many columns and rows we need
4:40 Store each new map into an array (here array_Map) or a single variable depending how many maps you want
5:46 Store how many columns and rows this map has
5:58 Create all possible cells and their internal values via a double loop, these are defined as empty and to be overritten by active cells
7:01 Create cell value for x,y postion on the map grid
7:20 Create cell value for color, which defines if this is an active or empty cell
7:50 Create cell value for room to jump to and if discovered
8:56 Create a function overitting a specific cell to turn to active
12:10 Making active map cells with the setup_MapValues function
13:31 part 2, having a user event draw all the stored map values (empty or active) and creating one big sprite from that via sprite_create_from_surface
14:25 Get center x,y, positions of the window or display based on fullscreen mode
15:50 Grab the stored map array and it's internal values, for now the rows and columns
18:15 Create a surface width and height based on the colums/rows times the size of one cell (here 32px), then create a surface with these values, draw all cells, store it into variable to hold the newly create sprite and clear it afterwards
18:02 Define the a center x,y fixpoint where the map sprite has to be drawn based on the window/display center minus the sprites width/heigtht divided by half multiplied by the zoom factor
18:53 get through double loop all cells, get their map grid x,y values times 32 to draw each cell correctly
19:28 Get each cells color, discovered value
20:03 If this cell has a color assigned, it is active and draw a colored rectangle plus the walls with their sprite indexes
21:15 If the cell has no color assigned, draw the default empty sprite
22:05 Always get rid of the sprite created in the destroy event later on to avoid memory leaks