Performance problems

It’s time to really get into performance improvements. I did a bunch of performance experiments before I started, and I sanity-checked a thing or two while I was going, but I never really did serious work on the codebase, always counting on invalidation drawing to solve all my problems.

It didn’t.

Time to roll up the sleeves…

The first stop was obviously playing around a bit with the Chrome and Firefox profilers. I did some inlining of simple functions I was calling a lot. This did improve the performance of the caller routines, in theory, according to the profilers. However, since FPS oscillate a lot when scrolling, and max out at 250 when standing, the effect is not very visible. It seemed to be somewhat visible in mobile, but it wasn’t huge. Or maybe it was wishful thinking.

Also, after the first few improvements, the profilers started giving me weird data.

Chrome is telling me most of the time (20% of the total, with the other 80% belonging to “(program)”) is spent in a function that barely does anything. If I wrap the contents of that function into another function, with “(function() {})();”, the inner function uses almost zero time, as I’d expect, and the outer one still reports 20% (“self” time, not “total”). If I comment out the contents, it still takes 20% of the time, and it’s not even being called that much, compared to others… So that doesn’t make any sense.

Firefox was giving me reasonable data at first, but when I turned on lighting, I get a tremendous slowdown with the profiler on (which I didn’t get without lighting, and also turning on lighting didn’t slow the code down almost at all without the profiler), and it’s reporting times that are clearly off compared to the “profiler off”.

And the ones I wanted the most, the profilers for Android and iPhone, well… They don’t seem to exist, so not much help there…

Now, Chrome and Firefox run more than fast enough, but in the Android and iPhone, it not only runs slower, but it’s visibly obvious that the lightmap calculation is a problem. The lightmap gets recalculated every time a light source changes cells (or changes power), and since the character holds a “torch”, it happens every time you cross a cell boundary. On cell phones, there is a very clear pause when that happens. If you walk a long straight line, you see the character literally stop and stutter every time it passes from one cell to another.

So the lightmap calculation is heavy. This doesn’t surprise me, given that I made the simplest possible implementation of it, and it’s not exactly written in the fastest possible way. What does surprise me is that after making it, I did check how it impacted performance (in Chrome), and it didn’t. At all.

But without a profiler in mobile, untrustable profilers in desktop, and a fluctuating FPS meter as my only measure of performance, it’s kind of hard to make improvements. I made a bunch of little changes, and I have no idea whether they actually made a difference or not. Sometimes it seems they did, sometimes it doesn’t… It’s very frustrating and it feels very hit and miss.

My general feeling at this point is of disappointment (given, mainly, that my magic card didn’t work as I expected). We’ll see what happens, but it seems HTML5 games with a lot of screen action are still not as viable as I expected on mobile. I’ll have to keep experimenting.
Puzzlers and the like should be very viable, I believe, though, and these are the types of games I’m most interested in anyway. So we’ll see…

One thing I did, at this point, was Google around for other “HTML5 games”, to see if at least other people had been able to do cool looking, kind of intensive games in HTML5 that’d work fast enough on my mobiles.
I didn’t find anything even remotely close to what I’m trying to do. Nothing. At all. It’s either tech demos, crappy looking stuff, very, very basic things, or Flash. Lots and lots of Flash that for some reason says it’s “HTML5″
That’s both encouraging and discouraging.

Leave a Reply

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


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">