0
Collie
 HTML5
 Animation
 Library
 심상민
 
발표자
 
여러
 분들이
 얻어갈
 수
 있는
 것
   •             자바스크립트로
 어디까지
 가능할까?
   •             자바스크립트로
 게임
 어떻게
 만들까?
   •             개발
 노하우
   •             콜리가
 뭘까?
 
자바스크립트
 애니메이션이란
 
자바스크립트
 애니메이션
 
조금
 더
 자세히
 살펴보자
 
리소스
 관리
                             이미지
 로딩
 
리소스
 관리
   •  게임이나
 애니메이션은
 웹
 페이지보다
 리소     스가
 많고
 용량이
 큼(통상
 3MB
 이상)
Upcoming SlideShare
Loading in...5
×

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

5,638

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,638
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
31
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

  1. 1. Collie
  2. 2.  HTML5
  3. 3.  Animation
  4. 4.  Library
  5. 5.  심상민
  6. 6.  
  7. 7. 발표자
  8. 8.  
  9. 9. 여러
  10. 10.  분들이
  11. 11.  얻어갈
  12. 12.  수
  13. 13.  있는
  14. 14.  것
  15. 15.   •  자바스크립트로
  16. 16.  어디까지
  17. 17.  가능할까?
  18. 18.   •  자바스크립트로
  19. 19.  게임
  20. 20.  어떻게
  21. 21.  만들까?
  22. 22.   •  개발
  23. 23.  노하우
  24. 24.   •  콜리가
  25. 25.  뭘까?
  26. 26.  
  27. 27. 자바스크립트
  28. 28.  애니메이션이란
  29. 29.  
  30. 30. 자바스크립트
  31. 31.  애니메이션
  32. 32.  
  33. 33. 조금
  34. 34.  더
  35. 35.  자세히
  36. 36.  살펴보자
  37. 37.  
  38. 38. 리소스
  39. 39.  관리
  40. 40.   이미지
  41. 41.  로딩
  42. 42.  
  43. 43. 리소스
  44. 44.  관리
  45. 45.   •  게임이나
  46. 46.  애니메이션은
  47. 47.  웹
  48. 48.  페이지보다
  49. 49.  리소 스가
  50. 50.  많고
  51. 51.  용량이
  52. 52.  큼(통상
  53. 53.  3MB
  54. 54.  이상)
  55. 55.  
  56. 56. 리소스
  57. 57.  관리
  58. 58.   •  초기
  59. 59.  로딩
  60. 60.  화면
  61. 61.  필요
  62. 62.   •  비동기로
  63. 63.  리소스를
  64. 64.  관리해야
  65. 65.  함
  66. 66.   var elImg = document.createElemen t(“img”); elImg.onload = function () { alert(“ok!”); }; elImg.onerror = function () { alert(“error”); }; elImg.src = “test.png”; document.body.appendChild(elImg);
  67. 67. 객체화
  68. 68.   객체화
  69. 69.  
  70. 70. 객체화
  71. 71.   •  DOM은
  72. 72.  API
  73. 73.  구조
  74. 74.  상
  75. 75.  객체
  76. 76.  별로
  77. 77.  다룰
  78. 78.  수
  79. 79.  있음
  80. 80.   •  HTML5
  81. 81.  Canvas는
  82. 82.  객체
  83. 83.  별로
  84. 84.  다룰
  85. 85.  수
  86. 86.  없음
  87. 87.   DOM은
  88. 88.  객체
  89. 89.  별로
  90. 90.  관리
  91. 91.  가능
  92. 92.   Canvas는
  93. 93.  한개의
  94. 94.  Context에
  95. 95.  그리는
  96. 96.  방식
  97. 97.  
  98. 98. 객체화
  99. 99.   그리는
  100. 100.  정보를
  101. 101.  갖고
  102. 102.  있는
  103. 103.  각각의
  104. 104.  객체
  105. 105.  필요
  106. 106.   캔버스
  107. 107.  엘리먼트
  108. 108.  
  109. 109. 객체화
  110. 110.   •  객체의
  111. 111.  위치,
  112. 112.  표시
  113. 113.  속성,
  114. 114.  기타
  115. 115.  옵션
  116. 116.  정보
  117. 117.  필요
  118. 118.   var oItem = new Item(); oItem.width = 100; oItem.height = 100; oItem.x = 50; oItem.y = 150; oItem.color = “#123456”; oItem.visible = true;
  119. 119. 애니메이션
  120. 120.   애니메이션
  121. 121.  
  122. 122. 애니메이션
  123. 123.   •  CSS
  124. 124.  Transition은
  125. 125.  많은
  126. 126.  객체를
  127. 127.  다루기에
  128. 128.  적합 하지
  129. 129.  않음
  130. 130.   •  타이머를
  131. 131.  이용한
  132. 132.  렌더링
  133. 133.  파이프라인을
  134. 134.  적용
  135. 135.  
  136. 136. 렌더링
  137. 137.  파이프라인
  138. 138.   // 그리기 function draw() { // 캔버스를
  139. 139.  지움 ctx.clearRect(0, 0, width, height); // 등록된
  140. 140.  객체를
  141. 141.  그림 for (var idx in list) { list[idx].draw(); } }; // 1초에
  142. 142.  60번
  143. 143.  반복한다 setInterval(draw, 1000 / 60);
  144. 144. 애니메이션
  145. 145.   그리기
  146. 146.   그리기
  147. 147.   그리기
  148. 148.   그리기
  149. 149.   그리기
  150. 150.   초당
  151. 151.  60번
  152. 152.  반복
  153. 153.  
  154. 154.
  155. 155.  1초에
  156. 156.  60번인가?
  157. 157.   •  모니터는
  158. 158.  1초에
  159. 159.  60번
  160. 160.  화면을
  161. 161.  표시한다(60Hz )
  162. 162.   •  FPS
  163. 163.  60이상
  164. 164.  표현하는
  165. 165.  것은
  166. 166.  모니터의
  167. 167.  능력을
  168. 168.   벗어나는
  169. 169.  것
  170. 170.  
  171. 171. 캔버스
  172. 172.  화면
  173. 173.  지우기
  174. 174.   •  drawRect를
  175. 175.  사용
  176. 176.   var ctx = elCanvas.getContext(“2d”); ctx.fillStyle = “#ffffff”; ctx.drawRect(0, 0, elCanvas.width, elCanvas.height); 속도가
  177. 177.  느림
  178. 178.   •  width,
  179. 179.  height를
  180. 180.  재설정
  181. 181.   elCanvas.width = 100; elCanvas.height = 100; 빠르긴
  182. 182.  하나
  183. 183.  캔버스가
  184. 184.  지워진
  185. 185.  후에
  186. 186.  transform
  187. 187.  기능을
  188. 188.  사용하게
  189. 189.  되면
  190. 190.  느림
  191. 191.  
  192. 192. 캔버스
  193. 193.  지우기
  194. 194.   •  clearRect를
  195. 195.  사용
  196. 196.   var ctx = elCanvas.getContext(“2d”); ctx.clearRect(0, 0, elCanvas.width, elCanvas.height);
  197. 197.   width,
  198. 198.  height
  199. 199.  재설정
  200. 200.  보다는
  201. 201.  지워지는
  202. 202.  속도가
  203. 203.  느리나
  204. 204.  안정적임
  205. 205.  
  206. 206. 스프라이트
  207. 207.  애니메이션
  208. 208.   •  한
  209. 209.  장의
  210. 210.  이미지에
  211. 211.  여러
  212. 212.  동작의
  213. 213.  프레임을
  214. 214.  모아
  215. 215.   놓고
  216. 216.  보여지는
  217. 217.  영역을
  218. 218.  움직이면서
  219. 219.  애니메이 션
  220. 220.  
  221. 221. DOM에서
  222. 222.  스프라이트
  223. 223.  구현
  224. 224.  방식
  225. 225.   •  한
  226. 226.  개의
  227. 227.  DIV
  228. 228.  엘리먼트에
  229. 229.  자식
  230. 230.  이미지
  231. 231.  엘리먼트를
  232. 232.  생성
  233. 233.   •  객체의
  234. 234.  이동은
  235. 235.  CSS
  236. 236.  Transform의
  237. 237.  translate
  238. 238.  속성을
  239. 239.  이용
  240. 240.   •  스프라이트
  241. 241.  애니메이션은
  242. 242.  이미지
  243. 243.  엘리먼트의
  244. 244.  translate
  245. 245.  속성 을
  246. 246.  이용
  247. 247.   overflow:hidden
  248. 248.   DIV
  249. 249.   IMG
  250. 250.  
  251. 251. DOM에서
  252. 252.  스프라이트
  253. 253.  구현
  254. 254.  방식
  255. 255.   •  DIV와
  256. 256.  이미지
  257. 257.  엘리먼트에
  258. 258.  CSS3D를
  259. 259.  적용하기
  260. 260.  위함
  261. 261.   div style=“position:absolute; overflow:h idden; width:100px; height:100px; transfo rm:translate3d(100px, 100px, 0);” img src=“sprite.png” style=“position :absolute; transform:translate3d(-100px, 0, 0);” border=“0” alt=“” / /div
  262. 262. CSS3D
  263. 263.  하드웨어
  264. 264.  가속
  265. 265.   •  CSS3D를
  266. 266.  사용하면
  267. 267.  하드웨어
  268. 268.  가속을
  269. 269.  받아
  270. 270.  빠르게
  271. 271.  동작함
  272. 272.   •  IE10,
  273. 273.  파이어폭스,
  274. 274.  크롬,
  275. 275.  사파리,
  276. 276.  iOS,
  277. 277.  안드로이드
  278. 278.  3.0
  279. 279.  이상
  280. 280.   지원
  281. 281.  
  282. 282.  
  283. 283. CSS3D
  284. 284.  하드웨어
  285. 285.  가속
  286. 286.   •  안드로이드
  287. 287.  ICS
  288. 288.  CSS3D
  289. 289.  버그
  290. 290.  굉장히
  291. 291.  많음
  292. 292.  
  293. 293. 캔버스에서
  294. 294.  스프라이트
  295. 295.  구현
  296. 296.  방식
  297. 297.   •  Context의
  298. 298.  drawImage
  299. 299.  메소드를
  300. 300.  사용
  301. 301.   var ctx = elCanvas.getContext(“2d”); ctx.drawImage(대상이미지엘리먼트, 원본x, 원본y, 원본너비, 원본높이, 대상x, 대상y, 대상너비, 대상 높이);원본x,y,width,height
  302. 302.   대상x,y,width,height
  303. 303.   drawImage
  304. 304.  
  305. 305. Pixel
  306. 306.  Manipulation에
  307. 307.  의한
  308. 308.  성능
  309. 309.  저하
  310. 310.   •  원본
  311. 311.  width,
  312. 312.  height와
  313. 313.  대상
  314. 314.  width,
  315. 315.  height가
  316. 316.  다른
  317. 317.  경우
  318. 318.  모바일
  319. 319.  환경,
  320. 320.  특히
  321. 321.  iOS4
  322. 322.  버전에서
  323. 323.   성능
  324. 324.  저하가
  325. 325.  발생
  326. 326.  원본x,y,width,height
  327. 327.   픽셀
  328. 328.  조작
  329. 329.  발생
  330. 330.   drawImage
  331. 331.  
  332. 332. 소숫점
  333. 333.  연산에
  334. 334.  의한
  335. 335.  성능
  336. 336.  저하
  337. 337.   •  캔버스에서
  338. 338.  소숫점
  339. 339.  연산을
  340. 340.  수행하는
  341. 341.  경우
  342. 342.  안 티앨리어싱을
  343. 343.  사용하게
  344. 344.  됨
  345. 345.   •  안티앨리어싱을
  346. 346.  사용하는
  347. 347.  경우
  348. 348.  느려짐
  349. 349.  
  350. 350. 이벤트
  351. 351.  처리
  352. 352.   •  객체의
  353. 353.  영역을
  354. 354.  계산해서
  355. 355.  이벤트를
  356. 356.  받을
  357. 357.  대상인지
  358. 358.  확인한다
  359. 359.   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 ) { // 이벤트가
  360. 360.  객체
  361. 361.  영역
  362. 362.  안에서
  363. 363.  일어났음 } }
  364. 364. 이벤트
  365. 365.  처리
  366. 366.   •  영역으로
  367. 367.  이벤트
  368. 368.  처리를
  369. 369.  하게
  370. 370.  되면
  371. 371.  객체의
  372. 372.  사각형
  373. 373.  형태로만
  374. 374.   이벤트를
  375. 375.  인식할
  376. 376.  수
  377. 377.  있음
  378. 378.   •  정밀한
  379. 379.  이벤트
  380. 380.  영역
  381. 381.  처리
  382. 382.  필요
  383. 383.  
  384. 384. 이벤트
  385. 385.  처리
  386. 386.   •  캔버스에서
  387. 387.  Context의
  388. 388.  getImageData로
  389. 389.  픽셀
  390. 390.  정보
  391. 391.  얻어옴
  392. 392.   var imageData = ctx.getImageData(mouseX, mouseY, 1, 1); if (imageData.data[0] !== 0 || imageData.data[1] !== 0 || imageData.data[2] !== 0 || imageData.dat a[3] !== 0) { // 픽셀
  393. 393.  정보가
  394. 394.  있음 }
  395. 395. Information
  396. 396.  Leakage
  397. 397.  보안
  398. 398.  이슈
  399. 399.   •  외부
  400. 400.  도메인이
  401. 401.  아닌
  402. 402.  이미지를
  403. 403.  불러오면
  404. 404.  캔버스의
  405. 405.  origin-cle an
  406. 406.  플래그가
  407. 407.  false설정됨
  408. 408.   •  origin-clean가
  409. 409.  false면
  410. 410.  픽셀
  411. 411.  정보를
  412. 412.  가져올
  413. 413.  수
  414. 414.  없음
  415. 415.   •  이
  416. 416.  정책은
  417. 417.  강력해서
  418. 418.  한
  419. 419.  번이라도
  420. 420.  외부
  421. 421.  도메인의
  422. 422.  이미지를
  423. 423.  불 러왔다면
  424. 424.  false에서
  425. 425.  리셋되지
  426. 426.  않음
  427. 427.   •  width,
  428. 428.  height를
  429. 429.  재설정해서
  430. 430.  캔버스를
  431. 431.  지운다
  432. 432.  해도
  433. 433.  origin-c lean
  434. 434.  값은
  435. 435.  변하지
  436. 436.  않음
  437. 437.   •  DOM
  438. 438.  Exception
  439. 439.  발생
  440. 440.  
  441. 441. 이제
  442. 442.  어느정도
  443. 443.  자바스크립트로
  444. 444.  애니메이션/게임을
  445. 445.  만들
  446. 446.  수
  447. 447.  있겠지
  448. 448.  
  449. 449. 모바일
  450. 450.  성능
  451. 451.  문제
  452. 452.   •  iOS4
  453. 453.  이하에서는
  454. 454.  캔버스가
  455. 455.  느림
  456. 456.   •  iOS5
  457. 457.  이상에서는
  458. 458.  캔버스가
  459. 459.  빠름
  460. 460.   •  안드로이드에서는
  461. 461.  둘다
  462. 462.  느림
  463. 463.   •  안드로이드ICS
  464. 464.  CSS3D
  465. 465.  빠르지만
  466. 466.  버그
  467. 467.  많음
  468. 468.   •  안드로이드는
  469. 469.  현재
  470. 470.  답이
  471. 471.  없음
  472. 472.  
  473. 473. 성능에
  474. 474.  따른
  475. 475.  렌더링
  476. 476.  방식
  477. 477.   아이폰3G 아이폰 아이폰 안드로이드 안드로이드 기기/OS S 4 4S 3미만 3이상 DOM 렌더링 CSS3D Canvas / CSS3D 방식 Canvas
  478. 478. 라이브러리
  479. 479.  필요함
  480. 480.   •  다양한
  481. 481.  환경에
  482. 482.  대응하는
  483. 483.  라이브러리
  484. 484.  필요
  485. 485.   •  굉장히
  486. 486.  많은
  487. 487.  라이브러리
  488. 488.  존재
  489. 489.  
  490. 490. 라이브러리
  491. 491.  필요함
  492. 492.   •  모든
  493. 493.  PC/모바일
  494. 494.  환경에
  495. 495.  대응하는
  496. 496.  라이브러리
  497. 497.  없음
  498. 498.   •  성능보다는
  499. 499.  개발
  500. 500.  툴이나
  501. 501.  게임
  502. 502.  지원
  503. 503.  기능이
  504. 504.  많음
  505. 505.   •  빠르게
  506. 506.  변하는
  507. 507.  모바일
  508. 508.  시장에
  509. 509.  대응해야
  510. 510.  함
  511. 511.  
  512. 512. 그래서
  513. 513.  만들었습니다
  514. 514.  
  515. 515. 콜리
  516. 516.  
  517. 517. 콜리(Collie)
  518. 518.   •  PC
  519. 519.  환경
  520. 520.  및
  521. 521.  모바일
  522. 522.  iOS/Android
  523. 523.  13종
  524. 524.  이상
  525. 525.  대응
  526. 526.   •  상황에
  527. 527.  따라
  528. 528.  최적의
  529. 529.  성능을
  530. 530.  위한
  531. 531.  DOM/CSS3D/Ca nvas
  532. 532.  적용
  533. 533.  
  534. 534. 콜리(Collie)
  535. 535.   •  프레임
  536. 536.  스킵으로
  537. 537.  예정된
  538. 538.  애니메이션을
  539. 539.  재생
  540. 540.  
  541. 541. 콜리(Collie)
  542. 542.   •  고해상도
  543. 543.  이미지
  544. 544.  지원(레티나
  545. 545.  디스플레이)
  546. 546.  
  547. 547. 콜리(Collie)
  548. 548.   •  DOM
  549. 549.  /
  550. 550.  Canvas
  551. 551.  모두
  552. 552.  정밀한
  553. 553.  이벤트
  554. 554.  영역
  555. 555.  지원
  556. 556.   •  정밀한
  557. 557.  이벤트를
  558. 558.  위한
  559. 559.  패스
  560. 560.  추출
  561. 561.  도구
  562. 562.  지원
  563. 563.  
  564. 564. 콜리(Collie)
  565. 565.   •  캔버스
  566. 566.  텍스트
  567. 567.  자동
  568. 568.  줄
  569. 569.  바꿈,
  570. 570.  말
  571. 571.  줄임
  572. 572.  지원
  573. 573.  
  574. 574. 콜리(Collie)
  575. 575.   •  버퍼링
  576. 576.  기능
  577. 577.  지원
  578. 578.   그리기
  579. 579. 콜리(Collie)
  580. 580.   •  개발
  581. 581.  편의성을
  582. 582.  위한
  583. 583.  다양한
  584. 584.  기능
  585. 585.   •  스프라이트
  586. 586.  애니메이션을
  587. 587.  위한
  588. 588.  기능
  589. 589.   •  API
  590. 590.  문서
  591. 591.   •  튜토리얼,
  592. 592.  샘플
  593. 593.  프로젝트
  594. 594.  
  595. 595. 그리고
  596. 596.  오픈소스
  597. 597.   LGPL
  598. 598.  v2.1
  599. 599.  로
  600. 600.  하고
  601. 601.  싶으나
  602. 602.  아직
  603. 603.  미정
  604. 604.  
  605. 605. 커밍순
  606. 606.  
  607. 607. 자바스크립트
  608. 608.  애니메이션
  609. 609.  /
  610. 610.  게임의
  611. 611.  한계
  612. 612.   •  PC에서는
  613. 613.  아무
  614. 614.  문제
  615. 615.  없음
  616. 616.   •  모바일에서는
  617. 617.  성능
  618. 618.  한계
  619. 619.  존재
  620. 620.   •  움직이는
  621. 621.  객체가
  622. 622.  30개
  623. 623.  정도가
  624. 624.  넘어가면
  625. 625.  성능에
  626. 626.  문 제가
  627. 627.  있음
  628. 628.   •  안드로이드
  629. 629.  태생적
  630. 630.  한계
  631. 631.  존재
  632. 632.  
  633. 633. 모바일
  634. 634.  웹
  635. 635.  게임
  636. 636.  구현
  637. 637.  가능성
  638. 638.   •  사용자의
  639. 639.  입력에
  640. 640.  실시간으로
  641. 641.  반영되는
  642. 642.  경우는
  643. 643.  구현
  644. 644.   불가능
  645. 645.  
  646. 646. 모바일
  647. 647.  웹
  648. 648.  게임
  649. 649.  구현
  650. 650.  가능성
  651. 651.   •  애니메이션이
  652. 652.  표현일
  653. 653.  경우나
  654. 654.  진행에
  655. 655.  문제가
  656. 656.  없는
  657. 657.  경 우
  658. 658.  구현
  659. 659.  가능
  660. 660.  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×