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

1. HTML5 Animation
in Mobile Web Games
Sangmin, Shim

2. Speaker

3. What is Animation?

5. 文, 絵 ゾングダゾング
twitter @yameyori
e-mail usamibabe@naver.com
webtoon http://comic.naver.com/webtoon/list.nhn?titleId=409630

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

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

9. Let’s see more detail

10. 1. Resource Management

11. Resource Management
Loading Image

12. Resource Management
• Game or Animation contains many
resources. Each resource size is bigger
than resources in web pages(larger than
3Mbytes)

13. Resource Management
• Loading screens are required to load
resources

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

15. 2. Objectivation

16. Objectivation
abstraction into an object

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

18. Objectivation
Objects that contain the necessary information is required
when drawing
Canvas

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

20. 3. Animation

21. Animation
Animation

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

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

24. Animation
draw draw draw draw draw
Repeat 60 times per second

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

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

27. 4. Drawing

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

29. Clear Canvas
• Using clearRect method
var ctx = elCanvas.getContext(“2d”);
ctx.clearRect(0, 0, elCanvas.width, elCanvas.height);
Fast on most browsers.

30. Sprite Animation
• A Sprite Animation is a two-dimension
image that is integrated into a larger scene

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

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

33. Avoid Floating Coordinates
• When floating point coordinates are used,
anti-aliasing is automatically used to try to
smooth out the lines.

34. 5. Event

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

36. Event Processing
• The aforementioned method only recognizes objects as
rectangles.
• More detail is needed to detect objects.

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

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

39. Animation Demo
iOS5

40. Animation Demo
iOS4

41. What the?!?!

42. Hardware Acceleration
• Safari in iOS5 and up has GPU accelerated Mobile
Canvas implementation.
• Without GPU Acceleration, mobile browsers generally
have poor performance for Canvas.

43. 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;
}

44. Sprite Animation in DOM
• A child image element is needed to use only the CSS 3D
Transforms.
overflow:hidden
DIV
IMG

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

46. CSS 3D Transforms
Animation Demo
iOS4

47. Is that all?

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

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

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

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

53. There is a solution for you

54. Collie

56. Collie
• Collie is a high performance animation library for
javascript
• Collie supports more than 13 mobile devices
and PCs with its optimized methods.

57. Collie
• Collie supports retina display

58. Collie
• Collie supports detail region to detect object in
both Canvas and DOM
• Collie provides tool to make path about object
shape.

59. Collie
• Collie supports object cache for better speed
• Collie is most effective for drawing that requires
a lot of cost.
Drawing

60. Collie is an opensource project
LGPL v2.1

61. For more detailed information, visit
http://jindo.dev.naver.com/collie