54
Collie 심상민 HTML5 Animation Library

제2회 hello world 오픈세미나 collie html5-animationlibrary

Embed Size (px)

Citation preview

Page 1: 제2회 hello world 오픈세미나 collie html5-animationlibrary

Collie����������� ������������������  

심상민����������� ������������������  

HTML5����������� ������������������  Animation����������� ������������������  Library����������� ������������������  

Page 2: 제2회 hello world 오픈세미나 collie html5-animationlibrary

발표자����������� ������������������  

Page 3: 제2회 hello world 오픈세미나 collie html5-animationlibrary

여러����������� ������������������  분들이����������� ������������������  얻어갈����������� ������������������  수����������� ������������������  있는����������� ������������������  것����������� ������������������  

•  자바스크립트로����������� ������������������  어디까지����������� ������������������  가능할까?����������� ������������������  

•  자바스크립트로����������� ������������������  게임����������� ������������������  어떻게����������� ������������������  만들까?����������� ������������������  

•  개발����������� ������������������  노하우����������� ������������������  

•  콜리가����������� ������������������  뭘까?����������� ������������������  

Page 4: 제2회 hello world 오픈세미나 collie html5-animationlibrary

자바스크립트����������� ������������������  애니메이션이란����������� ������������������  

Page 5: 제2회 hello world 오픈세미나 collie html5-animationlibrary

자바스크립트����������� ������������������  애니메이션����������� ������������������  

Page 6: 제2회 hello world 오픈세미나 collie html5-animationlibrary

조금����������� ������������������  더����������� ������������������  자세히����������� ������������������  살펴보자����������� ������������������  

Page 7: 제2회 hello world 오픈세미나 collie html5-animationlibrary

리소스����������� ������������������  관리����������� ������������������  

이미지����������� ������������������  로딩����������� ������������������  

Page 8: 제2회 hello world 오픈세미나 collie html5-animationlibrary

리소스����������� ������������������  관리����������� ������������������  

•  게임이나����������� ������������������  애니메이션은����������� ������������������  웹����������� ������������������  페이지보다����������� ������������������  리소스가����������� ������������������  많고����������� ������������������  용량이����������� ������������������  큼(통상����������� ������������������  3MB����������� ������������������  이상)����������� ������������������  

Page 9: 제2회 hello world 오픈세미나 collie html5-animationlibrary

리소스����������� ������������������  관리����������� ������������������  

•  초기����������� ������������������  로딩����������� ������������������  화면����������� ������������������  필요����������� ������������������  

•  비동기로����������� ������������������  리소스를����������� ������������������  관리해야����������� ������������������  함����������� ������������������  

var elImg = document.createElement(“img”); elImg.onload = function () {

alert(“ok!”);

};

elImg.onerror = function () {

alert(“error”);

};

elImg.src = “test.png”;

document.body.appendChild(elImg);

Page 10: 제2회 hello world 오픈세미나 collie html5-animationlibrary

객체화����������� ������������������  

객체화����������� ������������������  

Page 11: 제2회 hello world 오픈세미나 collie html5-animationlibrary

객체화����������� ������������������  

•  DOM은����������� ������������������  API����������� ������������������  구조����������� ������������������  상����������� ������������������  객체����������� ������������������  별로����������� ������������������  다룰����������� ������������������  수����������� ������������������  있음����������� ������������������  

•  HTML5����������� ������������������  Canvas는����������� ������������������  객체����������� ������������������  별로����������� ������������������  다룰����������� ������������������  수����������� ������������������  없음����������� ������������������  

DOM은����������� ������������������  객체����������� ������������������  별로����������� ������������������  관리����������� ������������������  가능����������� ������������������   Canvas는����������� ������������������  한개의����������� ������������������  Context에����������� ������������������  그리는����������� ������������������  방식����������� ������������������  

Page 12: 제2회 hello world 오픈세미나 collie html5-animationlibrary

객체화����������� ������������������  

캔버스����������� ������������������  엘리먼트����������� ������������������  

