03-19-2025, 03:54 AM
Part 7 - Using the Map Maker
In Part 4 we looked at how to create a map programmatically using the GX API. In this section we'll look at how to create the same simple map as an introduction to using the GX Map Maker. This tool aims to make it easier to create and maintain the maps used in your game projects. This will set us up to build out the rest of our level.
To get started, you can launch the GX Map Maker from this URL:
https://boxgaming.github.io/gx-mapmaker
Let's create a new map by selecting File -> New. This will show us the new map dialog. We'll initially use the same tile dimensions (16 columns by 9 rows) and start with one layer. We'll also want to select the same tileset.png image we used in Part 4 and leave the default values of 16 x 16 for the size of the tiles.
This will create a new map and load the tileset in our tile palette in the right panel. This tileset is pretty small so we may want to zoom in the tileset and map views using the Tileset -> Zoom In and Map -> Zoom In menu options.
Click a tile in the tileset panel to select it as the active brush. The selected tile will be framed with a yellow square and the tile's id will be displayed at the bottom of the panel. Once a tile is selected it can be placed on the map at the desired location by clicking on the map.
You can either place a single tile at a time in this manner, or, hold down the left button and move the mouse to paint continuously with the selected tile.
Multiple tiles can be selected as a block. Click and drag the mouse to select a block of tiles. The map cursor will now be resized to the size of the tile selection.
You can also copy tiles from a selection on the map. Hold the Shift key and drag the mouse down and to the right to select the tiles you wish to copy. A yellow border will be displayed around the block of tiles to copy. The cursor will change to the size of the tile selection. Clicking on the map will paste a copy of the selected tiles at the current cursor location.
If you place a block in the wrong place, you can delete it by pressing either the X or Delete key.
Using these basic techniques let's recreate the first layer from Part 4. Then we can create a new layer by pressing the "+" button on the far right side of the Layers panel. This will add a "Layer 2" to the list below. To make this the active layer for editing click the on the "Layer 2" label. We can now add our tree and barrel from Part 4 to the map.
Clicking the eye icon on a given row in the Layers panel will toggle the visibility of that layer. You can also lock a layer for edit so you don't accidently make changes to it when you don't intend to.
Once you've got your masterpiece complete you can save it with the File -> Save menu option. This will prompt you to download the file. Let's name it "platformer.gxm".
Loading the Map
Let's look at using this map in our work-in-progress. First, we'll create a new folder in our Files tab named "map" and then drop in our "platformer.gxm" file. We can now remove all of our map Data sections as well as our LoadMap function from our code. We can also remove the tileset.png from our img folder as it is now contained within our map file.
Then we can replace our call to the LoadMap function with the GXMapLoad method:
Here's the complete set of changes. This is the first step where we actually have less code than the last:
In Part 4 we looked at how to create a map programmatically using the GX API. In this section we'll look at how to create the same simple map as an introduction to using the GX Map Maker. This tool aims to make it easier to create and maintain the maps used in your game projects. This will set us up to build out the rest of our level.
To get started, you can launch the GX Map Maker from this URL:
https://boxgaming.github.io/gx-mapmaker
Let's create a new map by selecting File -> New. This will show us the new map dialog. We'll initially use the same tile dimensions (16 columns by 9 rows) and start with one layer. We'll also want to select the same tileset.png image we used in Part 4 and leave the default values of 16 x 16 for the size of the tiles.
This will create a new map and load the tileset in our tile palette in the right panel. This tileset is pretty small so we may want to zoom in the tileset and map views using the Tileset -> Zoom In and Map -> Zoom In menu options.
Click a tile in the tileset panel to select it as the active brush. The selected tile will be framed with a yellow square and the tile's id will be displayed at the bottom of the panel. Once a tile is selected it can be placed on the map at the desired location by clicking on the map.
You can either place a single tile at a time in this manner, or, hold down the left button and move the mouse to paint continuously with the selected tile.
Multiple tiles can be selected as a block. Click and drag the mouse to select a block of tiles. The map cursor will now be resized to the size of the tile selection.
You can also copy tiles from a selection on the map. Hold the Shift key and drag the mouse down and to the right to select the tiles you wish to copy. A yellow border will be displayed around the block of tiles to copy. The cursor will change to the size of the tile selection. Clicking on the map will paste a copy of the selected tiles at the current cursor location.
If you place a block in the wrong place, you can delete it by pressing either the X or Delete key.
Using these basic techniques let's recreate the first layer from Part 4. Then we can create a new layer by pressing the "+" button on the far right side of the Layers panel. This will add a "Layer 2" to the list below. To make this the active layer for editing click the on the "Layer 2" label. We can now add our tree and barrel from Part 4 to the map.
Clicking the eye icon on a given row in the Layers panel will toggle the visibility of that layer. You can also lock a layer for edit so you don't accidently make changes to it when you don't intend to.
Once you've got your masterpiece complete you can save it with the File -> Save menu option. This will prompt you to download the file. Let's name it "platformer.gxm".
Loading the Map
Let's look at using this map in our work-in-progress. First, we'll create a new folder in our Files tab named "map" and then drop in our "platformer.gxm" file. We can now remove all of our map Data sections as well as our LoadMap function from our code. We can also remove the tileset.png from our img folder as it is now contained within our map file.
Then we can replace our call to the LoadMap function with the GXMapLoad method:
Code: (Select All)
...
GXSceneCreate 256, 144
GXSceneScale 2
' Create the map
GXMapLoad "map/platformer.gxm"
' Create the player
Dim Shared player As Long
...Here's the complete set of changes. This is the first step where we actually have less code than the last: