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

Both Canvas And CSS3 3D Transforms have to be supported

iOS4 supports hardware acceleration when using

CSS 3D Transforms

Performance comparison between iOS4 and iOS5 with different rendering methods

Both Canvas And CSS3 3D Transforms have to be supported

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

does not need to support it"

Both Canvas And CSS3 3D Transforms have to be supported

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)

Both Canvas And CSS3 3D Transforms have to be supported

"Well, most mobile devices support

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

and go with DOM"

Both Canvas And CSS3 3D Transforms have to be supported

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

Both Canvas And CSS3 3D Transforms have to be supported

Need to find out the exact extent of an object

2. 3. 4. 5. 6.

Must find out the exact extent of an object

Need to 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!"); }

Need to find out the exact extent of an object

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

Need to find out the exact extent of an object

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

Need to find out the exact extent of an object

Performance comparison between

getImageData and PNPOLY

0

10000

20000

30000

40000

50000

60000

70000

getImageData() PNPOLY Algorithm

operations/sec

9,930%↑

Operations

Need to find out the exact extent of an object

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

Graphic Designer

Need to find out the exact extent of an object

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

Use a Bitmap Image Instead of Drawing

Object Caching

hidden canvas

visible canvas

Draw a vector

Draw a bitmap

Use a Bitmap Image Instead of Drawing

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

Use a Bitmap Image Instead of Drawing

Shadow, filter and gradation are expensive

Use a Bitmap Image Instead of Drawing

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

More Technical Points

Tile Caching enhances the performance

Dirty Rectangle

Redraw only where there are changes.

skip redraw redraw redraw

More Technical Points

Tile Rendering

More Technical Points

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

More Technical Points

Too Many To Consider?

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

Collie

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

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 ssm0123@gmail.com

Thank you