Game Static Maps 2019 | Crit Russell

Game Static Maps 2019

In the Game Workshop 2019 post I needed a way to handle making maps out of 32 by 32 assets provided by the file `assets/sandwater.png` in the Project Repository.

After a ton of research I landed on the following solution.

If I envision that sandwater.png has a 32 by 32 grid applied:

• The first region has an upper-left coordinate of `{x: 0, y: 0}`
• The next region to the right has an upper-left coordinate of `{x: 32, y: 0}`
• The region below the first region has an upper-left coordinate of `{x: 0, y: 32}`

We could create a static map using values like the following:

``````const map = [
'0,0', '32,0', '0,32'
]
``````

But, I wanted to be able to “see” the map by just looking at this data. So I can also encode these `x,y` values into letters. We just need a way to translate the letters into the correct location on the sprite sheet.

I did the simple thing and first assigned letter combos to each region of the sprite sheet:

And then created a system to decode those values:

``````const decoder = {a: 0, b: 32, c: 64, d: 96, e: 128, f: 160}

function decode(letters) {
const x = letters.charAt(0), y = letters.charAt(1)

return {x: decoder[x], y: decoder[y]}
}
``````

And finally we have a visual representation in data of the final visual making it easy to hand edit the data and experiment (32x32 assets on a 512x512 stage):