1. HTML5 Game Development In-depth
Richard Davey, Photon Storm Ltd.

2. What we’ll cover Introduction Choose the platform
When to use DOM / CSS
Preparing Graphics
Preparing Audio
Game Frameworks
Physics Libraries
Distribution

3. Who am I? Who do we build games for?
Director, Photon Storm Ltd. 50+ HTML5 games in 20 months.

4. Choose the platform

5. Desktop browser
Mobile browser
Native desktop
Native mobile
Web View
Wii U

6.   Desktop browsers Mobile browsers Fast!  Great audio Webcams
3D / WebGL
Lots of memory
Wired / broadband
Great tools
Slow! 
Terrible legacy audio
No camera yet
Limited 3D / WebGL
Very little memory
Wireless / 3G
Very few tools

7. When to use DOM / CSS You need IE8 support Text or UI heavy game
Relatively simple game
Doesn’t need any pixel effects
Read: High performance animations

8. Native Desktop Games: node-webkit
GPU accelerated
Cross-platform (Windows, OS X, Linux)
File Access
Video / Audio Access
Near zero overhead
60MB+ package
QbQbQb by Rezoner

9. Native Mobile Games: CocoonJS
Accelerated canvas API (95% support)
WebGL support
Web View over the top
iOS / Android test launcher
Native mobile features
Cloud hosted compiler

10. WebView: TreSensa Game Engine
WebViews are painfully slow
On average 3x slower than mobile browser
But exceedingly popular
Games within games / apps
Game Engine + Distribution

11. Pitfall #1 – Flash On Desktop Flash isn’t yet dead. Don’t rule it out.
Especially if you need: IE8 – complex video – webcam – accessibility

12. Preparing Graphics

13. Texture Packer Use Texture Atlases Saves http requests and GPU memory
On mobile limit textures to 1024 x 1024
WebGL prefers power of 2 sized textures
Artwork by Brandissimo! 2013

14. Flash CS6 and Flash CC MovieClips can export to Sprite Sheets
Timeline tweaks needed
Complex nested clips often fail
Flash CC Avatar release is imminent Contains a brand new method of exporting animations
Artwork by Jet Morgan Games 2013

15. Pitfall #2 – Atlas rendering artefacts Leave 2px shape padding.
May not appear on your machine – GPU specific.

16. Shoe Box Essential free graphical swiss-army knife Sprite Sheets
Sprite Extraction
Pivots
Slice-9
Bitmap Fonts
& lots more!

17. 2D Skeletal Animation Ideal for desktop / native
Be careful on mobile (can be very slow)
Spine (Spine Features KS now on!)
Spriter
Animo Sprites (XML export)

18. PNG – Save bandwidth Crush them PNG8 them PNG Out (Windows)
OptiPNG (Linux)
PNG Gauntlet (Windows)
ImageOptim (OS X)
TinyPNG (online)
ImageAlpha (OS X)
Kraken.io
Extremely advanced. Web based + API.

19. Pitfall #3 – Memory Limits If Mobile Safari crashes back to the Home Screen for no reason,
you ran it out of memory.

20. Preparing Audio

21. Web Audio rocks! Node based audio system
Built-in effects (echo, delay)
iOS6+
Chrome
FireFox (finally)
Hurry-up IE
No more excuses. Use it.
Artwork by Jet Morgan Games 2013

22. HTML Audio (does not rock)
Terrible Performance
Usually 1 sound channel (yes, really)
Codec issues (mp3, ogg, m4a, amr, ac3)
Use Audio Sprites

23. Pitfall #4 – Packing Audio Leave 2000ms of silence at the start and end of audio sprites.
Leave at least 1000ms between markers.

24. Game Frameworks

25. “Why do I need a framework? I prefer to roll my own”
Platform
Game

26. Platform Requirements
Loader
Scaling
Audio
Renderer
Animation
Input
Math
Events

27. Platform - Loader Load Progress xhr2 CDN Support Image Files
Audio Files
XML / JSON
Object Pool
CORS
Script Loader
Multi-part Loads 3G
Local Storage

