high performance mobile web game development in html5

High Performance Mobile

Web Game Development

in HTML5

Sangmin, Shim

I work at NHN

See the demo first

http://goo.gl/JJbaQ

You can easily build games on desktops

Mobile’s different

Many OS’s

4 / 5 / 6

2.1 / 2.2 / 2.3 / 2.3.2 / 2.3.3 / 2.3.7 / 3.1 / 3.2 / 4.0.1 / 4.0.3 / 4.0.4 / 4.1

....

Various Devices

Slower

Limited Sound Support

• Cannot play multiple sounds simultaneously

• iOS requires user input to play sound

• Slow downs the performance

Background music

Effect

Two worst enemies in mobile game development

Performance & Sound

Mobile is evolving rapidly

Web Audio API

Background music

Effect

0

10

20

30

40

50

60

Better performance in iOS6

0

10

20

30

40

50

60

68%↑ 353%↑ iOS6 iOS6

FPS (Frame per Second)

iOS4

iOS5

100 objects were animated using Collie on iPhone4

FPS

Let’s start to build your own mobile game!

Both Canvas And CSS3 3D Transforms have to be

supported

1. 2. 3. 4. 5. 6.

Need to use different rendering methods depending

on the platform to get hardware acceleration

Hardware Accelerated Canvas Animation in iOS5

Both Canvas And CSS3 3D Transforms have to be supported

iOS4 did not have hardware acceleration support

Performance comparison between iOS4 and iOS5


iOS4 supports hardware acceleration when using

CSS 3D Transforms

Performance comparison between iOS4 and iOS5 with different rendering methods


"O, iOS4 is such an old platform, maybe my game

does not need to support it"


Renderings Used

iPhone

3GS or 4

iPhone

4S

Android

2.x

Android

3 or higher

Rendering

CSS 3D

(less than iOS5)

Canvas

Canvas

or

DOM

CSS 3D

Canvas

(iOS5 over)


"Well, most mobile devices support

CSS3 3D transforms, so I’ll just ditch Canvas totally

and go with DOM"


Performance Comparison between Canvas and

DOM in iOS5

0

10

20

30

40

50

60

10 20 30 50 100

FPS

Objects

Canvas

CSS3 3D Transforms


Need to find out the exact extent of an object

2. 3. 4. 5. 6.

Must find out the exact extent of an object


How to find the exact extent of an object using

getImageData method in Canvas

var el = document.createElement("canvas"); el.width = 200; el.height = 200; var ctx = el.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 100, 100); var imageData = ctx.getImageData(20, 20, 1, 1); if ( imageData.data[0] !== 0 || imageData.data[1] !== 0 || imageData.data[2] !== 0 || imageData.data[3] !== 0 ) { console.log("here it is!"); }


Security Issue with Canvas Element

• Information leakage can occur if scripts from

one origin can access information (e.g. read

pixels) from images from another origin (one that

isn't the same)

• The toDataURL(), toBlob(), and getImageData()

methods check the flag and will throw a

SecurityError exception rather than leak cross-

origin data


Predefining the area

[[126, 285],[104, 286],[101, 267],[105, 221],[101, 213],[88, 188],[85, 168],[81, 153],[94, 133],[97, 103],[94, 60],[95, 29],[103, 32],[109, 97],[143, 93],[147, 33],[151, 31],[152, 97],[161, 137],[166, 167],[165, 188],[169, 200],[165, 208],[160, 209],[159, 235],[159, 256],[159, 269],[162, 275],[162, 286],[138, 288],[130, 275],[132, 254]]


Performance comparison between

getImageData and PNPOLY

0

10000

20000

30000

40000

50000

60000

70000

getImageData() PNPOLY Algorithm

operations/sec

9,930%↑

Operations


http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

Graphic Designer


I'm a Graphic Designer

Use a Bitmap Image Instead of Drawing

3. 4. 5. 6.

Drawing Vectors is Slow

Performance comparison between vector drawing and using images


Object Caching

hidden canvas

visible canvas

Draw a vector

Draw a bitmap


Draw a vector

Use Object Caching

Non Object Caching

It’s better to use already pre-rotated images

rather than rotating them on the fly


Shadow, filter and gradation are expensive


Performance enhanced by using prepared images

Do Not Use Too Many Canvases

4. 5. 6.

Do Not Use TOO MANY Canvases

0

10

20

30

40

50

60

1 2 3 4 5 6 7 8 9 10

FPS

Canvas

FPS

Do Not Use Too Many Canvases

Android...

5. 6.

What happens when one side of an image is larger

than 2048px

Android...

Large Image on Android 4.1.1 Same Image on Android 4.0.1

Arrangement of Images in a Spritesheet

Android...

Android 4.X

Rotate3d bug in Android

Android...

iPhone 4 iOS6

Declare Every Element In Animation As 3D

DIV -webkit-transform:translate3d(0, 0, 0); -webkit-transform-style:preserve-3d

ㄴ IMG no styles

DIV -webkit-transform:translate3d(0, 0, 0); -webkit-transform-style:preserve-3d

ㄴ IMG -webkit-transform:translateZ(0)

Android...

A bug found while using CSS3 3D Transforms

and form element in Android

Android...

The Image Will Become Larger When Keyboard Shows Up

More Technical Points

6.

Tile Caching

Useful when you are dealing with many objects

simultaneously


Tile Caching enhances the performance

Dirty Rectangle

Redraw only where there are changes.

skip redraw redraw redraw


Tile Rendering


redraw

Polishing logics inside a tick is very important

• 60 times in a second is 3600 times in a minute

• Even a simple “if statement” can be problem

Tick

16.667ms


Too Many To Consider?

There’s a library trying to solve all these problems .

Collie

Tested on over 18 OS’s and devices

Collie

Automatically selects the fastest drawing

method for the device.

Collie

What you can do with Collie

Collie

What you can do with Collie

Catch me if you can - realtime chess in Windows 8 Store

Collie

20kb

Collie

Open Source

LGPL v2.1

Collie

http://jindo.dev.naver.com/collie

Collie

Questions?

@davidshimjs [email protected]

Thank you

high performance mobile web game development in html5

Documents

d webkit

canvas var

android android

canvas totallyand

exact extent

d transforms2010

d div webkit

ios5 canvasrendering