Initial codeheart.js impressions
I looked at:
Actually tried to get a test project working with this, but seemed way too over-engineered for my needs.
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.
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.
Not great demos, engine design seemed a bit off to me.
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.
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:
- Created an array where I would add each touch id (as the touch occurred) to the end
- 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.