Upload
naver-d2
View
5.570
Download
7
Embed Size (px)
Citation preview
Collie����������� ������������������
심상민����������� ������������������
HTML5����������� ������������������ Animation����������� ������������������ Library����������� ������������������
발표자����������� ������������������
여러����������� ������������������ 분들이����������� ������������������ 얻어갈����������� ������������������ 수����������� ������������������ 있는����������� ������������������ 것����������� ������������������
• 자바스크립트로����������� ������������������ 어디까지����������� ������������������ 가능할까?����������� ������������������
• 자바스크립트로����������� ������������������ 게임����������� ������������������ 어떻게����������� ������������������ 만들까?����������� ������������������
• 개발����������� ������������������ 노하우����������� ������������������
• 콜리가����������� ������������������ 뭘까?����������� ������������������
자바스크립트����������� ������������������ 애니메이션이란����������� ������������������
자바스크립트����������� ������������������ 애니메이션����������� ������������������
조금����������� ������������������ 더����������� ������������������ 자세히����������� ������������������ 살펴보자����������� ������������������
리소스����������� ������������������ 관리����������� ������������������
이미지����������� ������������������ 로딩����������� ������������������
리소스����������� ������������������ 관리����������� ������������������
• 게임이나����������� ������������������ 애니메이션은����������� ������������������ 웹����������� ������������������ 페이지보다����������� ������������������ 리소스가����������� ������������������ 많고����������� ������������������ 용량이����������� ������������������ 큼(통상����������� ������������������ 3MB����������� ������������������ 이상)����������� ������������������
리소스����������� ������������������ 관리����������� ������������������
• 초기����������� ������������������ 로딩����������� ������������������ 화면����������� ������������������ 필요����������� ������������������
• 비동기로����������� ������������������ 리소스를����������� ������������������ 관리해야����������� ������������������ 함����������� ������������������
var elImg = document.createElement(“img”); elImg.onload = function () {
alert(“ok!”);
};
elImg.onerror = function () {
alert(“error”);
};
elImg.src = “test.png”;
document.body.appendChild(elImg);
객체화����������� ������������������
객체화����������� ������������������
객체화����������� ������������������
• DOM은����������� ������������������ API����������� ������������������ 구조����������� ������������������ 상����������� ������������������ 객체����������� ������������������ 별로����������� ������������������ 다룰����������� ������������������ 수����������� ������������������ 있음����������� ������������������
• HTML5����������� ������������������ Canvas는����������� ������������������ 객체����������� ������������������ 별로����������� ������������������ 다룰����������� ������������������ 수����������� ������������������ 없음����������� ������������������
DOM은����������� ������������������ 객체����������� ������������������ 별로����������� ������������������ 관리����������� ������������������ 가능����������� ������������������ Canvas는����������� ������������������ 한개의����������� ������������������ Context에����������� ������������������ 그리는����������� ������������������ 방식����������� ������������������
객체화����������� ������������������
캔버스����������� ������������������ 엘리먼트����������� ������������������
그리는����������� ������������������ 정보를����������� ������������������ 갖고����������� ������������������ 있는����������� ������������������ 각각의����������� ������������������ 객체����������� ������������������ 필요����������� ������������������
객체화����������� ������������������
• 객체의����������� ������������������ 위치,����������� ������������������ 표시����������� ������������������ 속성,����������� ������������������ 기타����������� ������������������ 옵션����������� ������������������ 정보����������� ������������������ 필요����������� ������������������
var oItem = new Item(); oItem.width = 100;
oItem.height = 100; oItem.x = 50;
oItem.y = 150;
oItem.color = “#123456”; oItem.visible = true;
애니메이션����������� ������������������
애니메이션����������� ������������������
애니메이션����������� ������������������
• CSS����������� ������������������ Transition은����������� ������������������ 많은����������� ������������������ 객체를����������� ������������������ 다루기에����������� ������������������ 적합하지����������� ������������������ 않음����������� ������������������
• 타이머를����������� ������������������ 이용한����������� ������������������ 렌더링����������� ������������������ 파이프라인을����������� ������������������ 적용����������� ������������������
렌더링����������� ������������������ 파이프라인����������� ������������������
// 그리기 function draw() {
// 캔버스를����������� ������������������ 지움
ctx.clearRect(0, 0, width, height);
// 등록된����������� ������������������ 객체를����������� ������������������ 그림
for (var idx in list) {
list[idx].draw();
}
};
// 1초에����������� ������������������ 60번����������� ������������������ 반복한다
setInterval(draw, 1000 / 60);
애니메이션����������� ������������������
그리기����������� ������������������ 그리기����������� ������������������ 그리기����������� ������������������ 그리기����������� ������������������ 그리기����������� ������������������
초당����������� ������������������ 60번����������� ������������������ 반복����������� ������������������
왜����������� ������������������ 1초에����������� ������������������ 60번인가?����������� ������������������
• 모니터는����������� ������������������ 1초에����������� ������������������ 60번����������� ������������������ 화면을����������� ������������������ 표시한다(60Hz)����������� ������������������
• FPS����������� ������������������ 60이상����������� ������������������ 표현하는����������� ������������������ 것은����������� ������������������ 모니터의����������� ������������������ 능력을����������� ������������������ 벗어나는����������� ������������������ 것����������� ������������������
캔버스����������� ������������������ 화면����������� ������������������ 지우기����������� ������������������
• 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����������� ������������������ 기능을����������� ������������������ 사용하게����������� ������������������ 되면����������� ������������������ 느림����������� ������������������
캔버스����������� ������������������ 지우기����������� ������������������
• clearRect를����������� ������������������ 사용����������� ������������������
����������� ������������������
var ctx = elCanvas.getContext(“2d”); ctx.clearRect(0, 0, elCanvas.width, elCanvas.height);
width,����������� ������������������ height����������� ������������������ 재설정����������� ������������������ 보다는����������� ������������������ 지워지는����������� ������������������ 속도가����������� ������������������ 느리나����������� ������������������ 안정적임����������� ������������������
스프라이트����������� ������������������ 애니메이션����������� ������������������
• 한����������� ������������������ 장의����������� ������������������ 이미지에����������� ������������������ 여러����������� ������������������ 동작의����������� ������������������ 프레임을����������� ������������������ 모아����������� ������������������ 놓고����������� ������������������ 보여지는����������� ������������������ 영역을����������� ������������������ 움직이면서����������� ������������������ 애니메이션����������� ������������������
DOM에서����������� ������������������ 스프라이트����������� ������������������ 구현����������� ������������������ 방식����������� ������������������
• 한����������� ������������������ 개의����������� ������������������ DIV����������� ������������������ 엘리먼트에����������� ������������������ 자식����������� ������������������ 이미지����������� ������������������ 엘리먼트를����������� ������������������ 생성����������� ������������������
• 객체의����������� ������������������ 이동은����������� ������������������ CSS����������� ������������������ Transform의����������� ������������������ translate����������� ������������������ 속성을����������� ������������������ 이용����������� ������������������
• 스프라이트����������� ������������������ 애니메이션은����������� ������������������ 이미지����������� ������������������ 엘리먼트의����������� ������������������ translate����������� ������������������ 속성을����������� ������������������ 이용����������� ������������������
DIV����������� ������������������
IMG����������� ������������������
overflow:hidden����������� ������������������
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를����������� ������������������ 적용하기����������� ������������������ 위함����������� ������������������
CSS3D����������� ������������������ 하드웨어����������� ������������������ 가속����������� ������������������
• CSS3D를����������� ������������������ 사용하면����������� ������������������ 하드웨어����������� ������������������ 가속을����������� ������������������ 받아����������� ������������������ 빠르게����������� ������������������ 동작함����������� ������������������
• IE10,����������� ������������������ 파이어폭스,����������� ������������������ 크롬,����������� ������������������ 사파리,����������� ������������������ iOS,����������� ������������������ 안드로이드����������� ������������������ 3.0����������� ������������������ 이상����������� ������������������ 지원����������� ������������������
����������� ������������������
CSS3D����������� ������������������ 하드웨어����������� ������������������ 가속����������� ������������������
• 안드로이드����������� ������������������ ICS����������� ������������������ CSS3D����������� ������������������ 버그����������� ������������������ 굉장히����������� ������������������ 많음����������� ������������������
캔버스에서����������� ������������������ 스프라이트����������� ������������������ 구현����������� ������������������ 방식����������� ������������������
• Context의����������� ������������������ drawImage����������� ������������������ 메소드를����������� ������������������ 사용����������� ������������������
var ctx = elCanvas.getContext(“2d”); ctx.drawImage(대상이미지엘리먼트, 원본x, 원본y, 원본너비, 원본높이, 대상x, 대상y, 대상너비, 대상높이);
원본x,y,width,height����������� ������������������
drawImage����������� ������������������
대상x,y,width,height����������� ������������������
Pixel����������� ������������������ Manipulation에����������� ������������������ 의한����������� ������������������ 성능����������� ������������������ 저하����������� ������������������
• 원본����������� ������������������ width,����������� ������������������ height와����������� ������������������ 대상����������� ������������������ width,����������� ������������������ height가����������� ������������������ 다른����������� ������������������ 경우����������� ������������������ 모바일����������� ������������������ 환경,����������� ������������������ 특히����������� ������������������ iOS4����������� ������������������ 버전에서����������� ������������������ 성능����������� ������������������ 저하가����������� ������������������ 발생����������� ������������������
원본x,y,width,height����������� ������������������
drawImage����������� ������������������
픽셀����������� ������������������ 조작����������� ������������������ 발생����������� ������������������
소숫점����������� ������������������ 연산에����������� ������������������ 의한����������� ������������������ 성능����������� ������������������ 저하����������� ������������������
• 캔버스에서����������� ������������������ 소숫점����������� ������������������ 연산을����������� ������������������ 수행하는����������� ������������������ 경우����������� ������������������ 안티앨리어싱을����������� ������������������ 사용하게����������� ������������������ 됨����������� ������������������
• 안티앨리어싱을����������� ������������������ 사용하는����������� ������������������ 경우����������� ������������������ 느려짐����������� ������������������
이벤트����������� ������������������ 처리����������� ������������������
• 객체의����������� ������������������ 영역을����������� ������������������ 계산해서����������� ������������������ 이벤트를����������� ������������������ 받을����������� ������������������ 대상인지����������� ������������������ 확인한다����������� ������������������
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
) { // 이벤트가����������� ������������������ 객체����������� ������������������ 영역����������� ������������������ 안에서����������� ������������������ 일어났음
}
}
이벤트����������� ������������������ 처리����������� ������������������
• 영역으로����������� ������������������ 이벤트����������� ������������������ 처리를����������� ������������������ 하게����������� ������������������ 되면����������� ������������������ 객체의����������� ������������������ 사각형����������� ������������������ 형태로만����������� ������������������ 이벤트를����������� ������������������ 인식할����������� ������������������ 수����������� ������������������ 있음����������� ������������������
• 정밀한����������� ������������������ 이벤트����������� ������������������ 영역����������� ������������������ 처리����������� ������������������ 필요����������� ������������������
이벤트����������� ������������������ 처리����������� ������������������
• 캔버스에서����������� ������������������ 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) {
// 픽셀����������� ������������������ 정보가����������� ������������������ 있음
}
Information����������� ������������������ Leakage����������� ������������������ 보안����������� ������������������ 이슈����������� ������������������
• 외부����������� ������������������ 도메인이����������� ������������������ 아닌����������� ������������������ 이미지를����������� ������������������ 불러오면����������� ������������������ 캔버스의����������� ������������������ origin-clean����������� ������������������ 플래그가����������� ������������������ false설정됨����������� ������������������
• origin-clean가����������� ������������������ false면����������� ������������������ 픽셀����������� ������������������ 정보를����������� ������������������ 가져올����������� ������������������ 수����������� ������������������ 없음����������� ������������������
• 이����������� ������������������ 정책은����������� ������������������ 강력해서����������� ������������������ 한����������� ������������������ 번이라도����������� ������������������ 외부����������� ������������������ 도메인의����������� ������������������ 이미지를����������� ������������������ 불러왔다면����������� ������������������ false에서����������� ������������������ 리셋되지����������� ������������������ 않음����������� ������������������
• width,����������� ������������������ height를����������� ������������������ 재설정해서����������� ������������������ 캔버스를����������� ������������������ 지운다����������� ������������������ 해도����������� ������������������ origin-clean����������� ������������������ 값은����������� ������������������ 변하지����������� ������������������ 않음����������� ������������������
• DOM����������� ������������������ Exception����������� ������������������ 발생����������� ������������������
이제����������� ������������������ 어느정도����������� ������������������ 자바스크립트로����������� ������������������ 애니메이션/게임을����������� ������������������ 만들����������� ������������������ 수����������� ������������������ 있겠지����������� ������������������
모바일����������� ������������������ 성능����������� ������������������ 문제����������� ������������������
• iOS4����������� ������������������ 이하에서는����������� ������������������ 캔버스가����������� ������������������ 느림����������� ������������������
• iOS5����������� ������������������ 이상에서는����������� ������������������ 캔버스가����������� ������������������ 빠름����������� ������������������
• 안드로이드에서는����������� ������������������ 둘다����������� ������������������ 느림����������� ������������������
• 안드로이드ICS����������� ������������������ CSS3D����������� ������������������ 빠르지만����������� ������������������ 버그����������� ������������������ 많음����������� ������������������
• 안드로이드는����������� ������������������ 현재����������� ������������������ 답이����������� ������������������ 없음����������� ������������������
성능에����������� ������������������ 따른����������� ������������������ 렌더링����������� ������������������ 방식����������� ������������������
기기/OS 아이폰3GS
아이폰 4
아이폰 4S
안드로이드3미만
안드로이드3이상
렌더링 방식 CSS3D Canvas
DOM /
Canvas CSS3D
라이브러리����������� ������������������ 필요함����������� ������������������
• 다양한����������� ������������������ 환경에����������� ������������������ 대응하는����������� ������������������ 라이브러리����������� ������������������ 필요����������� ������������������
• 굉장히����������� ������������������ 많은����������� ������������������ 라이브러리����������� ������������������ 존재����������� ������������������
라이브러리����������� ������������������ 필요함����������� ������������������
• 모든����������� ������������������ PC/모바일����������� ������������������ 환경에����������� ������������������ 대응하는����������� ������������������ 라이브러리����������� ������������������ 없음����������� ������������������
• 성능보다는����������� ������������������ 개발����������� ������������������ 툴이나����������� ������������������ 게임����������� ������������������ 지원����������� ������������������ 기능이����������� ������������������ 많음����������� ������������������
• 빠르게����������� ������������������ 변하는����������� ������������������ 모바일����������� ������������������ 시장에����������� ������������������ 대응해야����������� ������������������ 함����������� ������������������
그래서����������� ������������������ 만들었습니다����������� ������������������
콜리����������� ������������������
콜리(Collie)����������� ������������������
• PC����������� ������������������ 환경����������� ������������������ 및����������� ������������������ 모바일����������� ������������������ iOS/Android����������� ������������������ 13종����������� ������������������ 이상����������� ������������������ 대응����������� ������������������
• 상황에����������� ������������������ 따라����������� ������������������ 최적의����������� ������������������ 성능을����������� ������������������ 위한����������� ������������������ DOM/CSS3D/Canvas����������� ������������������ 적용����������� ������������������
콜리(Collie)����������� ������������������
• 프레임����������� ������������������ 스킵으로����������� ������������������ 예정된����������� ������������������ 애니메이션을����������� ������������������ 재생����������� ������������������
콜리(Collie)����������� ������������������
• 고해상도����������� ������������������ 이미지����������� ������������������ 지원(레티나����������� ������������������ 디스플레이)����������� ������������������
콜리(Collie)����������� ������������������
• DOM����������� ������������������ /����������� ������������������ Canvas����������� ������������������ 모두����������� ������������������ 정밀한����������� ������������������ 이벤트����������� ������������������ 영역����������� ������������������ 지원����������� ������������������
• 정밀한����������� ������������������ 이벤트를����������� ������������������ 위한����������� ������������������ 패스����������� ������������������ 추출����������� ������������������ 도구����������� ������������������ 지원����������� ������������������
콜리(Collie)����������� ������������������
• 캔버스����������� ������������������ 텍스트����������� ������������������ 자동����������� ������������������ 줄����������� ������������������ 바꿈,����������� ������������������ 말����������� ������������������ 줄임����������� ������������������ 지원����������� ������������������
콜리(Collie)����������� ������������������
• 버퍼링����������� ������������������ 기능����������� ������������������ 지원����������� ������������������
그리기
콜리(Collie)����������� ������������������
• 개발����������� ������������������ 편의성을����������� ������������������ 위한����������� ������������������ 다양한����������� ������������������ 기능����������� ������������������
• 스프라이트����������� ������������������ 애니메이션을����������� ������������������ 위한����������� ������������������ 기능����������� ������������������
• API����������� ������������������ 문서����������� ������������������
• 튜토리얼,����������� ������������������ 샘플����������� ������������������ 프로젝트����������� ������������������
그리고����������� ������������������ 오픈소스����������� ������������������
LGPL����������� ������������������ v2.1����������� ������������������ 로����������� ������������������ 하고����������� ������������������ 싶으나����������� ������������������ 아직����������� ������������������ 미정����������� ������������������
커밍순����������� ������������������
자바스크립트����������� ������������������ 애니메이션����������� ������������������ /����������� ������������������ 게임의����������� ������������������ 한계����������� ������������������
• PC에서는����������� ������������������ 아무����������� ������������������ 문제����������� ������������������ 없음����������� ������������������
• 모바일에서는����������� ������������������ 성능����������� ������������������ 한계����������� ������������������ 존재����������� ������������������
• 움직이는����������� ������������������ 객체가����������� ������������������ 30개����������� ������������������ 정도가����������� ������������������ 넘어가면����������� ������������������ 성능에����������� ������������������ 문제가����������� ������������������ 있음����������� ������������������
• 안드로이드����������� ������������������ 태생적����������� ������������������ 한계����������� ������������������ 존재����������� ������������������
모바일����������� ������������������ 웹����������� ������������������ 게임����������� ������������������ 구현����������� ������������������ 가능성����������� ������������������
• 사용자의����������� ������������������ 입력에����������� ������������������ 실시간으로����������� ������������������ 반영되는����������� ������������������ 경우는����������� ������������������ 구현����������� ������������������ 불가능����������� ������������������
모바일����������� ������������������ 웹����������� ������������������ 게임����������� ������������������ 구현����������� ������������������ 가능성����������� ������������������
• 애니메이션이����������� ������������������ 표현일����������� ������������������ 경우나����������� ������������������ 진행에����������� ������������������ 문제가����������� ������������������ 없는����������� ������������������ 경우����������� ������������������ 구현����������� ������������������ 가능����������� ������������������