HTML5 Game Development In-depth RICHARD DAVEY, PHOTON STORM LTD. - - PowerPoint PPT Presentation

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 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 – 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 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 Limits

If 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+ 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.

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

• 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 - 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

http://schteppe.github.io/p2.js/ For 2D games Pure JavaScript Rigid Body Physics Contacts, Friction Constraints, Motors Springs, Shapes Documentation Still evolving

Physics JS

http://wellcaffeinated.net/PhysicsJS/ For 2D games AMD or Global Modular (31k core) Renderer agnostic Clean JavaScript code Very new, API changes Poor documentation

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 CannonJS

RUBE

https://www.iforce2d.net/rube/ Visual physics editor Bodies, fixtures, vertices, joints, scripting Cross platform Exports to JSON

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.

BoosterMedia.com

HTML5 Gaming Portal Network

5 million

MONTHLY Y USERS RS PREDOMI MINAN NANTLY TLY EUROPE PE + SOUTH AMERIC ICA

400 00

GAMES ES – MOST 3rd

rd Party

20 20

NEW GAMES ES A MONTH

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 rich@photonstorm.com @photonstorm Slides will be at http://gametest.mobi/migs/