1. Collie

2.
HTML5

3. Animation

4. Library

5.
심상민

7. 발표자

9. 여러

10. 분들이

11. 얻어갈

12. 수

13. 있는

14. 것

15.
• 자바스크립트로

16. 어디까지

17. 가능할까?

18.
• 자바스크립트로

19. 게임

20. 어떻게

21. 만들까?

22.
• 개발

23. 노하우

24.
• 콜리가

25. 뭘까?

27. 자바스크립트

28. 애니메이션이란

30. 자바스크립트

31. 애니메이션

33. 조금

34. 더

35. 자세히

36. 살펴보자

38. 리소스

39. 관리

40.
이미지

41. 로딩

43. 리소스

44. 관리

45.
• 게임이나

46. 애니메이션은

47. 웹

48. 페이지보다

49. 리소
스가

50. 많고

51. 용량이

52. 큼(통상

53. 3MB

54. 이상)

56. 리소스

57. 관리

58.
• 초기

59. 로딩

60. 화면

61. 필요

62.
• 비동기로

63. 리소스를

64. 관리해야

65. 함

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. 객체화

68.
객체화

70. 객체화

71.
• DOM은

72. API

73. 구조

74. 상

75. 객체

76. 별로

77. 다룰

78. 수

79. 있음

80.
• HTML5

81. Canvas는

82. 객체

83. 별로

84. 다룰

85. 수

86. 없음

87.
DOM은

88. 객체

89. 별로

90. 관리

91. 가능

92. Canvas는

93. 한개의

94. Context에

95. 그리는

96. 방식

98. 객체화

99.
그리는

100. 정보를

101. 갖고

102. 있는

103. 각각의

104. 객체

105. 필요

106.
캔버스

107. 엘리먼트

109. 객체화

110.
• 객체의

111. 위치,

112. 표시

113. 속성,

114. 기타

115. 옵션

116. 정보

117. 필요

118.
var oItem = new Item();
oItem.width = 100;
oItem.height = 100;
oItem.x = 50;
oItem.y = 150;
oItem.color = “#123456”;
oItem.visible = true;

119. 애니메이션

120.
애니메이션

122. 애니메이션

123.
• CSS

124. Transition은

125. 많은

126. 객체를

127. 다루기에

128. 적합
하지

129. 않음

130.
• 타이머를

131. 이용한

132. 렌더링

133. 파이프라인을

134. 적용

136. 렌더링

137. 파이프라인

138.
// 그리기
function draw() {
// 캔버스를

139. 지움
ctx.clearRect(0, 0, width, height);
// 등록된

140. 객체를

141. 그림
for (var idx in list) {
list[idx].draw();
}
};
// 1초에

142. 60번

143. 반복한다
setInterval(draw, 1000 / 60);

144. 애니메이션

145.
그리기

146. 그리기

147. 그리기

148. 그리기

149. 그리기

150.
초당

151. 60번

152. 반복

154. 왜

155. 1초에

156. 60번인가?

157.
• 모니터는

158. 1초에

159. 60번

160. 화면을

161. 표시한다(60Hz
)

162.
• FPS

163. 60이상

164. 표현하는

165. 것은

166. 모니터의

167. 능력을

168.
벗어나는

169. 것

171. 캔버스

172. 화면

173. 지우기

174.
• drawRect를

175. 사용

176.
var ctx = elCanvas.getContext(“2d”);
ctx.fillStyle = “#ffffff”;
ctx.drawRect(0, 0, elCanvas.width, elCanvas.height);
속도가

177. 느림

178.
• width,

179. height를

180. 재설정

181.
elCanvas.width = 100;
elCanvas.height = 100;
빠르긴

182. 하나

183. 캔버스가

184. 지워진

185. 후에

186. transform

187. 기능을

188. 사용하게

189. 되면

190. 느림

192. 캔버스

193. 지우기

194.
• clearRect를

195. 사용

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

197. width,

198. height

199. 재설정

200. 보다는

201. 지워지는

202. 속도가

203. 느리나

204. 안정적임

206. 스프라이트

207. 애니메이션

208.
• 한

209. 장의

