html5 game development in-depth richard davey, photon storm ltd
TRANSCRIPT
HTML5 Game DevelopmentIn-depthRICHARD 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 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
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
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
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
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
Pitfall #1 – FlashOn Desktop Flash isn’t yet dead. Don’t rule it out.Especially if you need: IE8 – complex video – webcam – accessibility
Preparing Graphics
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 artefactsLeave 2px shape padding.May not appear on your machine – GPU specific.
Shoe Box
Essential free graphical swiss-army knife
◦ Sprite Sheets◦ Sprite Extraction◦ Pivots◦ Slice-9◦ Bitmap Fonts◦ & lots more!
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)
PNG – Save bandwidthCRUSH THEM
PNG Out (Windows)
OptiPNG (Linux)
PNG Gauntlet (Windows)
ImageOptim (OS X)
PNG8 THEM
TinyPNG (online)
ImageAlpha (OS X)
Kraken.io
Extremely advanced. Web based + API.
Pitfall #3 – Memory LimitsIf Mobile Safari crashes back to the Home Screen for no reason,you ran it out of memory.
Preparing Audio
Artwork by Jet Morgan Games 2013
Node based audio system
Built-in effects (echo, delay)
iOS6+ChromeFireFox (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 AudioLeave 2000ms of silence at the start and end of audio sprites.Leave at least 1000ms between markers.
Game Frameworks
“Why do I need a framework? I prefer to roll my own”
Platform Game
Platform Requirements
Loader Scaling Audio Renderer
Animation Input Math Events
Platform - Loader
Load Progress xhr2 CDN
SupportImage 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 todaymight 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 canstart your game
Pitfall #5 – Finding answers onlineGoogling a problem? Check the dates of the answers.Disregard anything > 1 year old.
3D WebGL - Turbulenz Console quality framework
Rendering effects
Particles
Physics
Animation
3D Audio
Multiplayer
Developer Hub
3D WebGL – Goo Engine Modular and featurepacked engine
Shaders, particles,animation, post effects
Goo CreateFully browser based3D game editor
Exports via CocoonJS
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
Wolfblood: Mystery of Stoneybridge
19 PuzzlesUnlockable 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 oftenDon’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:
http://html5gameengine.com/
Physics LibrariesIT’S NOT ALL BOX2D
p2.js http://schteppe.github.io/p2.js/
For 2D gamesPure JavaScriptRigid Body Physics
Contacts, FrictionConstraints, MotorsSprings, Shapes
Documentation
Still evolving
Physics JS http://wellcaffeinated.net/PhysicsJS/
For 2D gamesAMD or GlobalModular (31k core)Renderer agnosticClean JavaScript code
Very new, API changesPoor documentation
ammo.js https://github.com/kripken/ammo.js/
For 2D or 3D gamesDirect port of BulletUses EmscriptenUses asm.jsAutomated port
Needs powerful CPUNot mobile friendly
Also see CannonJS
RUBE https://www.iforce2d.net/rube/
Visual physics editor
Bodies, fixtures, vertices,joints, scripting
Cross platform
Exports to JSON
DistributionAPP STORES AND NETWORKS
App Stores that accept HTML5 gamesNote: Some require native wrappers. Clay.io will help you reach the stores easily.
BoosterMedia.comHTML5 Gaming Portal Network
5 millionMONTHLY USERS
PREDOMINANTLY EUROPE + SOUTH AMERICA400GAMES – MOST 3rd Party
20NEW GAMES A MONTH
CommunityGAME DEVELOPMENT IS MULTI-PLAYER
Don’t struggle alone!
Active Forum & ChatCoding HelpGame ShowcaseConstantly great new content
Official forum of:Pixi.js, Phaser, Babylon.js, SpellJS
http://www.html5gamedevs.com/
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 doYour vision is unique - embrace that
Thank you! Richard Davey
@photonstorm
Slides will be athttp://gametest.mobi/migs/