In our last blog post we analysed Construct 2's HTML5 performance. As a follow up, we've adapted the test to run in some different tools to measure their performance - and we've found Construct 2 is easily the fastest out there.
Construct 2's performance
To summarise the results in the last post: we've made a test creates as many sprites on-screen as possible before the framerate drops to 30fps. Here's the Canvas 2D test made in Construct 2, and there's also the WebGL-accelerated version. If you want the full low-down, be sure to read the last entry! To simplify the results, we'll measure the results in the top three browsers (Internet Explorer 9, Firefox 8 and Chrome 15) and take an average of the three. IE9 does not support WebGL so our WebGL measurements will average the results from just Firefox 8 and Chrome 15.
Below are the averaged results for Construct 2 from the last entry, for both the Canvas 2D renderer and the WebGL renderer. On average WebGL is 2.8x faster, and some gains for individual browsers were even bigger.
GameMaker:HTML5 results
We'll be comparing results with GameMaker:HTML5 by Yoyo Games, the Mac-only tool GameSalad, and Stencyl, a newer Flash-based tool. First up is GM:HTML5, a newly released version of the well-established and relatively old Game Maker which has a new HTML5 export option, and is more expensive than Construct 2 currently priced at $99.
We've done our best to make sure these tests are fair. You can try the project for yourself online here, and download the GMX project here if you want to judge for yourself.
On Firefox the FPS meter seemed to get stuck at 60 even when it was obviously running at a crawl, so we ran the test a couple of times to get the figure. GameMaker:HTML5 does not yet appear to support WebGL, so all these results are for the slower Canvas 2D renderer. Its average result for the three browsers is 2483, which is about 38% slower than Construct 2's average 2D renderer performance. We won't embarrass them by comparing their result to our WebGL renderer!
GameSalad
Notably, GameSalad only runs on Mac. Considering Construct 2 only runs on Windows this may remove it as an option for many Construct 2 users, but they recently released a HTML5 export option anyway, and since HTML5 games also run on Windows we thought it would be interesting to measure to see how well their games perform.
GameSalad don't appear to let you upload your HTML5 game where you want - it can only be on their arcade, so we can't upload it to our server. So the test is on their arcade here, hopefully they won't remove it! (That might set a bad precedent!) GameSalad appears to support WebGL since it appears to log the renderer being used to the browser console, and Firefox and Chrome log WebGL, and IE9 logs Canvas 2D, like you'd expect. So how does it do?
Despite seeming to support WebGL, Gamesalad appear to have been unable to take advantage of any of its performance benefits. IE9's 2D renderer is on-par with Chrome 15's WebGL rendering, and Firefox 8 only manages a few hundred objects. Construct 2's 2D rendering on average is about 3.8x faster. Since the average WebGL result for GameSalad is just 830, Construct 2's WebGL rendering on average is about 14x faster. Considering the Gamesalad Pro subscription is $500 a year, perhaps their users should consider a $500 Windows laptop and a $32 early-adopter license for Construct 2 — both one-off costs!
Stencyl
Stencyl currently exports to Flash, which was shaken by Adobe's recent announcement to abandon Mobile Flash in favour of HTML5 tools. Still, powered by Flixel, it makes an interesting comparison to HTML5 performance. Stencyl have announced plans to support HTML5, but there's no sign of it yet. You can find the SWF here. I would share the project if I could figure out either where Stencyl saved it or how Save-As works! Since Flash is pretty much just Flash no matter what browser, it only has one result, which I've compared to Construct 2's 2D renderer only (again, not including WebGL).
Stencyl doesn't seem to let the FPS meter drop below 30, but it obviously gets a lot slower after, so the figure is for when it hits 30. Remember that's not including the much-faster WebGL renderer - and Construct 2 is still 3.5x faster than the Flash-powered Stencyl. I think I can hear echoes of "HTML5 is slow" disappearing in to history.
Overall results
Let's put everything in one graph to show the scales involved.
I think that speaks for itself. If you want to make high performance HTML5 games, it's an easy choice to make.