I recently searched for a 2D-Javascript game engine and came by this site: http://html5gameengine.com/. It lists various game engines. It seems their default sorting is “by popularity”. So let’s have a look at the first four entries. Construct 2 is a “whole editor, bring everything and just click your logic”-framework. I saw a screencast some days ago about it. It’s really cool for guys that don’t wanna do it “themselves” 😀 (no offense – it’s just to heavy-weight for me). Impact has a 99$ fee I didn’t want to pay at startup and EaselJS looks really cool, but was to much for me to start with (It’s part of CreateJS and that one brings sound, tweening and even a separate preloader). So I decided for PixiJS (after two colleagues, which used that one as well, told me it was a good lib).

Fun-fact: If you sort the list by “rating”, you’ll get pixi at the top ;-).

While some of the other frameworks bring “all you need” to the party, Pixi (http://www.pixijs.com/) just focuses on the rendering. They claim to be “the fastest” … that’s a good slogan, which I’ve already read several times, but if you read the discussions in the forum of Pixi, they’re always consider things like “we could do that, but that’s slower – we should go without that”.

Unfortunately the reason I read this was because I searched for shaders. I was told that they’re just gonna enable shaders for WebGL, but not for the canvas fallback (because Canvas doesn’t support them and they’d have to re-implement that behavior themselves). Even though they’re normally “It wouldn’t work in both ways, so we don’t implement it”, they seem to make an exception for the shaders, so you can use them if you’re really sure. In the documentation (which is a minus point, because it’s not really good maintained, but there’re several example projects where you can take the information from), you can see that it’s just offered for that one case and you won’t get the same functionality in the fallback if you’d use that feature.

As I tried to figure out whether I want to use Pixi, I just had written some custom clearRect logic for my own canvas script. So I wanted to check how the redraws in Pixi were handled … while I just re-rendered the area I wanted to change, Pixi always refreshes the whole area (you can see that in the chrome-dev-tools (F12 -> rendering -> Show paint rectangles).

I guessed it wouldn’t be that nice to have that behavior and so I searched for performance measurements of Pixi … and they all said: If you use WebGL, your performance will keep up … if you go to the fallback x00 (think it was about 600) items will tear down your framerate.

So I decided to stay with Pixi for the moment … and if I should realize at any time, that Pixi is not as good as I currently hope, the object model will save me … you just modify existing objects and the render-loop of pixi redraws them. So If I’m required to replace Pixi, my model will already be nice and clean so that it shouldn’t be a big deal.