그리는����������� ������������������  정보를����������� ������������������  갖고����������� ������������������  있는����������� ������������������  각각의����������� ������������������  객체����������� ������������������  필요����������� ������������������  

Page 13: 제2회 hello world 오픈세미나 collie html5-animationlibrary

객체화����������� ������������������  

•  객체의����������� ������������������  위치,����������� ������������������  표시����������� ������������������  속성,����������� ������������������  기타����������� ������������������  옵션����������� ������������������  정보����������� ������������������  필요����������� ������������������  

var oItem = new Item(); oItem.width = 100;

oItem.height = 100; oItem.x = 50;

oItem.y = 150;

oItem.color = “#123456”; oItem.visible = true;

Page 14: 제2회 hello world 오픈세미나 collie html5-animationlibrary

애니메이션����������� ������������������  

애니메이션����������� ������������������  

Page 15: 제2회 hello world 오픈세미나 collie html5-animationlibrary

애니메이션����������� ������������������  

•  CSS����������� ������������������  Transition은����������� ������������������  많은����������� ������������������  객체를����������� ������������������  다루기에����������� ������������������  적합하지����������� ������������������  않음����������� ������������������  

•  타이머를����������� ������������������  이용한����������� ������������������  렌더링����������� ������������������  파이프라인을����������� ������������������  적용����������� ������������������  

Page 16: 제2회 hello world 오픈세미나 collie html5-animationlibrary

렌더링����������� ������������������  파이프라인����������� ������������������  

// 그리기 function draw() {

// 캔버스를����������� ������������������  지움

ctx.clearRect(0, 0, width, height);

// 등록된����������� ������������������  객체를����������� ������������������  그림

for (var idx in list) {

list[idx].draw();

}

};

// 1초에����������� ������������������  60번����������� ������������������  반복한다

setInterval(draw, 1000 / 60);

Page 17: 제2회 hello world 오픈세미나 collie html5-animationlibrary

애니메이션����������� ������������������  

그리기����������� ������������������   그리기����������� ������������������   그리기����������� ������������������  그리기����������� ������������������   그리기����������� ������������������  

초당����������� ������������������  60번����������� ������������������  반복����������� ������������������  

Page 18: 제2회 hello world 오픈세미나 collie html5-animationlibrary

왜����������� ������������������  1초에����������� ������������������  60번인가?����������� ������������������  

•  모니터는����������� ������������������  1초에����������� ������������������  60번����������� ������������������  화면을����������� ������������������  표시한다(60Hz)����������� ������������������  

•  FPS����������� ������������������  60이상����������� ������������������  표현하는����������� ������������������  것은����������� ������������������  모니터의����������� ������������������  능력을����������� ������������������  벗어나는����������� ������������������  것����������� ������������������  

Page 19: 제2회 hello world 오픈세미나 collie html5-animationlibrary

캔버스����������� ������������������  화면����������� ������������������  지우기����������� ������������������  

•  drawRect를����������� ������������������  사용����������� ������������������  

•  width,����������� ������������������  height를����������� ������������������  재설정����������� ������������������  

var ctx = elCanvas.getContext(“2d”); ctx.fillStyle = “#ffffff”;

ctx.drawRect(0, 0, elCanvas.width, elCanvas.height);

elCanvas.width = 100; elCanvas.height = 100;

속도가����������� ������������������  느림����������� ������������������  

빠르긴����������� ������������������  하나����������� ������������������  캔버스가����������� ������������������  지워진����������� ������������������  후에����������� ������������������  transform����������� ������������������  기능을����������� ������������������  사용하게����������� ������������������  되면����������� ������������������  느림����������� ������������������  

Page 20: 제2회 hello world 오픈세미나 collie html5-animationlibrary

캔버스����������� ������������������  지우기����������� ������������������  

•  clearRect를����������� ������������������  사용����������� ������������������  

����������� ������������������  

var ctx = elCanvas.getContext(“2d”); ctx.clearRect(0, 0, elCanvas.width, elCanvas.height);

width,����������� ������������������  height����������� ������������������  재설정����������� ������������������  보다는����������� ������������������  지워지는����������� ������������������  속도가����������� ������������������  느리나����������� ������������������  안정적임����������� ������������������  

