Upload
sangmin-shim
View
4.295
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Attached Movies p.16) https://vimeo.com/47706328 p.17) https://vimeo.com/47706331 p.18) https://vimeo.com/47706329 p.31) https://vimeo.com/54573920 p.34) https://vimeo.com/54573922 p.41) https://vimeo.com/54573923 p.42) https://vimeo.com/54573924 p.44) https://vimeo.com/54573925 p.45) https://vimeo.com/54574009
Citation preview
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 [email protected]
Thank you