Presentation on theme: "HTML5 Game Development In-depth RICHARD DAVEY, PHOTON STORM LTD."— Presentation transcript:
HTML5 Game Development In-depth RICHARD DAVEY, PHOTON STORM LTD.
What we’ll cover Introduction Choose the platform When to use DOM / CSS Preparing Graphics Preparing Audio Game Frameworks Physics Libraries Distribution
Who am I? Who do we build games for? Director, Photon Storm Ltd. 50+ HTML5 games in 20 months.
Choose the platform
Desktop browser Mobile browser Native desktop Native mobile Web View Wii U
Desktop browsersMobile 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
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 animationsHigh performance animations
Native Desktop Games: node-webkitnode-webkit GPU accelerated Cross-platform (Windows, OS X, Linux) File Access Video / Audio Access Near zero overhead 60MB+ package QbQbQb by Rezoner
Native Mobile Games: CocoonJSCocoonJS Accelerated canvas API (95% support) WebGL support Web View over the top iOS / Android test launcher Native mobile features Cloud hosted compiler
WebView: TreSensa Game EngineTreSensa Game Engine WebViews are painfully slow On average 3x slower than mobile browser But exceedingly popular Games within games / apps Game Engine + Distribution
Pitfall #1 – Flash On Desktop Flash isn’t yet dead. Don’t rule it out. Especially if you need: IE8 – complex video – webcam – accessibility
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
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
Pitfall #2 – Atlas rendering artefacts Leave 2px shape padding. May not appear on your machine – GPU specific.
2D Skeletal Animation Ideal for desktop / native Be careful on mobile (can be very slow) Spine (Spine Features KS now on!) Spine Spriter Animo Sprites (XML export) Animo Sprites
PNG – Save bandwidth CRUSH THEM PNG Out (Windows)PNG Out OptiPNG (Linux)OptiPNG PNG Gauntlet (Windows)PNG Gauntlet ImageOptim (OS X)ImageOptim PNG8 THEM TinyPNG (online)TinyPNG ImageAlpha (OS X)ImageAlpha Kraken.io Extremely advanced. Web based + API.
Pitfall #3 – Memory Limits If Mobile Safari crashes back to the Home Screen for no reason, you ran it out of memory.
Artwork by Jet Morgan Games 2013 Node based audio system Built-in effects (echo, delay) iOS6+ Chrome FireFox (finally) Hurry-up IE No more excuses. Use it. Web Audio rocks!
HTML Audio (does not rock) Terrible Performance Usually 1 sound channel (yes, really) Codec issues (mp3, ogg, m4a, amr, ac3) Use Audio Sprites
Pitfall #4 – Packing Audio Leave 2000ms of silence at the start and end of audio sprites. Leave at least 1000ms between markers.
“Why do I need a framework? I prefer to roll my own” PlatformGame
Platform - Loader Load Progress xhr2 CDN Support Image Files Audio Files XML / JSON Object Pool CORS Script Loader Multi-part Loads 3G Local Storage
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
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
If you roll your own … jQuery Hammer.js Howler Viewporter Pixi.js Modernizr GSAP Now you can start your game
Pitfall #5 – Finding answers online Googling a problem? Check the dates of the answers. Disregard anything > 1 year old.
3D WebGL - TurbulenzTurbulenz Console quality framework Rendering effects Particles Physics Animation 3D Audio Multiplayer Developer Hub
3D WebGL – Goo EngineGoo Engine Modular and feature packed engine Shaders, particles, animation, post effects Goo Create Fully browser based 3D game editor Exports via CocoonJS
2D WebGL / Canvas – PhaserPhaser 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 renderingPixi.js Very active community Documentation & 150+ Examples
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
Pitfall #6 – Test early and test often Don’t assume everyone has an iPad. You will never be able to test all device combinations.
So many HTML5 Game Frameworks! Pick one you feel comfortable with Curated list with ratings and reviews:
Physics Libraries IT’S NOT ALL BOX2D
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 CannonJSCannonJS