콜리 (Collie)HTML5 를 이용해 자바스크립트 애니메이션과 게임을 만들 수 있는 오픈소스 라이브러리심상민

NHN

식사 후 졸릴 수 있으니데모부터 가겠습니다 .

CAUTION

http://me2.do/FF-flkMj대소문자를 구분해야 합니다

알파벳 소문자 L

애니메이션은 무엇일까 ?

역전 ! 야매요리

twitter @yameyorie-mail usamibabe@naver.comwebtoon

정다정 작가님

애니메이션은 연속된 장면을화면에 빠르게 표시해 움직임을 나타낸다

이미지를 화면에 표시하는 적절한 방법은DOM 과 HTML5 캔버스가 있다<img src="image.png" alt=" 이미지 " />

캔버스는 DOM 과는 달리 객체 별로다루기가 힘들다

<canvas id="canvas"></canvas>

따라서 이미지를 캔버스에 그리기 전에영역 등의 정보를 별도로 관리해야 한다

var o = new Yame();o.age = 32/2*Math.sin(1)+13;o.height = "160cm";o.weight = unde-fined;o.cooking = false;o.defense = "backside";...

그리는 과정은 어떨까 ?

그리기

틱16ms

단일화된 렌더링 파이프라인을 이용해초당 60 번 등록된 객체를 그린다 function draw() { // 지우기 ctx.clearRect(0, 0, ctx.canvas.width, ctx.can-vas.height);

// 등록된 객체를 그리기 for (var i = 0; i < list.length; i++) { list[i].drawEachObject(); }};

// 초당 60 번 반복setInterval(draw, 1000 / 60);

눈에 보이지는 않지만화면을 매번 다시 그린다

draw draw draw draw draw

초당 60 번 반복한다

requestAnimationFrame 을 사용하면좀 더 자연스러운 애니메이션이 된다모바일에서는 iOS6 부터 사용 가능function draw() { requestAnimationFrame(draw); // ...}

requestAnimationFrame(draw);

움직이는 동작은 스프라이트를 이용한다

캔버스에서는 drawImage 를 이용해간단하게 구현할 수 있다var ctx = elCanvas.getContext("2d");ctx.drawImage( 대상이미지 , 원본 x, 원본 y, 원본너비 , 원본높이 , 대상 x, 대상 y, 대상너비 , 대상높이 );

원본 x,y,width,height

drawImage

대상 x,y,width,height

원본과 대상의 크기가 다르면픽셀 조작으로 인해 iOS4 에서 느려진다

원본 너비 100

drawImage

대상 너비 200

var ctx = elCanvas.getContext("2d");ctx.drawImage(elImg, 0, 0, 100, 100, 0, 0, 200, 100);

캔버스로 만든 애니메이션 데모

iOS5

똑같은 데모를 iOS4 가 설치된똑같은 기기에서 실행

iOS4

?!?!?!

빠른 애니메이션을 위해서는하드웨어 가속이 필수iOS5 의 사파리 부터 캔버스 하드웨어 가속 지원

빠름 !

빠름 !

빠름 !

CSS3 3D Transforms 를 이용하면iOS4 에서도 하드웨어 가속이 가능안드로이드 4.0 이상에서도 하드웨어 가속 지원

.displayObject {-webkit-transform:translate3d(x,y,z) scale3d(x, y, z) rotateZ(deg);-wekit-transform-origin:0 0;-webkit-transform-style:preserve-3d;}

다른 CSS 속성이 같이 변경되면애니메이션 속도가 느리다background-position 과 같은 속성을 사용할 수 없다따라서 3D 속성만 사용할 수 있도록 구조를 만든다

DIV(overflow:hidden)IMG(position:absolute)

CSS3 3D Transforms 를 사용한 데모

iOS4

끝 ?

기기 별로 다른 대응을 해야 한다안드로이드 4.0 미만은 하드웨어 가속을 받을 수 없다

기기 /OS iPhone3GS

iPhone4

iPhone4S

Android3 미만

Android3 이상

렌더링방식

CSS3D

CSS3D(iOS4 이

하 ) Can-vas

Canvasor

DOMCSS3D

Canvas(iOS5 이

상 )

안드로이드 4.0 도 문제가 있다- 한 면이 2048 픽셀을 넘어가는 이미지를

사용하면화면에 검정색으로 표시 된다 .

- 회전을 하게 되면 overflow:hidden 영역의크기가 바뀐다 .

"10 만원대 갤럭시 S3 놓칠라 " 대리점 폭주

갤 S3 공짜폰에 유통 대란 ... " 전산 마비 "

" 갤럭시 S3 17 만원 판매 " 일파만파

to. 안드로이드 2.X 사용자 분들께

바꿔주세요 . 제발 ...

from. 익명의 개발자

이렇게 어려운 상황이지만방법은 있다

Collie

콜리는 18 종 이상의 모바일 기기에대응하는 모바일에 최적화된 라이브러리

더 빠른 방식으로 렌더링 한다

이벤트 모델이 다르기 때문에캔버스에도 버블링을 구현

<div> <img /></div>

var layer = new collie.Layer();var parent = new collie.DisplayOb-ject();var child = new collie.DisplayObject();parent.addTo(layer);child.addTo(parent);img

div

body

child

parent

layer

캔버스와 DOM 에서 보다 정밀한 이벤트영역을 찾기 위해 hitArea 적용- PNPOLY 알고리즘을 이용해 캔버스의 getIm-

ageData 보다 빠르게 영역 확인 가능- 외부 도메인의 이미지일 경우 getImageData

사용 불가능[[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]]

비동기 이미지 로딩의 불편함을 해소하는ImageManager 제공A 로딩 이미지 로딩 끝

A 사용 실제 A 이미지를 적용

많은 수의 객체를 다루기 위해타일 캐시 기능 제공

캔버스 캔버스

체스판과 같은 정적인 타일 맵을 만들 때 유리

간단하게 고해상도 디스플레이 지원성능 문제로 인해 아이폰 레티나만 지원var isRetina = collie.Renderer.isRetinaDisplay();collie.ImageManager.addImages({ yame : (isRetina ? "large" : "small") + "/yame.png"});

a

개별 편의성 제공처음에 나온 토끼가 움직이는 애니메이션 구현 예제

collie.ImageManager.addImages({ yame : "img/yame.png" });

var layer = new collie.Layer({ width : 320, height : 480 });var yame = new collie.DisplayObject({ width : 100, height : 180, backgroundImage : "yame"}).addTo(layer);

collie.Timer.cycle(yame, 1000, { to : 7 });yame.move(200, 0, 100);

collie.Renderer.addLayer(layer);collie.Renderer.load(document.getElementById("t");collie.Renderer.start();

오픈소스LGPL v2.1

http://jindo.dev.naver.com/colliehttp://dev.naver.com 에서도 찾을 수 있습니다 .