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

1. High Performance Mobile
Web Game Development
in HTML5
Sangmin, Shim

2. I work at NHN

3. See the demo first
http://goo.gl/JJbaQ

4. You can easily build games on desktops

5. Mobile’s different

6. 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
....

7. Various Devices

8. Slower

9. Limited Sound Support
• Cannot play multiple sounds simultaneously
• iOS requires user input to play sound
• Slow downs the performance
Background music
Effect

10. Two worst enemies in mobile game development
Performance & Sound

11. Mobile is evolving rapidly

12. Web Audio API
Background music
Effect

13. Better performance in iOS6
FPS (Frame per Second) FPS
60
60
iOS6 iOS6
353%↑ 68%↑
50
50
40
40
iOS5
30
30
20
20
10 iOS4 10
0
0
100 objects were animated using Collie on iPhone4

14. Let’s start to build your own mobile game!

15. 1. 2. 3. 4. 5. 6.
Both Canvas And CSS3 3D Transforms have to be
supported

16. Both Canvas And CSS3 3D Transforms have to be supported
Need to use different rendering methods depending
on the platform to get hardware acceleration
Hardware Accelerated Canvas Animation in iOS5

17. Both Canvas And CSS3 3D Transforms have to be supported
iOS4 did not have hardware acceleration support
Performance comparison between iOS4 and iOS5

18. 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

19. 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"

20. Both Canvas And CSS3 3D Transforms have to be supported
Renderings Used
iPhone iPhone Android Android
3GS or 4 4S 2.x 3 or higher
CSS 3D
(less than iOS5)
Canvas
Rendering Canvas or CSS 3D
DOM
Canvas
(iOS5 over)

21. 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"

22. Both Canvas And CSS3 3D Transforms have to be supported
Performance Comparison between Canvas and
DOM in iOS5
FPS
60
50
40 Canvas
30
CSS3 3D Transforms
20
10
0
10 20 30 50 100 Objects

23. 2. 3. 4. 5. 6.
Need to find out the exact extent of an object

24. Need to find out the exact extent of an object
Must find out the exact extent of an object

25. 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!");
}

26. 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

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

28. Need to find out the exact extent of an object
Performance comparison between
getImageData and PNPOLY
Operations
70000
60000
50000
40000
9,930%↑
operations/sec
30000
20000
10000
0
getImageData() PNPOLY Algorithm
http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

29. Need to find out the exact extent of an object
Graphic Designer
I'm a Graphic Designer

30. 3. 4. 5. 6.
Use a Bitmap Image Instead of Drawing

31. Use a Bitmap Image Instead of Drawing
Drawing Vectors is Slow
Performance comparison between vector drawing and using images

32. Use a Bitmap Image Instead of Drawing
Object Caching
Non Object Caching
Draw a vector
Use Object Caching
Draw a vector
Draw a bitmap
hidden canvas
visible canvas

33. Use a Bitmap Image Instead of Drawing
It’s better to use already pre-rotated images
rather than rotating them on the fly

34. Use a Bitmap Image Instead of Drawing
Shadow, filter and gradation are expensive
Performance enhanced by using prepared images

35. 4. 5. 6.
Do Not Use Too Many Canvases

36. Do Not Use Too Many Canvases
Do Not Use TOO MANY Canvases
FPS
60
50
40
30
20
FPS
10
0
1 2 3 4 5 6 7 8 9 10 Canvas

37. 5. 6.
Android...

38. Android...
What happens when one side of an image is larger
than 2048px
Large Image on Android 4.1.1 Same Image on Android 4.0.1

39. Android...
Arrangement of Images in a Spritesheet

40. Android...
Rotate3d bug in Android
Android 4.X iPhone 4 iOS6

41. Android...
Declare Every Element In Animation As 3D
DIV -webkit- DIV -webkit-
transform:translate3d(0, 0, 0); - transform:translate3d(0, 0, 0); -
webkit-transform-style:preserve-3d webkit-transform-style:preserve-3d
ㄴ IMG no styles ㄴ IMG -webkit-
transform:translateZ(0)

42. Android...
A bug found while using CSS3 3D Transforms
and form element in Android
The Image Will Become Larger When Keyboard Shows Up

43. 6.
More Technical Points

44. More Technical Points
Tile Caching
Useful when you are dealing with many objects
simultaneously
Tile Caching enhances the performance

45. More Technical Points
Dirty Rectangle
Redraw only where there are changes.
redraw redraw skip redraw

46. More Technical Points
Tile Rendering
redraw

47. More Technical Points
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

48. Too Many To Consider?

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

50. Collie

51. Collie

52. Collie
Tested on over 18 OS’s and devices

53. Collie
Automatically selects the fastest drawing
method for the device.

54. Collie
What you can do with Collie

55. Collie
What you can do with Collie

56. Collie
What you can do with Collie
Catch me if you can - realtime chess in Windows 8 Store

57. Collie
20 kb

58. Collie
Open Source
LGPL v2.1

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

60. Questions?
@davidshimjs
ssm0123@gmail.com

61. Thank you