But before anything else, let me tell a bit about myself...

I do front-end design and development as a profession and I develop games as a hobby.

Spent 8 years doing Flash Development.

But has now fully migrated to HTML5 and JavaScript.

Wings of Lemuria is a small personal project I started way back in 2009 as something to do in my spare time.

First problems encountered

• Choppy animation due to multiple MovieClip instances.
• Flash Display Objects were expensive to process when dealing with multiple animations.

Improving performance

Blitting is a traditional technique used in game development, where you copy pixels and paint it over a bitmap canvas.

Initial results

• Performance was noticeably better
• CPU consumption decreased significantly
• Memory usage increased at the expense of speedy performance

Blitting in Flash doesn't allow you to do bitmap data manipulation like scaling or rotation using bitmapData.copyPixels.

Features in HTML5 that attracted me as a Flash Developer

• Canvas
• Audio
• Video
• Desktop Notifications

Decided to write a quick prototypewith the Canvas 2D API. Using the same game assets that I had before.

Initial results

• Performance matches the blitting implementations in Flash.
• Each drawing operation allowed me to scale and rotate pixel data at minimum CPU cost.
• Writing a rendering library from scratch is tricky and time consuming.

The CreateJS Suite

• EaselJS - Canvas 2D library with display list and sprite sheet support
• TweenJS - Tweening library that integrates with EaselJS's Ticker class
• SoundJS - Sound manager
• PreloadJS - Asset preloader
• Zoe - Tool for exporting SWF animations as EaselJS sprite sheets.

Animating in Flash

Sprite Sheet Output

Writing the game client in JavaScript

• Use AMD for loading modules and dependencies
• Modularize code
• Fix bugs quickly
• Add comments when doing unconventional coding practices and update it as quickly as you can

Basic AMD usage

define(
  moduleId,
  dependencies,
  definition
);

AMD example

define(
  'game',
  ['my-class'],
  function(MyClass) {
    var myClass = new MyClass();
  }
});

Entity Component System

This allows me to create a more de-coupled game architecture without the need of complex OOP.

var entity = factory.create([components]);

Example usage

Entities are objects that interact with the game.

/** entity magic training **/
var wizard = entity.create('Magic');
/** entity with swordsmanship training **/
var swordsman = entity.create('Sword');
/** entity with both magic and sword training **/
var jedi = entity.create('Sword', 'Magic');
/** a jedi entity that succumbed to the dark side **/
var sith = entity.create('Sword', 'Magic', 'DarkSide');

Defining components

Attaching components to entities exposes new sets of APIs.

components.register('Magic', function(entity) {
    entity.firaga = function(enemy) {
      enemy.hp--;
      enemy.burning = true;
    }
    entity.thundaga = function(enemy) {
      enemy.hp--;
      enemy.paralyzed = true;
    }
  });
var toon = factory.create();
var mage = factory.create('Magic');
/** toon takes a damage and is in burning state! **/
mage.firaga(toon);
/** toon takes a damage and is paralyzed! **/
mage.thundaga(toon);

Build the user-interface outside of Canvas

• CSS3 transforms and transitions are hardware accelerated
• UI Animations are easier to maintain in CSS than hardcoded JavaScript
• Concatenate images into one PNG sprite sheet for performance.

About CSS pre-processors

• Helps with maintaining a large modularized CSS code-base
• Reduces redundant style definitions
• Easier to manage
• Nesting, mixins and other goodies

Stylus and Nib

• Minimalist CSS dialect (optional braces, colons and semicolons)
• Arithmetics
• Variables
• Runs on node.js

Final thoughts

• Anytime time you're fixing a problem that's already been solved, you're being inefficient.
• Use available libraries. Read their source code and learn from them.
• If your library is missing a feature, fork the project and contribute.
• Invent something only out of necessity.
• Focus on getting the game done!