Page 21: 제2회 hello world 오픈세미나 collie html5-animationlibrary

스프라이트����������� ������������������  애니메이션����������� ������������������  

•  한����������� ������������������  장의����������� ������������������  이미지에����������� ������������������  여러����������� ������������������  동작의����������� ������������������  프레임을����������� ������������������  모아����������� ������������������  놓고����������� ������������������  보여지는����������� ������������������  영역을����������� ������������������  움직이면서����������� ������������������  애니메이션����������� ������������������  

Page 22: 제2회 hello world 오픈세미나 collie html5-animationlibrary

DOM에서����������� ������������������  스프라이트����������� ������������������  구현����������� ������������������  방식����������� ������������������  

•  한����������� ������������������  개의����������� ������������������  DIV����������� ������������������  엘리먼트에����������� ������������������  자식����������� ������������������  이미지����������� ������������������  엘리먼트를����������� ������������������  생성����������� ������������������  

•  객체의����������� ������������������  이동은����������� ������������������  CSS����������� ������������������  Transform의����������� ������������������  translate����������� ������������������  속성을����������� ������������������  이용����������� ������������������  

•  스프라이트����������� ������������������  애니메이션은����������� ������������������  이미지����������� ������������������  엘리먼트의����������� ������������������  translate����������� ������������������  속성을����������� ������������������  이용����������� ������������������  

DIV����������� ������������������  

IMG����������� ������������������  

overflow:hidden����������� ������������������  

Page 23: 제2회 hello world 오픈세미나 collie html5-animationlibrary

DOM에서����������� ������������������  스프라이트����������� ������������������  구현����������� ������������������  방식����������� ������������������  

<div style=“position:absolute; overflow:hidden; width:100px; height:100px; transform:translate3d(100px, 100px, 0);”> <img src=“sprite.png” style=“position:absolute; transform:translate3d(-100px, 0, 0);” border=“0” alt=“” /> </div>

•  DIV와����������� ������������������  이미지����������� ������������������  엘리먼트에����������� ������������������  CSS3D를����������� ������������������  적용하기����������� ������������������  위함����������� ������������������  

Page 24: 제2회 hello world 오픈세미나 collie html5-animationlibrary

CSS3D����������� ������������������  하드웨어����������� ������������������  가속����������� ������������������  

•  CSS3D를����������� ������������������  사용하면����������� ������������������  하드웨어����������� ������������������  가속을����������� ������������������  받아����������� ������������������  빠르게����������� ������������������  동작함����������� ������������������  

•  IE10,����������� ������������������  파이어폭스,����������� ������������������  크롬,����������� ������������������  사파리,����������� ������������������  iOS,����������� ������������������  안드로이드����������� ������������������  3.0����������� ������������������  이상����������� ������������������  지원����������� ������������������  

����������� ������������������  

Page 25: 제2회 hello world 오픈세미나 collie html5-animationlibrary

CSS3D����������� ������������������  하드웨어����������� ������������������  가속����������� ������������������  

•  안드로이드����������� ������������������  ICS����������� ������������������  CSS3D����������� ������������������  버그����������� ������������������  굉장히����������� ������������������  많음����������� ������������������  

Page 26: 제2회 hello world 오픈세미나 collie html5-animationlibrary

캔버스에서����������� ������������������  스프라이트����������� ������������������  구현����������� ������������������  방식����������� ������������������  

•  Context의����������� ������������������  drawImage����������� ������������������  메소드를����������� ������������������  사용����������� ������������������  

var ctx = elCanvas.getContext(“2d”); ctx.drawImage(대상이미지엘리먼트, 원본x, 원본y, 원본너비, 원본높이, 대상x, 대상y, 대상너비, 대상높이);

원본x,y,width,height����������� ������������������  

drawImage����������� ������������������  

대상x,y,width,height����������� ������������������  

Page 27: 제2회 hello world 오픈세미나 collie html5-animationlibrary

Pixel����������� ������������������  Manipulation에����������� ������������������  의한����������� ������������������  성능����������� ������������������  저하����������� ������������������  

•  원본����������� ������������������  width,����������� ������������������  height와����������� ������������������  대상����������� ������������������  width,����������� ������������������  height가����������� ������������������  다른����������� ������������������  경우����������� ������������������  모바일����������� ������������������  환경,����������� ������������������  특히����������� ������������������  iOS4����������� ������������������  버전에서����������� ������������������  성능����������� ������������������  저하가����������� ������������������  발생����������� ������������������  

원본x,y,width,height����������� ������������������  

drawImage����������� ������������������  

픽셀����������� ������������������  조작����������� ������������������  발생����������� ������������������  

Page 28: 제2회 hello world 오픈세미나 collie html5-animationlibrary

소숫점����������� ������������������  연산에����������� ������������������  의한����������� ������������������  성능����������� ������������������  저하����������� ������������������  

•  캔버스에서����������� ������������������  소숫점����������� ������������������  연산을����������� ������������������  수행하는����������� ������������������  경우����������� ������������������  안티앨리어싱을����������� ������������������  사용하게����������� ������������������  됨����������� ������������������  

•  안티앨리어싱을����������� ������������������  사용하는����������� ������������������  경우����������� ������������������  느려짐����������� ������������������  

Page 29: 제2회 hello world 오픈세미나 collie html5-animationlibrary

이벤트����������� ������������������  처리����������� ������������������  

•  객체의����������� ������������������  영역을����������� ������������������  계산해서����������� ������������������  이벤트를����������� ������������������  받을����������� ������������������  대상인지����������� ������������������  확인한다����������� ������������������  

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

) { // 이벤트가����������� ������������������  객체����������� ������������������  영역����������� ������������������  안에서����������� ������������������  일어났음

}

}

Page 30: 제2회 hello world 오픈세미나 collie html5-animationlibrary

이벤트����������� ������������������  처리����������� ������������������  

•  영역으로����������� ������������������  이벤트����������� ������������������  처리를����������� ������������������  하게����������� ������������������  되면����������� ������������������  객체의����������� ������������������  사각형����������� ������������������  형태로만����������� ������������������  이벤트를����������� ������������������  인식할����������� ������������������  수����������� ������������������  있음����������� ������������������  

•  정밀한����������� ������������������  이벤트����������� ������������������  영역����������� ������������������  처리����������� ������������������  필요����������� ������������������  

Page 31: 제2회 hello world 오픈세미나 collie html5-animationlibrary

이벤트����������� ������������������  처리����������� ������������������  

•  캔버스에서����������� ������������������  Context의����������� ������������������  getImageData로����������� ������������������  픽셀����������� ������������������  정보����������� ������������������  얻어옴����������� ������������������  

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

// 픽셀����������� ������������������  정보가����������� ������������������  있음

}

Page 32: 제2회 hello world 오픈세미나 collie html5-animationlibrary

Information����������� ������������������  Leakage����������� ������������������  보안����������� ������������������  이슈����������� ������������������  

•  외부����������� ������������������  도메인이����������� ������������������  아닌����������� ������������������  이미지를����������� ������������������  불러오면����������� ������������������  캔버스의����������� ������������������  origin-clean����������� ������������������  플래그가����������� ������������������  false설정됨����������� ������������������  

•  origin-clean가����������� ������������������  false면����������� ������������������  픽셀����������� ������������������  정보를����������� ������������������  가져올����������� ������������������  수����������� ������������������  없음����������� ������������������  

•  이����������� ������������������  정책은����������� ������������������  강력해서����������� ������������������  한����������� ������������������  번이라도����������� ������������������  외부����������� ������������������  도메인의����������� ������������������  이미지를����������� ������������������  불러왔다면����������� ������������������  false에서����������� ������������������  리셋되지����������� ������������������  않음����������� ������������������  

•  width,����������� ������������������  height를����������� ������������������  재설정해서����������� ������������������  캔버스를����������� ������������������  지운다����������� ������������������  해도����������� ������������������  origin-clean����������� ������������������  값은����������� ������������������  변하지����������� ������������������  않음����������� ������������������  

•  DOM����������� ������������������  Exception����������� ������������������  발생����������� ������������������  

Page 33: 제2회 hello world 오픈세미나 collie html5-animationlibrary

이제����������� ������������������  어느정도����������� ������������������  자바스크립트로����������� ������������������  애니메이션/게임을����������� ������������������  만들����������� ������������������  수����������� ������������������  있겠지����������� ������������������  

Page 34: 제2회 hello world 오픈세미나 collie html5-animationlibrary
Page 35: 제2회 hello world 오픈세미나 collie html5-animationlibrary

모바일����������� ������������������  성능����������� ������������������  문제����������� ������������������  

•  iOS4����������� ������������������  이하에서는����������� ������������������  캔버스가����������� ������������������  느림����������� ������������������  

•  iOS5����������� ������������������  이상에서는����������� ������������������  캔버스가����������� ������������������  빠름����������� ������������������  

•  안드로이드에서는����������� ������������������  둘다����������� ������������������  느림����������� ������������������  

•  안드로이드ICS����������� ������������������  CSS3D����������� ������������������  빠르지만����������� ������������������  버그����������� ������������������  많음����������� ������������������  

•  안드로이드는����������� ������������������  현재����������� ������������������  답이����������� ������������������  없음����������� ������������������  

Page 36: 제2회 hello world 오픈세미나 collie html5-animationlibrary

성능에����������� ������������������  따른����������� ������������������  렌더링����������� ������������������  방식����������� ������������������  

기기/OS 아이폰3GS

아이폰 4

아이폰 4S

안드로이드3미만

안드로이드3이상

렌더링 방식 CSS3D Canvas

DOM /

Canvas CSS3D

Page 37: 제2회 hello world 오픈세미나 collie html5-animationlibrary

라이브러리����������� ������������������  필요함����������� ������������������  

•  다양한����������� ������������������  환경에����������� ������������������  대응하는����������� ������������������  라이브러리����������� ������������������  필요����������� ������������������  

•  굉장히����������� ������������������  많은����������� ������������������  라이브러리����������� ������������������  존재����������� ������������������  

Page 38: 제2회 hello world 오픈세미나 collie html5-animationlibrary

라이브러리����������� ������������������  필요함����������� ������������������  

•  모든����������� ������������������  PC/모바일����������� ������������������  환경에����������� ������������������  대응하는����������� ������������������  라이브러리����������� ������������������  없음����������� ������������������  

•  성능보다는����������� ������������������  개발����������� ������������������  툴이나����������� ������������������  게임����������� ������������������  지원����������� ������������������  기능이����������� ������������������  많음����������� ������������������  

•  빠르게����������� ������������������  변하는����������� ������������������  모바일����������� ������������������  시장에����������� ������������������  대응해야����������� ������������������  함����������� ������������������  

Page 39: 제2회 hello world 오픈세미나 collie html5-animationlibrary

그래서����������� ������������������  만들었습니다����������� ������������������  

Page 40: 제2회 hello world 오픈세미나 collie html5-animationlibrary

콜리����������� ������������������  

Page 41: 제2회 hello world 오픈세미나 collie html5-animationlibrary
Page 42: 제2회 hello world 오픈세미나 collie html5-animationlibrary

콜리(Collie)����������� ������������������  

•  PC����������� ������������������  환경����������� ������������������  및����������� ������������������  모바일����������� ������������������  iOS/Android����������� ������������������  13종����������� ������������������  이상����������� ������������������  대응����������� ������������������  

•  상황에����������� ������������������  따라����������� ������������������  최적의����������� ������������������  성능을����������� ������������������  위한����������� ������������������  DOM/CSS3D/Canvas����������� ������������������  적용����������� ������������������  

Page 43: 제2회 hello world 오픈세미나 collie html5-animationlibrary

콜리(Collie)����������� ������������������  

•  프레임����������� ������������������  스킵으로����������� ������������������  예정된����������� ������������������  애니메이션을����������� ������������������  재생����������� ������������������  

Page 44: 제2회 hello world 오픈세미나 collie html5-animationlibrary

콜리(Collie)����������� ������������������  

