Building 2D HTML5 Games: Myths and Reality

Sergey Batishchevhttps://twitter.com/sergebat

Some of our HTML5 Games

<TL;DR>

© dracoimagem-com.deviantart.com, used with permission

Why are we doing it?

Playing in Mobile Browser

Reach New Platforms

Bad Reason:

“Write once run everywhere” debug

“Plugin-free”

What exactly is HTML5? *

* for 2D games

• <canvas>

• Web Audio API

• Touch API

• Local Storage API

• WebGL

But HTML and JS are sloooow?!

Canvas Performance

iPhone 4s + iOS7.1 = 47 FPS

SGS3 + Android 4.3 Chrome = 38 FPS

500 sprites per frame

Canvas IS GPU Accelerated!

• iOS 5.0 beta +• https://developer.apple.com/safari/features/

•Chrome for Android (4.0+)• https://developer.chrome.com/multidevice/android/overview?csw=1

Stock Android Browser – ?

Android Stock Browser

500 sprites + SGS3 + Android 4.3 Stock = 8 FPS

80 sprites + SGS3 + Android 4.3 Stock = 40 FPS

Some pitfalls are real…

Implicit Texture Loading

void drawImage( in nsIDOMElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh );

GPU vs In-Memory Canvases

<=256x256(In chrome)

256x256+(In chrome)

Small: 256x256Avg: 257x257

http://jsperf.com/mixedcanvases

Pure JS Performance

From “The Computer Language Benchmarks Game” http://benchmarksgame.alioth.debian.org/

JIT Friendly JS

https://developers.google.com/events/io/2012/sessions/gooio2012/224/

Preloader• assets

• img• spritsheet.png• background.png• menubackground.png• …

• sound• tap.m4a• tap.ogg• …

• js• game.min.js

• index.html

Sound• Various formats (m4a, ogg)•Web Audio, fallback to HTML Audio Tag• Browser quirks

Render and UI

•Organize spritesheets•Stage, display lists•Touch, hit test

But JS engines areeven slower?!

500 spritesiPhone 4s + iOS7.1 = 47 FPS

SGS3 + Android 4.3 Chrome = 38 FPS

SGS3 + Android 4.3 Stock = 8 FPS

iPhone 4s + iOS7.1 = 30 FPS

SGS3 + Android 4.3 Chrome = 24 FPS

SGS3 + Android 4.3 Stock = 7 FPS

Which engine to choose?

Thoughts on selection

•Canvas / WebGL / Both? •Big guys behind it? • JS/HTML is a priority for them? •Hackable?•Can build SWF/APK/IPA?

But supporting all browsers/devices is

painful?!

Should work well on:•Browsers• iOS Safari 6.0 +•Android Browser 4.0+•Android Chrome 4.0+

• Popular devices (1-2 year old)• iPhone 4S, iPad 2 and newer•Galaxy S3, Galaxy Tab, etc

Playable (more or less)

• iPhone 4, iPad 1• Galaxy S2/S1/Y

Desktop is often secondary objective

•Two last Chrome versions•Two last Mozilla versions•IE 9.0 +

Keep it Simple

•Pure canvas, no DOM• Libs like Zynga Scroller can help

• Just 1 canvas

•Test on at least one device

Various screen sizesare painful!

Full Screen•Proper• Full screen API (requestFullscreen)

•Hack• scrollTo• Zynga Scroller to handle the tricks

•minimal-ui • iPhone on iOS 7.1+ only

Lock Orientation APO is not widely available (yet)

Dangerous Gestures

Swipe entire screen left/right

Swipe from the topTap the top

Careful with Horizontal Orientation

Background

My choice for now

640x960

Vertically oriented

game area

640x712

Please rotate your phone

Sound Support

iOS 6.0+

•WebAudio is well supported• Supported format: M4A• Play sound in user interaction

to unmute

Android Chrome

•WebAudio is well supported • Supported format: OGG

Android Stock Browser

•Only HTML audio tag• Supported format: OGG•Huge delays/sync issues

print(“Hello World”)

fillText

iPhone 4s + iOS7.1 = 60 FPS

SGS3 + Android 4.3 Chrome = 43 FPS

SGS3 + Android 4.3 Stock = 34 FPS

200 text labels per frame

Multiline Text

FPS is ½ ofplain fillText

(in CreateJS)

fillText is not pixel-accurate

Chrome (and friends) Firefox and friends

Touch vs Mouse Events

Some devices have both!

preventDefault();

Touch events

Mouse events

Customers and their API

• Easy and common:• Add logo + splash (PNG/JPG)• Add animated preloader (HTML+JS)• Submit scores• Submit start/gameover/levelend/etc• Work in iframe, custom resize

• Harder and rare:• Work in “their” API canvas• Custom path to load resources (CDN)

Wrapping Apps

Dreaded WebView• iOS: • No JIT in WebView• Canvas is likely not hardware accelerated• Hint: test on Chrome for iOS

• Android: • Based on standard Android Browser

before 4.4• Canvas is NOT hardware accelerated

How do we makeapps from HTML5 then?

+ High performance canvas embedded+ Works across iOS/Android/WinPhone- Custom extensions are coming- Mandatory splash screen

+ “Real Chromium” embedded+ Open source, backed by Intel XDK- ~20MB min APK, only Android 4+

+ Mature, well supported+ Open source, optional cloud build, backed by Adobe- WebView - External “FastCanvas” is not easy to support

Questions?

Sergey Batishchevtwitter.com/sergebat

html5devgamm2014.bitbucket.org