Transcript Photon Storm

HTML5 Game Development
In-depth
RICHARD DAVEY, PHOTON STORM LTD.
Introduction
Choose the platform
When to use DOM / CSS
What we’ll cover
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! 
Slow! 
Great audio
Terrible legacy audio
Webcams
No camera yet
3D / WebGL
Limited 3D / WebGL
Lots of memory
Very little memory
Wired / broadband
Wireless / 3G
Great tools
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 – Flash
On 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 artefacts
Leave 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 bandwidth
CRUSH THEM
PNG8 THEM
PNG Out (Windows)
TinyPNG (online)
OptiPNG (Linux)
ImageAlpha (OS X)
PNG Gauntlet (Windows)
ImageOptim (OS X)
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.
Preparing Audio
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
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.
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
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
Renderer
Animation
Input
• Web Audio – Context manager, effects, node pooling
• Legacy Audio – Audio sprites, file format support
• Canvas – Display List, Transforms, Context batching, Blend Modes
• WebGL – Shaders, Batching, IE11 support
• Sprite Sheets, Tweens, Skeletal Animation
• 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 …
Howler
jQuery
Modernizr
Hammer.js
Viewporter
Pixi.js
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 - Turbulenz
Console quality framework
Rendering effects
Particles
Physics
Animation
3D Audio
Multiplayer
Developer Hub
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
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 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:
http://html5gameengine.com/
Physics Libraries
IT ’S NOT ALL BOX2D
p2.js
For 2D games
Pure JavaScript
Rigid Body Physics
Contacts, Friction
Constraints, Motors
Springs, Shapes
Documentation
Still evolving
http://schteppe.github.io/p2.js/
Physics JS
For 2D games
AMD or Global
Modular (31k core)
Renderer agnostic
Clean JavaScript code
Very new, API changes
Poor documentation
http://wellcaffeinated.net/PhysicsJS/
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
https://github.com/kripken/ammo.js/
RUBE
Visual physics editor
Bodies, fixtures, vertices,
joints, scripting
Cross platform
Exports to JSON
https://www.iforce2d.net/rube/
Distribution
APP STORES AND NETWORKS
App Stores that accept HTML5 games
Note: Some require native wrappers. Clay.io will help you reach the stores easily.
5 million
400
20
MONTHLY USERS
GAMES – MOST 3rd Party
NEW GAMES A MONTH
BoosterMedia.com
HTML5 Gaming Portal Network
PREDOMINANTLY EUROPE + SOUTH AMERICA
Community
GAME DEVELOPMENT IS MULTI -PLAYER
Don’t struggle alone!
Active Forum & Chat
Coding Help
Game Showcase
Constantly 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 do
Your vision is unique - embrace that
Thank you!
Richard Davey
[email protected]
@photonstorm
Slides will be at
http://gametest.mobi/migs/