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

7,797 views

Published on

Demo Links
1) https://vimeo.com/47706328
2) https://vimeo.com/47706331
3) https://vimeo.com/47706329

Session Links
http://deview.kr/2012/xe/index.php?mid=track&document_srl=395&time_srl=253

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,797
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
36
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

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

  1. 1. CAUTION식사 후 졸릴 수 있으니데모부터 가겠습니다.
  2. 2. 알파벳 소문자 Lhttp://me2.do/FFflkMj 대소문자를 구분해야 합니다
  3. 3. 애니메이션은 무엇일까?
  4. 4. 역전!야매요리 정다정 작가 님twitter @yameyorie-mail usamibabe@naver.comwebtoon
  5. 5. 애니메이션은 연속된 장면을화면에 빠르게 표시해 움직임을 나타낸다
  6. 6. 이미지를 화면에 표시하는 적절한 방법은DOM과 HTML5 캔버스가 있다<img src="image.png" alt="이미지" />
  7. 7. 캔버스는 DOM과는 달리 객체 별로다루기가 힘들다<canvas id="canvas"></canvas>
  8. 8. 따라서 이미지를 캔버스에 그리기 전에영역 등의 정보를 별도로 관리해야 한다 var o = new Yame(); o.age = 32/2*Math.sin(1)+13; o.height = "160cm"; o.weight = undefined; o.cooking = false; o.defense = "backside"; ...
  9. 9. 그리는 과정은 어떨까? 틱 16ms 그리기
  10. 10. 단일화된 렌더링 파이프라인을 이용해초당 60번 등록된 객체를 그린다function draw() { // 지우기 ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height); // 등록된 객체를 그리기 for (var i = 0; i < list.length; i++) { list[i].drawEachObject(); }};// 초당 60번 반복setInterval(draw, 1000 / 60);
  11. 11. 눈에 보이지는 않지만화면을 매번 다시 그린다 draw draw draw draw draw 초당 60번 반복한다
  12. 12. requestAnimationFrame을 사용하면좀 더 자연스러운 애니메이션이 된다모바일에서는 iOS6부터 사용 가능function draw() { requestAnimationFrame(draw); // ...}requestAnimationFrame(draw);
  13. 13. 움직이는 동작은 스프라이트를 이용한다
  14. 14. 캔버스에서는 drawImage를 이용해간단하게 구현할 수 있다var ctx = elCanvas.getContext("2d");ctx.drawImage(대상이미지, 원본x, 원본y,원본너비, 원본높이, 대상x, 대상y, 대상너비, 대상높이);원본 x,y,width,height 대상 x,y,width,height drawImage
  15. 15. 원본과 대상의 크기가 다르면픽셀 조작으로 인해 iOS4에서 느려진다 ctx = elCanvas.getContext("2d");varctx.drawImage(elImg, 0, 0, 100, 100, 0,0, 200, 100);원본 너비 100 대상 너비 200 drawImage
  16. 16. 캔버스로 만든 애니메이션 데모 iOS5
  17. 17. 똑같은 데모를 iOS4가 설치된 똑같은 기기에서 실행 iOS4
  18. 18. ?!?!?!
  19. 19. 빠른 애니메이션을 위해서는하드웨어 가속이 필수iOS5의 사파리 부터 캔버스 하드웨어 가속 지원 빠름! 빠름! 빠름!
  20. 20. 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;}
  21. 21. 다른 CSS속성이 같이 변경되면애니메이션 속도가 느리다background-position과 같은 속성을 사용할 수 없다따라서 3D속성만 사용할 수 있도록 구조를 만든다 IMG(position:absolute) DIV(overflow:hidden)
  22. 22. CSS3 3D Transforms를 사용한 데모 iOS4
  23. 23. 끝?
  24. 24. 기기 별로 다른 대응을 해야 한다안드로이드 4.0 미만은 하드웨어 가속을 받을 수 없다 iPhone iPhone iPhone Android Android기기/OS 3GS 4 4S 3 미만 3 이상 CSS3D (iOS4 이하) Canvas 렌더링 CSS3D Canvas or CSS3D 방식 Canvas DOM (iOS5 이상)
  25. 25. 안드로이드 4.0도 문제가 있다- 한 면이 2048픽셀을 넘어가는 이미지를 사용하면 화면에 검정색으로 표시 된다.- 회전을 하게 되면 overflow:hidden 영역의 크기가 바뀐다.
  26. 26. to. 안드로이드 2.X 사용자 분들께바꿔주세요. 제발... from. 익명의 개발자
  27. 27. 이렇게 어려운 상황이지만 방법은 있다
  28. 28. Collie
  29. 29. 콜리는 18종 이상의 모바일 기기에대응하는 모바일에 최적화된 라이브러리
  30. 30. 더 빠른 방식으로 렌더링 한다
  31. 31. 이벤트 모델이 다르기 때문에캔버스에도 버블링을 구현 var layer = new collie.Layer();<div> var parent = new collie.DisplayObject(); <img /> var child = new collie.DisplayObject(); parent.addTo(layer);</div> child.addTo(parent); img child div parent body layer
  32. 32. 캔버스와 DOM에서 보다 정밀한 이벤트영역을 찾기 위해 hitArea캔버스의- PNPOLY 알고리즘을 이용해 적용 getImageData 보다 빠르게 영역 확인 가능- 외부 도메인의 이미지일 경우 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]]
  33. 33. 비동기 이미지 로딩의 불편함을 해소하는ImageManager 제공A 로딩 이미지 로딩 끝 A 사용 실제 A 이미지를 적용
  34. 34. 많은 수의 객체를 다루기 위해타일 캐시 기능 제공체스판과 같은 정적인 타일 맵을 만들 때 유리 캔버스 캔버스
  35. 35. 간단하게 고해상도 디스플레이 지원성능 문제로 인해 아이폰 레티나만 지원var isRetina = collie.Renderer.isRetinaDisplay();collie.ImageManager.addImages({ yame : (isRetina ? "large" : "small") + "/yame.png"}); a
  36. 36. 개별 편의성 제공처음에 나온 토끼가 움직이는 애니메이션 구현 예제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();
  37. 37. 오픈소스LGPL v2.1
  38. 38. http://jindo.dev.naver.com/colliehttp://dev.naver.com 에서도 찾을 수 있습니다.

×