210. 이미지에

211. 여러

212. 동작의

213. 프레임을

214. 모아

215.
놓고

216. 보여지는

217. 영역을

218. 움직이면서

219. 애니메이
션

221. DOM에서

222. 스프라이트

223. 구현

224. 방식

225.
• 한

226. 개의

227. DIV

228. 엘리먼트에

229. 자식

230. 이미지

231. 엘리먼트를

232. 생성

233.
• 객체의

234. 이동은

235. CSS

236. Transform의

237. translate

238. 속성을

239. 이용

240.
• 스프라이트

241. 애니메이션은

242. 이미지

243. 엘리먼트의

244. translate

245. 속성
을

246. 이용

247.
overflow:hidden

248.
DIV

249.
IMG

251. DOM에서

252. 스프라이트

253. 구현

254. 방식

255.
• DIV와

256. 이미지

257. 엘리먼트에

258. CSS3D를

259. 적용하기

260. 위함

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. CSS3D

263. 하드웨어

264. 가속

265.
• CSS3D를

266. 사용하면

267. 하드웨어

268. 가속을

269. 받아

270. 빠르게

271. 동작함

272.
• IE10,

273. 파이어폭스,

274. 크롬,

275. 사파리,

276. iOS,

277. 안드로이드

278. 3.0

279. 이상

280.
지원

283. CSS3D

284. 하드웨어

285. 가속

286.
• 안드로이드

287. ICS

288. CSS3D

289. 버그

290. 굉장히

291. 많음

293. 캔버스에서

294. 스프라이트

295. 구현

296. 방식

297.
• Context의

298. drawImage

299. 메소드를

300. 사용

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

302. 대상x,y,width,height

303.
drawImage

305. Pixel

306. Manipulation에

307. 의한

308. 성능

309. 저하

310.
• 원본

311. width,

312. height와

313. 대상

314. width,

315. height가

316. 다른

317. 경우

318. 모바일

319. 환경,

320. 특히

321. iOS4

322. 버전에서

323.
성능

324. 저하가

325. 발생

326.
원본x,y,width,height

327. 픽셀

328. 조작

329. 발생

330.
drawImage

332. 소숫점

333. 연산에

334. 의한

335. 성능

336. 저하

337.
• 캔버스에서

338. 소숫점

339. 연산을

340. 수행하는

341. 경우

342. 안
티앨리어싱을

343. 사용하게

344. 됨

345.
• 안티앨리어싱을

346. 사용하는

347. 경우

348. 느려짐

350. 이벤트

351. 처리

352.
• 객체의

353. 영역을

354. 계산해서

355. 이벤트를

356. 받을

357. 대상인지

358. 확인한다

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. 객체

361. 영역

362. 안에서

363. 일어났음
}
}

364. 이벤트

365. 처리

366.
• 영역으로

367. 이벤트

368. 처리를

369. 하게

370. 되면

371. 객체의

372. 사각형

373. 형태로만

374.
이벤트를

375. 인식할

376. 수

377. 있음

378.
• 정밀한

379. 이벤트

380. 영역

381. 처리

382. 필요

384. 이벤트

385. 처리

386.
• 캔버스에서

387. Context의

388. getImageData로

389. 픽셀

390. 정보

391. 얻어옴

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. 정보가

394. 있음
}

395. Information

396. Leakage

397. 보안

398. 이슈

399.
• 외부

400. 도메인이

401. 아닌

402. 이미지를

403. 불러오면

404. 캔버스의

405. origin-cle
an

406. 플래그가

407. false설정됨

408.
• origin-clean가

409. false면

410. 픽셀

411. 정보를

412. 가져올

413. 수

414. 없음

415.
• 이

416. 정책은

417. 강력해서

418. 한

419. 번이라도

420. 외부

421. 도메인의

422. 이미지를

423. 불
러왔다면

424. false에서

425. 리셋되지

426. 않음

427.
• width,

428. height를

429. 재설정해서

430. 캔버스를

431. 지운다

432. 해도

433. origin-c
lean

434. 값은

435. 변하지

436. 않음

437.
• DOM

438. Exception

439. 발생

