5 Desktop browserMobile browserNative desktopNative mobileWeb ViewWii U
6 Desktop browsers Mobile browsers Fast! Great audio Webcams 3D / WebGLLots of memoryWired / broadbandGreat toolsSlow! Terrible legacy audioNo camera yetLimited 3D / WebGLVery little memoryWireless / 3GVery few tools
7 When to use DOM / CSS You need IE8 support Text or UI heavy game Relatively simple gameDoesn’t need any pixel effectsRead: High performance animations
8 Native Desktop Games: node-webkit GPU acceleratedCross-platform (Windows, OS X, Linux)File AccessVideo / Audio AccessNear zero overhead60MB+ packageQbQbQb by Rezoner
9 Native Mobile Games: CocoonJS Accelerated canvas API (95% support)WebGL supportWeb View over the topiOS / Android test launcherNative mobile featuresCloud hosted compiler
10 WebView: TreSensa Game Engine WebViews are painfully slowOn average 3x slower than mobile browserBut exceedingly popularGames within games / appsGame 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
13 Texture Packer Use Texture Atlases Saves http requests and GPU memory On mobile limit textures to 1024 x 1024WebGL prefers power of 2 sized texturesArtwork by Brandissimo! 2013
14 Flash CS6 and Flash CC MovieClips can export to Sprite Sheets Timeline tweaks neededComplex nested clips often failFlash CC Avatar release is imminent Contains a brand new method of exporting animationsArtwork by Jet Morgan Games 2013
15 Pitfall #2 – Atlas rendering artefacts Leave 2px shape padding. May not appear on your machine – GPU specific.
29 Building on shifting ground 2,200 changes to WebKit and Chromium per weekFrom Canary to Chrome in 12 weeksiOS and Android automatic updates over the airAutomatic browser updatesThings 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 ModernizrHammer.jsGSAPViewporterNow you can start your gamePixi.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.
33 3D WebGL – Goo Engine Modular and feature packed engine Shaders, particles, animation, post effectsGoo Create Fully browser based 3D game editorExports via CocoonJS
34 2D WebGL / Canvas – Phaser Optimised for mobile and desktopExtremely easy to useLoader, Cache, Animation, Sound, Particles, State Manager, Physics, Display List, Input & moreUses Pixi.js for renderingVery active communityDocumentation & 150+ Examples
35 Wolfblood: Mystery of Stoneybridge 19 Puzzles Unlockable MapMulti-part loader (memory issues on Android)Primary / Secondary DevicesDesktop and MobileCustom UI ComponentsBBC 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 withCurated list with ratings and reviews: