• Save
HTML5 Animation in Mobile Web Games
Upcoming SlideShare
Loading in...5

HTML5 Animation in Mobile Web Games




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



Total Views
Views on SlideShare
Embed Views



5 Embeds 1,296

http://makoto-tanaka.com 1286
http://webcache.googleusercontent.com 5
http://pinterest.com 3
https://twimg0-a.akamaihd.net 1
https://www.google.co.jp 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

HTML5 Animation in Mobile Web Games HTML5 Animation in Mobile Web Games Presentation Transcript

  • HTML5 Animationin Mobile Web GamesSangmin, Shim
  • Speaker
  • What is Animation?
  • 文, 絵 ゾングダゾングtwitter @yameyorie-mail usamibabe@naver.comwebtoon http://comic.naver.com/webtoon/list.nhn?titleId=409630
  • Animation is the rapid display ofa sequence of images to create an illusion of movement.
  • Each image contains smallchanges in movement, rotation, scale …
  • Let’s see more detail
  • 1. Resource Management
  • Resource Management Loading Image
  • Resource Management• Game or Animation contains many resources. Each resource size is bigger than resources in web pages(larger than 3Mbytes)
  • Resource Management• Loading screens are required to load resources
  • 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);
  • 2. Objectivation
  • Objectivation abstraction into an object
  • 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
  • Objectivation Objects that contain the necessary information is required when drawing Canvas
  • 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;
  • 3. Animation
  • Animation Animation
  • 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
  • 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);
  • Animation draw draw draw draw draw Repeat 60 times per second
  • 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.
  • 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);
  • 4. Drawing
  • 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.
  • Clear Canvas• Using clearRect method var ctx = elCanvas.getContext(“2d”); ctx.clearRect(0, 0, elCanvas.width, elCanvas.height); Fast on most browsers.
  • Sprite Animation• A Sprite Animation is a two-dimension image that is integrated into a larger scene
  • 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
  • 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.
  • Avoid Floating Coordinates• When floating point coordinates are used, anti-aliasing is automatically used to try to smooth out the lines.
  • 5. Event
  • 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 } }
  • Event Processing• The aforementioned method only recognizes objects as rectangles.• More detail is needed to detect objects.
  • 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 }
  • 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.
  • Animation Demo iOS5
  • Animation Demo iOS4
  • What the?!?!
  • Hardware Acceleration• Safari in iOS5 and up has GPU accelerated Mobile Canvas implementation.• Without GPU Acceleration, mobile browsers generally have poor performance for Canvas.
  • 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; }
  • Sprite Animation in DOM• A child image element is needed to use only the CSS 3D Transforms. overflow:hidden DIV IMG
  • 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>
  • CSS 3D Transforms Animation Demo iOS4
  • Is that all?
  • 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
  • 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)
  • 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.
  • 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.
  • There is a solution for you
  • Collie
  • Collie• Collie is a high performance animation library for javascript• Collie supports more than 13 mobile devices and PCs with its optimized methods.
  • Collie• Collie supports retina display
  • Collie• Collie supports detail region to detect object in both Canvas and DOM• Collie provides tool to make path about object shape.
  • Collie• Collie supports object cache for better speed• Collie is most effective for drawing that requires a lot of cost. Drawing
  • Collie is an opensource project LGPL v2.1
  • For more detailed information, visit http://jindo.dev.naver.com/collie