Recently I read a comment on a blog along the lines of "why buy any HTML5 tools? It's really easy to do it yourself in javascript". I think this is an interesting question, so today I want to talk a little about how using Construct 2 to make HTML5 games compares to writing those games "by hand" - in Javascript and HTML. There are some obvious differences, but some more hidden advantages to using Construct 2. So what exactly is Construct 2 doing for you? How does writing the Javascript code yourself compare?
The obvious things
First of all, the most obvious thing is you have to know how to program to write HTML5 games in Javascript. Construct 2 lets you skip all the coding using the event system, which can be a lot faster too once you've gotten used to it. Let's suppose you went on anyway to learn Javascript. It's not a bad language, but it has lots of quirks that might cause you stumbling blocks (see how long that list is!). On top of that, different browsers have their different quirks, so you'd also have to learn workarounds for various browsers.
Next most obvious is programming is all done by text. This means you don't have anything resembling Construct 2's visual editors. Instead of visually designing levels, often programmers resort to typing in long lists of object co-ordinates. Then, imagine setting an object's collision polygon by typing in each point's co-ordinates, or writing code to run animations! Some programmers get around this by writing their own tools to help, but then that's even more work on top of designing your game! You could do an awful lot of work on your tools before you've even started the game. Construct 2 has these visual tools built in already. And imagine if you didn't have any tools - it's incredibly hard to be productive typing in lists of co-ordinates, and hardly intuitive.
Defining a level via javascript code vs. Construct 2's visual editors (below)
There's also reasonably complicated math in the average game. Do you know how to program a test for polygon intersection? How about the math necessary to work around the quirky way HTML5 canvas wants to display a rotated tiled texture? It's done for you in Construct 2. The behaviors are also surprisingly complex. Take the Platform behavior. You can see its source in the exporters\html5\behaviors\platform subfolder of the install path. It's about 600 lines of Javascript, taking care of many complicated aspects like push-out algorithms, slopes, moving platforms, and so on. If you're writing a platform game yourself, you're going to have to re-do all that work, and remember you'll be finding and fixing bugs along the way, as we've done. (We're happy to say our platform behavior works pretty well now!)
Don't forget Construct 2 helps you encode all your audio to both .ogg (all OSs) and .m4a (Windows 7+ only) to help reduce the download size and cover all browsers, since there isn't one format that works in all browsers.
The less obvious things
There are even some low-level technical advantages too. Suppose you've braced yourself: you're going to learn the language and its quirks, design your own tools, write all the math and movements, encode audio yourself, and so on. There are still two more things you need to get right.
First, will it run fast? Performance in Javascript is difficult. Your algorithms all have to be written optimally or browser engines will struggle. Construct 2's engine also takes advantage of new Javascript features like object sealing which helps guarantee the browser will run the code as fast as possible. Are you on top of the latest revisions to the Javascript standard?
Further, Javascript is a garbage-collected language. That means creating objects allocates memory, but the programmer doesn't say when it's released. Instead, the browser occasionally decides to search for the bits of memory which are no longer being used, and free them. That's called 'garbage collection'. Unfortunately garbage collection can take a lot of CPU time, and even cause your game to become noticeably jumpy, or even regularly freeze up momentarily! That's very annoying for action packed games. There are ways to work around this, but it can be difficult to factor this in to your own code. But don't worry! We've already optimised Construct 2's engine to create very little garbage. Even destroying and later creating a whole object doesn't leave the old object as garbage - it's recycled. So your games should very rarely have garbage collection pauses.
Finally, you want your script to have a small filesize. Downloading large scripts can leave users waiting and getting bored. Also, you might not want anyone to steal your game's code. Construct 2 uses Google's 'Closure Compiler' for Javascript. This simultaneously compacts the script reducing the filesize, and renames everything in the script to random obscure names, making it extremely difficult for anybody to understand or reverse-engineer the code. It works so well Construct 2's script overhead is about 60kb. That's less than jQuery, and probably about the size of the image for your player's first animation frame. Did I mention to get the best compacting and obscuring you have to use the 'Advanced Optimization' mode, which imposes stringent limitations on the way you write your Javascript? That's another hoop for the Javascript programmer to jump through - but of course, the Construct 2 engine is already written for this.
Some of Construct 2's output javascript, compressed and mangled by Google's Closure Compiler Advanced mode. Not easy to reverse engineer!
One more thing - do you want physics in your game? Have you got code to decompose concave polygons in to multiple convex polygons so physics collisions work correctly? Have you learned about Box2D's fixtures, bodies, joints, correct world stepping, and so on? If you want physics in your HTML5 game, that's another whole can of worms.
Construct 2 does it for you
So spare a thought for the Javascript game programmer as you're working on your Construct 2 game. It's not easy for them. There are plenty of hurdles. Perhaps that commenter may have some new appreciation for the great deal Construct 2's Javascript runtime does for you behind the scenes. A surprising amount of work has gone in to it: optimisation, browser quirks, algorithms, math and more - not to mention the easy-peasy visual editors you get on top of that. It's not just a time-saver (and a big time-saver at that) - there are real technical advantages too. So I hope that quells any doubts over Construct 2's utility. It's not some thin Javascript library: it's a complete development system, and it's doing a whole lot more for you than you might have thought.