Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Animation in Mobile Web Games

0 views

Published on

JavaScriptでアニメーションとゲームを作る方法について、そしてモバイルではどんな困難があるのか、どんな解決方法があるのか紹介し、これらを支援する Collie ライブラリに関して解説します。

Published in: Technology, Art & Photos
  • Get Now to Download PDF Format === http://ebookdfsrewsa.justdied.com/1790722896-journal-border-collie.html
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HTML5 Animation in Mobile Web Games

  1. 1. HTML5 Animationin Mobile Web GamesSangmin, Shim
  2. 2. Speaker
  3. 3. What is Animation?
  4. 4. 文, 絵 ゾングダゾングtwitter @yameyorie-mail usamibabe@naver.comwebtoon http://comic.naver.com/webtoon/list.nhn?titleId=409630
  5. 5. Animation is the rapid display ofa sequence of images to create an illusion of movement.
  6. 6. Each image contains smallchanges in movement, rotation, scale …
  7. 7. Let’s see more detail
  8. 8. 1. Resource Management
  9. 9. Resource Management Loading Image
  10. 10. Resource Management• Game or Animation contains many resources. Each resource size is bigger than resources in web pages(larger than 3Mbytes)
  11. 11. Resource Management• Loading screens are required to load resources
  12. 12. Resource Management• Always load resources asynchronously var img = document.createElement(“img”); img.onload = function () { alert("ok!"); }; img.onerror = function () { alert("error"); }; img.src = "test.png"; document.body.appendChild(img);
  13. 13. 2. Objectivation
  14. 14. Objectivation abstraction into an object
  15. 15. Objectivation• DOM Elements can be handled separately. However objects cannot be handled separately in HTML5 Canvas DOM Elements have regions each Canvas draw object to one Context
  16. 16. Objectivation Objects that contain the necessary information is required when drawing Canvas
  17. 17. Objectivation• Contains position and properties for display. var oItem = new Item(); oItem.width = 100; oItem.height = 100; oItem.x = 50; oItem.y = 150; oItem.color = "#123456"; oItem.visible = true;
  18. 18. 3. Animation
  19. 19. Animation Animation
  20. 20. Animation• Rendering-Pipeline must be used to tackle multiple objects simultaneously. no Register Is there yes Draw Initialize updated Pipeline object? object one tick cycle
  21. 21. Animation // drawing function draw() { // clear canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // draw each object. for (var i = 0; i < list.length; i++) { list[i].drawEachObject(); } }; // repeat 60 times per second setInterval(draw, 1000 / 60);
  22. 22. Animation draw draw draw draw draw Repeat 60 times per second
  23. 23. Why is it repeated 60 times per second?• Most PC monitors show 60 frames per second. Therefore, there is no point in making animation that is 60 FPS.
  24. 24. Using requestAnimationFrameinstead of setInterval• requestAnimationFrame is the browsers native way of handling animations.• Helps get a smooth 60 frames per second.• iOS6 supports requestAnimationFrame. function draw() { requestAnimationFrame(draw); // ... } requestAnimationFrame(draw);
  25. 25. 4. Drawing
  26. 26. Clear Canvas• Using drawRect method var ctx = elCanvas.getContext("2d"); ctx.fillStyle = "#ffffff"; ctx.drawRect(0, 0, elCanvas.width, elCanvas.height); Its slow.• Reset width or height attributes elCanvas.width = 100; elCanvas.height = 100; Its fast on old browser.
  27. 27. Clear Canvas• Using clearRect method var ctx = elCanvas.getContext(“2d”); ctx.clearRect(0, 0, elCanvas.width, elCanvas.height); Fast on most browsers.
  28. 28. Sprite Animation• A Sprite Animation is a two-dimension image that is integrated into a larger scene
  29. 29. Sprite Animation in Canvas• Using drawImage method var ctx = elCanvas.getContext("2d"); ctx.drawImage(target Element, sourceX, sourceY, sourceWidth, sourceHeight, targetX, targetY, targetWidth, targetHeight);Source x,y,width,height Target x,y,width,height drawImage
  30. 30. Pixel Manipulation• Using different size sources and targets results in low performance in iOS4. Use drawImage method with original dimension. drawImagePixel manipulation occurs when using different dimensions with source.
  31. 31. Avoid Floating Coordinates• When floating point coordinates are used, anti-aliasing is automatically used to try to smooth out the lines.
  32. 32. 5. Event
  33. 33. Event Processing• Inspect and see if the location the event occurred is in each object’s region in order to find objects that are related to event. for (var i in list) { if ( list[i].x <= mouseX && mouseX <= list[i].x + list[i].width && list[i].y <= mouseY && mouseY <= list[i].y + list[i].height ) { // region of this object contains mouse point } }
  34. 34. Event Processing• The aforementioned method only recognizes objects as rectangles.• More detail is needed to detect objects.
  35. 35. Event Processing• getImageData method can be used to get pixel data var imageData = ctx.getImageData(mouseX, mouseY, 1, 1); if (imageData.data[0] !== 0 || imageData.data[1] !== 0 || imageData.data[2] !== 0 || imageData.data[3] !== 0) { // a pixel is not empty data }
  36. 36. Security 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.
  37. 37. Animation Demo iOS5
  38. 38. Animation Demo iOS4
  39. 39. What the?!?!
  40. 40. Hardware Acceleration• Safari in iOS5 and up has GPU accelerated Mobile Canvas implementation.• Without GPU Acceleration, mobile browsers generally have poor performance for Canvas.
  41. 41. Using CSS 3D Transforms• CSS 3D Transforms supports iOS4 and Android 3 and above.• Using the following CSS3 style with webkit prefix .displayObject { -webkit-transform:translate3d(x,y,z) scale3d(x, y, z) rotateZ(deg); -wekit-transform-origin:0 0; -webkit-transform-style:preserve-3d; }
  42. 42. Sprite Animation in DOM• A child image element is needed to use only the CSS 3D Transforms. overflow:hidden DIV IMG
  43. 43. Sprite Animation in DOM <div style="position:absolute; overflow:hidden; width:100px; height:100px; -webkit- transform:translate3d(100px, 100px, 0); "> <img src="sprite.png" style="position:absolute; -webkit- transform:translate3d(-100px, 0, 0); " border="0" alt="" /> </div>
  44. 44. CSS 3D Transforms Animation Demo iOS4
  45. 45. Is that all?
  46. 46. Performance different on each device• iOS4 supports CSS 3D Transforms with Hardware Acceleration(H/A)• iOS5 supports Canvas with H/A• There is no solution on Anroid 2.x devices.• Androind ICS supports CSS 3D Transforms with H/A
  47. 47. Choose Rendering method under over Device/ iPhone iPhone iPhone Android Android OS 3GS 4 4S 3 3 CSS3D (under iOS4) Canvas Rendering CSS3D Canvas or CSS3D Method Canvas DOM (over iOS5)
  48. 48. Be careful using Android CSS 3D Transforms• Unfortunately, Android ICS has many bugs associated with CSS 3D Transforms• The image turns black if an image that has a dimension of over 2048 pixels is used.• When an element that has a CSS overflow attribute with a hidden value is rotated, then that hidden area becomes visible.
  49. 49. Need to optimize detailed• Tick occurs 60 times per second.• If 100 objects are made, a logic in drawing object occurs 6,000 times per second.
  50. 50. There is a solution for you
  51. 51. Collie
  52. 52. Collie• Collie is a high performance animation library for javascript• Collie supports more than 13 mobile devices and PCs with its optimized methods.
  53. 53. Collie• Collie supports retina display
  54. 54. Collie• Collie supports detail region to detect object in both Canvas and DOM• Collie provides tool to make path about object shape.
  55. 55. Collie• Collie supports object cache for better speed• Collie is most effective for drawing that requires a lot of cost. Drawing
  56. 56. Collie is an opensource project LGPL v2.1
  57. 57. For more detailed information, visit http://jindo.dev.naver.com/collie

×