High Performance Mobile Web Game Development in HTML5

5,183 views
4,904 views

Published on

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

0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,183
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
51
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide

High Performance Mobile Web Game Development in HTML5

  1. 1. High Performance MobileWeb Game Developmentin HTML5Sangmin, Shim
  2. 2. I work at NHN
  3. 3. See the demo firsthttp://goo.gl/JJbaQ
  4. 4. You can easily build games on desktops
  5. 5. Mobile’s different
  6. 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. 7. Various Devices
  8. 8. Slower
  9. 9. Limited Sound Support• Cannot play multiple sounds simultaneously• iOS requires user input to play sound• Slow downs the performanceBackground music Effect
  10. 10. Two worst enemies in mobile game development Performance & Sound
  11. 11. Mobile is evolving rapidly
  12. 12. Web Audio APIBackground music Effect
  13. 13. Better performance in iOS6FPS (Frame per Second) FPS60 60 iOS6 iOS6 353%↑ 68%↑50 5040 40 iOS530 3020 2010 iOS4 10 0 0 100 objects were animated using Collie on iPhone4
  14. 14. Let’s start to build your own mobile game!
  15. 15. 1. 2. 3. 4. 5. 6.Both Canvas And CSS3 3D Transforms have to be supported
  16. 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. 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. 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. 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. 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) CanvasRendering Canvas or CSS 3D DOM Canvas (iOS5 over)
  21. 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. 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. 23. 2. 3. 4. 5. 6.Need to find out the exact extent of an object
  24. 24. Need to find out the exact extent of an object Must find out the exact extent of an object
  25. 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. 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 isnt the same) • The toDataURL(), toBlob(), and getImageData() methods check the flag and will throw a SecurityError exception rather than leak cross- origin data
  27. 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. 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. 29. Need to find out the exact extent of an object Graphic Designer Im a Graphic Designer
  30. 30. 3. 4. 5. 6.Use a Bitmap Image Instead of Drawing
  31. 31. Use a Bitmap Image Instead of Drawing Drawing Vectors is Slow Performance comparison between vector drawing and using images
  32. 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. 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. 34. Use a Bitmap Image Instead of Drawing Shadow, filter and gradation are expensive Performance enhanced by using prepared images
  35. 35. 4. 5. 6.Do Not Use Too Many Canvases
  36. 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. 37. 5. 6.Android...
  38. 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. 39. Android... Arrangement of Images in a Spritesheet
  40. 40. Android... Rotate3d bug in Android Android 4.X iPhone 4 iOS6
  41. 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. 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. 43. 6.More Technical Points
  44. 44. More Technical Points Tile Caching Useful when you are dealing with many objects simultaneously Tile Caching enhances the performance
  45. 45. More Technical Points Dirty Rectangle Redraw only where there are changes. redraw redraw skip redraw
  46. 46. More Technical Points Tile Rendering redraw
  47. 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. 48. Too Many To Consider?
  49. 49. There’s a library trying to solve all these problems.
  50. 50. Collie
  51. 51. Collie
  52. 52. Collie Tested on over 18 OS’s and devices
  53. 53. Collie Automatically selects the fastest drawing method for the device.
  54. 54. Collie What you can do with Collie
  55. 55. Collie What you can do with Collie
  56. 56. Collie What you can do with Collie Catch me if you can - realtime chess in Windows 8 Store
  57. 57. Collie 20 kb
  58. 58. Collie Open Source LGPL v2.1
  59. 59. Collie http://jindo.dev.naver.com/collie
  60. 60. Questions? @davidshimjs ssm0123@gmail.com
  61. 61. Thank you

×