Tag Archives: SoundJS

Building HTML5 canvas based video game

via Building HTML5 canvas based video game | Toptal.

Game development is one of the more interesting, advanced programming techniques that constantly challenges the software development industry.

There are many programming platforms used to develop games, and there are a plethora of devices to play them on, but when it comes to playing games in a web browser, Flash-based development still leads the way.

Rewriting Flash-based games to HTML5 Canvas technology would let us play them on mobile browsers as well. And, with Apache Cordova, we could easily wrap them into cross platform mobile game apps.

Folks at CreateJS set out to do that and more.

EaselJS, part of CreateJS’s suite, makes drawing on HTML5 Canvas simple. Imagine building custom data visualization with high performance and thousands of elements. Scalable Vector Graphic (SVG) is not the right choice, because it uses DOM elements. Browsers become overwhelmed when, at around 600 DOM elements, initial renderings, re-draws, and animation become expensive operations. With HTML5 Canvas, we can easily get around these problems; Canvas drawings are like ink on paper, no DOM elements and their associated costs.

This means that Canvas based development needs more attention when it comes to separating elements, and attaching events and behaviors to them. EaselJS comes to the rescue; we can code as if we are dealing with individual elements, letting EaselJS library handle your mouse-overs, clicks, and collisions.

SVG-based coding has one big advantage: SVG has an old specification, and there are a lot of design tools that export SVG assets for use in development, so that cooperation between designers and developers works well. Popular libraries, such as D3.JS, and newer, more powerful libraries like SnapSVG, bring much to the table.

If designer-to-developer workflow is the only reason you would use SVGs, consider drawscript. This is an extension for Adobe Illustrator (AI) and generates code from shapes created in AI. In our context, this extension generates EaselJS code or ProcessingJS code, both of which are HTML5 Canvas-based libraries

Bottom line, if you are starting a new project, there is no reason to use SVGs anymore!

SoundJS is part of the CreateJS suite; it provides a simple API for HTML5 Audio specification.

PreloadJS is used to preload assets such as bitmaps, sound files, and the like. It works well in combination with other CreateJS libraries.

EaselJS, SoundJS, and PreloadJS make game development super easy for any JavaScript ninja. Its API methods are familiar to anyone who used Flash-based game development.

“This is all great. But, what if we have a team of developers converting a bunch of games from Flash to HTML5? Is it possible to do that with this suite?”

The answer: “Yes, but only if all of your developers are at Jedi level!”.

If you have a team of varying skill set developers, which is often the case, it can be a little scary to use CreateJS and expect a scalable and modular code. What if we bring together CreateJS suite with AngularJS? Can we mitigate against this risk by bringing in the best and most adopted front-end JS framework?

Yes, and this post will teach you how to create a basic game with CreateJS and AngularJS!