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):