441. 이제

442. 어느정도

443. 자바스크립트로

444.
애니메이션/게임을

445.
만들

446. 수

447. 있겠지

450. 모바일

451. 성능

452. 문제

453.
• iOS4

454. 이하에서는

455. 캔버스가

456. 느림

457.
• iOS5

458. 이상에서는

459. 캔버스가

460. 빠름

461.
• 안드로이드에서는

462. 둘다

463. 느림

464.
• 안드로이드ICS

465. CSS3D

466. 빠르지만

467. 버그

468. 많음

469.
• 안드로이드는

470. 현재

471. 답이

472. 없음

474. 성능에

475. 따른

476. 렌더링

477. 방식

478.
아이폰3G 아이폰 아이폰 안드로이드 안드로이드
기기/OS
S 4 4S 3미만 3이상
DOM
렌더링
CSS3D Canvas / CSS3D
방식
Canvas

479. 라이브러리

480. 필요함

481.
• 다양한

482. 환경에

483. 대응하는

484. 라이브러리

485. 필요

486.
• 굉장히

487. 많은

488. 라이브러리

489. 존재

491. 라이브러리

492. 필요함

493.
• 모든

494. PC/모바일

495. 환경에

496. 대응하는

497. 라이브러리

498. 없음

499.
• 성능보다는

500. 개발

501. 툴이나

502. 게임

503. 지원

504. 기능이

505. 많음

506.
• 빠르게

507. 변하는

508. 모바일

509. 시장에

510. 대응해야

511. 함

513. 그래서

514. 만들었습니다

516. 콜리

519. 콜리(Collie)

520.
• PC

521. 환경

522. 및

523. 모바일

524. iOS/Android

525. 13종

526. 이상

527. 대응

528.
• 상황에

529. 따라

530. 최적의

531. 성능을

532. 위한

533. DOM/CSS3D/Ca
nvas

534. 적용

536. 콜리(Collie)

537.
• 프레임

538. 스킵으로

539. 예정된

540. 애니메이션을

541. 재생

543. 콜리(Collie)

544.
• 고해상도

545. 이미지

546. 지원(레티나

547. 디스플레이)

549. 콜리(Collie)

550.
• DOM

551. /

552. Canvas

553. 모두

554. 정밀한

555. 이벤트

556. 영역

557. 지원

558.
• 정밀한

559. 이벤트를

560. 위한

561. 패스

562. 추출

563. 도구

564. 지원

566. 콜리(Collie)

567.
• 캔버스

568. 텍스트

569. 자동

570. 줄

571. 바꿈,

572. 말

573. 줄임

574. 지원

576. 콜리(Collie)

577.
• 버퍼링

578. 기능

579. 지원

580.
그리기

581. 콜리(Collie)

582.
• 개발

583. 편의성을

584. 위한

585. 다양한

586. 기능

587.
• 스프라이트

588. 애니메이션을

589. 위한

590. 기능

591.
• API

592. 문서

593.
• 튜토리얼,

594. 샘플

595. 프로젝트

597. 그리고

598. 오픈소스

599.
LGPL

600. v2.1

601.
로

602. 하고

603. 싶으나

604. 아직

605. 미정

607. 커밍순

609. 자바스크립트

610. 애니메이션

611. /

612. 게임의

613. 한계

614.
• PC에서는

615. 아무

616. 문제

617. 없음

618.
• 모바일에서는

619. 성능

620. 한계

621. 존재

622.
• 움직이는

623. 객체가

624. 30개

625. 정도가

626. 넘어가면

627. 성능에

628. 문
제가

629. 있음

630.
• 안드로이드

631. 태생적

632. 한계

633. 존재

635. 모바일

636. 웹

637. 게임

638. 구현

639. 가능성

640.
• 사용자의

641. 입력에

642. 실시간으로

643. 반영되는

644. 경우는

645. 구현

646.
불가능

648. 모바일

649. 웹

650. 게임

651. 구현

652. 가능성

653.
• 애니메이션이

654. 표현일

655. 경우나

656. 진행에

657. 문제가

658. 없는

659. 경
우

660. 구현

661. 가능