28. Loader
Preloading – Load progress, error failure, xhr2, audio, images, data
Asset cache with multiple format parsers
Scaling
Device scaling - Viewport management, mobile scaling, UI removal
Full Screen API
Audio
Web Audio – Context manager, effects, node pooling
Legacy Audio – Audio sprites, file format support
Renderer
Canvas – Display List, Transforms, Context batching, Blend Modes
WebGL – Shaders, Batching, IE11 support
Animation
Sprite Sheets, Tweens, Skeletal Animation
Input
Touch – Multi-touch, MSPointer, Gestures, multi-input devices
Keyboard, Mouse, Game Pad API – Browser over-rides, latency

29. Building on shifting ground
2,200 changes to WebKit and Chromium per week
From Canary to Chrome in 12 weeks
iOS and Android automatic updates over the air
Automatic browser updates
Things you’re told are not possible today might be by the end of the project.
Be prepared to un-learn what you know every 6 months

30. If you roll your own … Now you can start your game jQuery Howler
Modernizr
Hammer.js
GSAP
Viewporter
Now you can start your game
Pixi.js

31. Pitfall #5 – Finding answers online Googling a problem
Pitfall #5 – Finding answers online Googling a problem? Check the dates of the answers. Disregard anything > 1 year old.

32. 3D WebGL - Turbulenz Console quality framework Rendering effects
Particles
Physics
Animation
3D Audio
Multiplayer
Developer Hub

33. 3D WebGL – Goo Engine Modular and feature packed engine
Shaders, particles, animation, post effects
Goo Create Fully browser based 3D game editor
Exports via CocoonJS

34. 2D WebGL / Canvas – Phaser
Optimised for mobile and desktop
Extremely easy to use
Loader, Cache, Animation, Sound, Particles, State Manager, Physics, Display List, Input & more
Uses Pixi.js for rendering
Very active community
Documentation & 150+ Examples

35. Wolfblood: Mystery of Stoneybridge
19 Puzzles Unlockable Map
Multi-part loader (memory issues on Android)
Primary / Secondary Devices
Desktop and Mobile
Custom UI Components
BBC Games Grid

36. Pitfall #6 – Test early and test often Don’t assume everyone has an iPad.
You will never be able to test all device combinations.

37. So many HTML5 Game Frameworks!
Pick one you feel comfortable with
Curated list with ratings and reviews:

38. Physics Libraries
It’s not all box2d

39. p2.js http://schteppe.github.io/p2.js/ For 2D games Pure JavaScript
Rigid Body Physics
Contacts, Friction
Constraints, Motors
Springs, Shapes
Documentation
Still evolving

40. Physics JS http://wellcaffeinated.net/PhysicsJS/ For 2D games
AMD or Global
Modular (31k core)
Renderer agnostic
Clean JavaScript code
Very new, API changes
Poor documentation

41. ammo.js https://github.com/kripken/ammo.js/ For 2D or 3D games
Direct port of Bullet
Uses Emscripten
Uses asm.js
Automated port
Needs powerful CPU
Not mobile friendly
Also see CannonJS

42. RUBE https://www.iforce2d.net/rube/ Visual physics editor
Bodies, fixtures, vertices,
joints, scripting
Cross platform
Exports to JSON

43. Distribution
App stores and networks

44. App Stores that accept HTML5 games
Note: Some require native wrappers. Clay.io will help you reach the stores easily.

45. 5 million 400 20 BoosterMedia.com MONTHLY USERS GAMES – MOST 3rd Party
PREDOMINANTLY EUROPE + SOUTH AMERICA 20
NEW GAMES A MONTH
BoosterMedia.com
HTML5 Gaming Portal Network

46. Community
Game development is multi-player

47. Don’t struggle alone!
Active Forum & Chat
Coding Help
Game Showcase
Constantly great new content
Official forum of: Pixi.js, Phaser, Babylon.js, SpellJS

48. Creating HTML5 games is hard work
Don’t give up!
Feed back in to the community
No-one will ever create something in the same way as you do
Your vision is unique - embrace that

49. Thank you! Richard Davey rich@photonstorm.com @photonstorm
Slides will be at