Jamuary 2017 Start!

Jamuary Banner

Posted on

A few days ago, I started working on some prototype code for a basic Super Nintendo-style 2D RPG made with HTML5, and what better a way to keep it going than to participate in a game jam? So I’m going to post my progress as well as my process of building this prototype RPG for Jamuary (check out the jam for details).

2D Render Engine Progress

Pre Jam Work

I decided to tackle the rendering engine first, since it will allow me to see what’s going on with code changes without having to analyze a lot of data.

To make things “simple”:

  • The game will be tile-based and will use tiles that are 32×32
  • Maps will be created with a combination of tiles
  • Map tiles are layed out on a grid
  • Props (random objects decorating the map) will typically be rendered with 1 tile
  • For some props and most characters, they will be rendered with 2 tiles
  • Props and characters are not locked to a grid

To avoid coding without knowing where I’m going, I first started making some programmer art in GIMP (I’m not an artist). I created a guy and a little room.

First render of a room and character

With that drawn out, I chopped out individual tiles and exported them as a spritesheet, loaded it in with javascript, and used an array to build out the room. The above image is actually from the in-progress rendering engine. This was technically pre-jam progress, since I completed this work at the end of December.

Day 1

With the start of the Jam, I decided to make sure that Characters and Props are drawn in the correct order. So if a Character is in front of a stool, the stool will be under the character. Or if there’s a wall in the room, props and characters will render on the correct side of that wall.

First, I hopped into GIMP and tried to wrap my head around how the draw order would work.

GIMP test to figure out draw order

Since I want a wall in the middle of a room that can cover parts of Characters and Props, I can’t get away with one two-dimensional array with the map data. So I updated the map data to be three two-dimensional arrays and updated the rendering engine to loop over all the map data.

With the map rendering properly, I needed to insert the props between map layers. This was my initial rendering workflow for the map and 1-tile-high props:

  1. Draw the base layer of the map (map[0]
  2. Loop over each row of the second layer of the map (map[1])
    1. Draw the row
    2. Get all props whose bottoms are contained in the row
    3. Sort the props, found in 2.2, by their y values
    4. Draw the sorted props from 2.3
  3. Draw the top layer of the map (map[1])

And it worked (the guy is still being rendered in a dumb way)

Rendering stools with proper draw order

To get 2-tile-high characters and props rendering with the proper draw order, I took a guess that this would work as an update to the previous workflow:

  • In 2.2: don’t just get the 1-tile-high props that are contained in the row, but the bottoms of the 2-high-props too
  • In 3: follow the same flow for 2, but when getting props, get and draw the top tile of 2-tile-high props

And it was pretty close:

Rendering guys with the initial draw order workflow

I just need fix the draw order bug seen in with the middle guy and that center wall. My initial thought was that for the top layer I need to reverse the order of draw so that Characters and Props are drawn before a tile row. When I tried that, the middle guy looked correct, but the bottom-left guy’s head was in the wall.

Since I run into issues if I just draw the top layer of Characters and Props before or after the map tiles, clearly I need to sort the drawing of map, character, and prop tiles by their y values. Here’s an initial swing at that:

First take at sorting all tile drawing by y values

There are two bugs that I see:

  1. The top tile of a 2-tile-high character has incorrect draw sorting for the middle guy
  2. Looks like there’s a little issue with depth sorting and the bottom tile of a 2-tile-high character and a 1-tile-high prop (middle-right guy and the stool-thing)

At the end of that day, I tried to resolve that draw order issue by comparing the full bottom y value of a character with the bottom y value of a tile plus 32 times the map layer, no dice though. But I was done working on this for the day. Hopefully the next time I can get around the draw order issue, but we’ll have to wait and see.

Progress Summary


  • Have some sprites for a room, a guy, and a stool/table/thing
  • Rendering the multi-layered map from a hardcoded array of two-dimensional arrays
  • Rendering 1-tile-high and 2-tile-high props and characters on their correct layers


  • Draw order for the top tile of a 2-tile-high character isn’t working right

Potential plan for the next day of work:

  • Instead of drawing walls and 2-tile-high characters and props in 2 layers, just use 1
  • Instead of using the top layer for the top of walls (which are technically 2-tile-high walls), just use it for tiles that will always be rendered ontop of characters and props

Leave a Reply

Your email address will not be published. Required fields are marked *