Karl Schmidt - Fractional CTO

Initial codeheart.js impressions

I’ve been meaning to get some experience with building web-based games - at Eruptive Games I worked on Citizen Grim, a Flash-based web game, but the ‘new hotness’ is HTML5. Which as far as I can tell just means modern browser + Javascript stuff. Also the promise of write-once, deploy on any modern PC browser (Windows/OSX/Linux), or any mobile browser is a naive but attractive one 🙂 Anyways, I started looking around at ‘HTML5 game engines’ to play around without getting stuck on basic building-blocks kind of stuff.

I looked at:

playn

Actually tried to get a test project working with this, but seemed way too over-engineered for my needs.

ImpactJS

One of the few engines with functioning demos that were pretty impressive, and they definitely have their sales-pitch-y landing page set up nicely, but I didn’t feel like paying $100 to make a web game. I’m sure it’s worth it for some people though.

CraftyJS

Not sure why I didn’t go with this one - probably because the examples are a bit hit-and-miss, and it doesn’t mention support on mobile platforms.

Jaws

Not great demos, engine design seemed a bit off to me.

LimeJS

This one had nice demos that seemed to also work well on iOS - but once I started the guide I didn’t like what I saw. A python script to create your project? I was looking for something minimal - this wasn’t it.

codeheart.js

Finally something that seemed a bit more what I was looking for. All the demos were just functional enough to demo the engine, and it was very simple to get something up and running. No wonder, since the author is actually a graphics programmer who has worked at NVIDIA - I’m guessing the closest to the professional games industry of any of the authors of the Javascript libraries I checked out. Many of the architectures I looked at were quite over-engineered, and had designs that resembled something you would find more in web or application development.

I wanted to try making a simple ‘memory matching game’ (remember the mini-game from Super Mario Bros 3?), so I started out with the ‘Smackvole’ example. It didn’t take very long to make a 4x4 grid instead of 3x3, and add 8 pairs of ‘cards’, randomly shuffle them on start-up, and allow you to only reveal a second card if it matched the first. I was able to get a basic game loop functioning with a working ‘wrong card 0.5 reveal’ in about 2 hours of work.

The only problems I encountered were on iOS and Android, where I noticed an occasional black flicker on iOS devices (not a big deal), but on my iPhone 4S, and apparently on an Android tablet (I had my Dad test it out on his) there was some sort of ‘double-click’ behaviour occurring. When you would touch a card, most of the time it would ‘flip’, but then ‘flip’ again right away.

I was using onTouchStart for input, and one of the incoming parameters was a ‘touch id’, so I thought I would check what the ids were as I touched the screen. To debug this issue, I did the following:

  1. Created an array where I would add each touch id (as the touch occurred) to the end
  2. Debug drawing code that drew text including the last 2 id values in the array

I noticed on my PC browser, the ids were always -400 (and the problem didn’t occur here). Looking through the codeheart.js code, I found that mouse events are always assigned that value. Ok, so that makes sense. When I ran the game with the debug code enabled on my iPhone, I found that there were long unique numbers but also -400 showing up. Ah, so the mobile browser is sending a ‘mouse click’ AND a ‘touch event’. Makes sense. Although why did codeheart.js listen for both on a mobile device? No idea, that doesn’t make sense. So I went into the codeheart.js code itself and changed that. I just made it ignore when it received a mouse event, if it was on a mobile device.

I’m happy I picked codeheart.js as my starting point. It is simple to setup, and powerful enough to let me play around (quite quickly, I might add) with making little games. I was pleased with how quickly I was able to create a simple card flipping game that works across browsers and devices.

#debugging #engine #javascript #technology

Join my Newsletter

Get articles like these in your inbox.

I won't send you spam. Unsubscribe at any time.