Your SlideShare is downloading. ×
0
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
High Performance Mobile Web Game Development in HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

High Performance Mobile Web Game Development in HTML5

4,287

Published on

Attached Movies …

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
4,287
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
47
Comments
0
Likes
25
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. High Performance MobileWeb Game Developmentin HTML5Sangmin, Shim
  • 2. I work at NHN
  • 3. See the demo firsthttp://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 performanceBackground music Effect
  • 10. Two worst enemies in mobile game development Performance & Sound
  • 11. Mobile is evolving rapidly
  • 12. Web Audio APIBackground music Effect
  • 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. 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) CanvasRendering 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 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. 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 Im 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

×