•  고해상도����������� ������������������  이미지����������� ������������������  지원(레티나����������� ������������������  디스플레이)����������� ������������������  

Page 45: 제2회 hello world 오픈세미나 collie html5-animationlibrary

콜리(Collie)����������� ������������������  

•  DOM����������� ������������������  /����������� ������������������  Canvas����������� ������������������  모두����������� ������������������  정밀한����������� ������������������  이벤트����������� ������������������  영역����������� ������������������  지원����������� ������������������  

•  정밀한����������� ������������������  이벤트를����������� ������������������  위한����������� ������������������  패스����������� ������������������  추출����������� ������������������  도구����������� ������������������  지원����������� ������������������  

Page 46: 제2회 hello world 오픈세미나 collie html5-animationlibrary

콜리(Collie)����������� ������������������  

•  캔버스����������� ������������������  텍스트����������� ������������������  자동����������� ������������������  줄����������� ������������������  바꿈,����������� ������������������  말����������� ������������������  줄임����������� ������������������  지원����������� ������������������  

Page 47: 제2회 hello world 오픈세미나 collie html5-animationlibrary

콜리(Collie)����������� ������������������  

•  버퍼링����������� ������������������  기능����������� ������������������  지원����������� ������������������  

그리기

Page 48: 제2회 hello world 오픈세미나 collie html5-animationlibrary

콜리(Collie)����������� ������������������  

•  개발����������� ������������������  편의성을����������� ������������������  위한����������� ������������������  다양한����������� ������������������  기능����������� ������������������  

•  스프라이트����������� ������������������  애니메이션을����������� ������������������  위한����������� ������������������  기능����������� ������������������  

•  API����������� ������������������  문서����������� ������������������  

•  튜토리얼,����������� ������������������  샘플����������� ������������������  프로젝트����������� ������������������  

Page 49: 제2회 hello world 오픈세미나 collie html5-animationlibrary

그리고����������� ������������������  오픈소스����������� ������������������  

LGPL����������� ������������������  v2.1����������� ������������������  로����������� ������������������  하고����������� ������������������  싶으나����������� ������������������  아직����������� ������������������  미정����������� ������������������  

Page 50: 제2회 hello world 오픈세미나 collie html5-animationlibrary

커밍순����������� ������������������  

Page 51: 제2회 hello world 오픈세미나 collie html5-animationlibrary

자바스크립트����������� ������������������  애니메이션����������� ������������������  /����������� ������������������  게임의����������� ������������������  한계����������� ������������������  

•  PC에서는����������� ������������������  아무����������� ������������������  문제����������� ������������������  없음����������� ������������������  

•  모바일에서는����������� ������������������  성능����������� ������������������  한계����������� ������������������  존재����������� ������������������  

•  움직이는����������� ������������������  객체가����������� ������������������  30개����������� ������������������  정도가����������� ������������������  넘어가면����������� ������������������  성능에����������� ������������������  문제가����������� ������������������  있음����������� ������������������  

•  안드로이드����������� ������������������  태생적����������� ������������������  한계����������� ������������������  존재����������� ������������������  

Page 52: 제2회 hello world 오픈세미나 collie html5-animationlibrary

모바일����������� ������������������  웹����������� ������������������  게임����������� ������������������  구현����������� ������������������  가능성����������� ������������������  

•  사용자의����������� ������������������  입력에����������� ������������������  실시간으로����������� ������������������  반영되는����������� ������������������  경우는����������� ������������������  구현����������� ������������������  불가능����������� ������������������  

Page 53: 제2회 hello world 오픈세미나 collie html5-animationlibrary

모바일����������� ������������������  웹����������� ������������������  게임����������� ������������������  구현����������� ������������������  가능성����������� ������������������  

•  애니메이션이����������� ������������������  표현일����������� ������������������  경우나����������� ������������������  진행에����������� ������������������  문제가����������� ������������������  없는����������� ������������������  경우����������� ������������������  구현����������� ������������������  가능����������� ������������������  

Page 54: 제2회 hello world 오픈세미나 collie html5-animationlibrary