Pixi vs Hoolib
This is a demo I created to compare the performance of the game engine I've developed with pixi.js, a javascript rendering engine that has become quite popular in the last year or two. When html5 first started becoming used for game development, there weren't a lot of libraries to use for graphics rendering, and the ones there existed were still working out the kinks. For that reason I decided to build by own game engine, called hoolib, to make development quicker and projects easier to debug.
On my desktop PC, both pixi and hoolib can handle up to 1000 stars before frame rates start dropping. That's more than enough for most games. What I'm really interested in is performance on mobile devices since they are usually the bottlenecks when it comes app development. Below are the results. Interesting, so far it appears there isn't a huge performance boost to using WebGL. Also there are some issues to work out with IOS8 and WebGL, since everything appears to be tinted white. Will be testing on more mobile devices and posting results soon.
| Device | # of Stars | Hoolib | Pixi Canvas | Pixi WebGL |
|---|---|---|---|---|
| PC - Firefox | 1500 Stars | 42 FPS | 41 FPS | 43 FPS |
| iPad1 - Safari | 50 Stars | 35 FPS | 43 FPS | -- |
| Android LG 2X - Safari | 50 Stars | 8 FPS | 9 FPS | 17 FPS |
| iPad Air - Safari | 50 Stars | 30 FPS | 50 FPS | 52 FPS |
Click on the following rendering engines to compare the performance of each engine. Keep adding stars (by pressing the "add stars" button) to see how many stars can be added before frame rates start to drop below 60 fps.
