Here are the notes for the content of my FITC Amsterdam 2012 presentation Games for Kids: Flash vs HTML5. There are links here to some of the demos, notes and references.
I set myself the objective of learning best practice in game design using HTML5. To best discover all of the foibles and dark corners of this new technology I set myself the constraint of using NO libraries. I wanted to build a game that would work across many devices, and exhibit some sophistication. The presentation details the discoveries made on this journey, showing how I’ve optimised the game engines – and some of the hacks that I’ve felt necessary to apply.
Demo Panel for Session - Click through
While experimenting with HTML5 touch I found some Android devices had a terrible response. It took me a while to realise that it was my display method, Canvas, that caused the poor performance. Moving to displaying with DOM gave me a workable response on most devices.
Multi-touch Ball Physics
A first quick attempt at gameplay interaction was to build a simple ball physics engine. This gives many options in game design and allows for good utilisation of the major strength of mobile devices: touch input. Getting this to work across multiple devices and operating systems gave me confidence that I could achieve a consistency of performance.
Eggy Eggy Pig - visual design by Eloisa(9) & Lola(7)
With the help of my daughters, I set about designing and building a platform game. Eggy Eggy Pig. The requirement was for platforms and surfaces that could run at any angle, as well as spritesheet animations, triggered interactions, collectables and parallax scrolling. Of course control method was key too.
Optical Flow with Lucas Kanade (Flash)
After looking what can be done with HTML5, it is important to understand what can’t be done. Any game project should start with the question ‘what is the appropriate technology to achieve our objectives?’. In many cases the answer will not be HTML5. I show a couple of cases where Flash could be the only solution, including a look at Maestro Flash – a production implementation of the Lucas Kanade optical flow method.
References:
- Vic20 Emulator – Vice – viceteam.org
- CBBC – bbc.co.uk/cbbc
- CBeebies – bbc.co.uk/cbeebies
- RaphaelJS raphaeljs.com/
- JSPerf.com – jsperf.com
- Lucas-Kanade Method – wikipedia.org
- Notepad++ – notepad-plus-plus.org/
- Jesse Freeman – HTML Game Development(ImpactJS)
- SoundManager2 – schillmania.com/projects/soundmanager2
- Rover – theroverapp.com
- OnLive – onlive.co.uk
- FITC Amsterdam 2012 – FITC.ca
Swingpant's Game Lab 