5Desktop 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
7When to use DOM / CSS You need IE8 support Text or UI heavy game Relatively simple gameDoesn’t need any pixel effectsRead: High performance animations
8Native Desktop Games: node-webkit GPU acceleratedCross-platform (Windows, OS X, Linux)File AccessVideo / Audio AccessNear zero overhead60MB+ packageQbQbQb by Rezoner
9Native Mobile Games: CocoonJS Accelerated canvas API (95% support)WebGL supportWeb View over the topiOS / Android test launcherNative mobile featuresCloud hosted compiler
10WebView: TreSensa Game Engine WebViews are painfully slowOn average 3x slower than mobile browserBut exceedingly popularGames within games / appsGame Engine + Distribution
11Pitfall #1 – Flash On Desktop Flash isn’t yet dead. Don’t rule it out. Especially if you need: IE8 – complex video – webcam – accessibility
13Texture 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
14Flash 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
15Pitfall #2 – Atlas rendering artefacts Leave 2px shape padding. May not appear on your machine – GPU specific.
28LoaderPreloading – Load progress, error failure, xhr2, audio, images, dataAsset cache with multiple format parsersScalingDevice scaling - Viewport management, mobile scaling, UI removalFull Screen APIAudioWeb Audio – Context manager, effects, node poolingLegacy Audio – Audio sprites, file format supportRendererCanvas – Display List, Transforms, Context batching, Blend ModesWebGL – Shaders, Batching, IE11 supportAnimationSprite Sheets, Tweens, Skeletal AnimationInputTouch – Multi-touch, MSPointer, Gestures, multi-input devicesKeyboard, Mouse, Game Pad API – Browser over-rides, latency
29Building 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
30If you roll your own … Now you can start your game jQuery Howler ModernizrHammer.jsGSAPViewporterNow you can start your gamePixi.js
31Pitfall #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.
333D WebGL – Goo Engine Modular and feature packed engine Shaders, particles, animation, post effectsGoo Create Fully browser based 3D game editorExports via CocoonJS
342D 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
35Wolfblood: Mystery of Stoneybridge 19 Puzzles Unlockable MapMulti-part loader (memory issues on Android)Primary / Secondary DevicesDesktop and MobileCustom UI ComponentsBBC Games Grid
36Pitfall #6 – Test early and test often Don’t assume everyone has an iPad. You will never be able to test all device combinations.
37So many HTML5 Game Frameworks! Pick one you feel comfortable withCurated list with ratings and reviews: