HTML5 Animation in Mobile Web Games

HTML5 Animation
in Mobile Web Games

Sangmin, Shim

文, 絵ゾングダゾング

twitter @yameyori
e-mail usamibabe@naver.com
webtoon http://comic.naver.com/webtoon/list.nhn?titleId=409630

Animation is the rapid display of
a sequence of images to create
an illusion of movement.

Each image contains small
changes in movement, rotation,
scale …

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);

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;

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 requestAnimationFrame
instead of setInterval
• requestAnimationFrame is the browser's native
way of handling animations.
• Helps get a smooth 60 frames per second.
• iOS6 supports requestAnimationFrame.
function draw() {
requestAnimationFrame(draw);
// ...
}

requestAnimationFrame(draw);

Clear Canvas

• Using drawRect method
var ctx = elCanvas.getContext("2d");
ctx.fillStyle = "#ffffff";
ctx.drawRect(0, 0, elCanvas.width, elCanvas.height);

It's slow.

• Reset width or height attributes
elCanvas.width = 100;
elCanvas.height = 100;

It's 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.

drawImage

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

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

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

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.

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

HTML5 Animation in Mobile Web Games

Related slideshows

More Related Content

HTML5 Animation in Mobile Web Games