Game Static Maps 2019 | Crit Russell

September 16, 2019

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

© Crit Russell