[C3]collie deview2012

2. CAUTION

3. 식사

4. 후

5. 졸릴

6. 수

7. 있으니

8. 데모부터

9. 가겠습니다.

11. 알파벳

12. 소문자

14. http://me2.do/FFflkMj

15. 대소문자를

16. 구분해야

17. 합니다

19. 애니메이션은

20. 무엇일까?

22. 역전!야매요리

23. 정다정

24. 작가님

25. twitter

26. @yameyori

27. e-mail

28. usamibabe@naver.com

29. webtoon

31. 애니메이션은

32. 연속된

33. 장면을

34. 화면에

35. 빠르게

36. 표시해

37. 움직임을

38. 나타낸다

40. 이미지를

41. 화면에

42. 표시하는

43. 적절한

44. 방법은

45. DOM과

46. HTML5

47. 캔버스가

48. 있다

49. img src=image.png alt=이미지 /

51. 캔버스는

52. DOM과는

53. 달리

54. 객체

55. 별로

56. 다루기가

57. 힘들다

58. canvas id=canvas/canvas

59. 따라서

60. 이미지를

61. 캔버스에

62. 그리기

63. 전에

64. 영역

65. 등의

66. 정보를

67. 별도로

68. 관리해야

69. 한다

71. var o = new Yame(); o.age = 32/2*Math.sin(1)+13 ; o.height = 160cm; o.weight = undefined; o.cooking = false; o.defense = backside; ...

72. 그리는

73. 과정은

74. 어떨까?

75. 틱

76. 16ms

77. 그리기

79. 단일화된

80. 렌더링

81. 파이프라인을

82. 이용해

83. 초당

84. 60번

85. 등록된

86. 객체를

87. 그린다

89. function draw() { // 지우기 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height ); // 등록된

90. 객체를

91. 그리기 for (var i = 0; i list.length; i++) { list[i].drawEachObject(); } }; // 초당

92. 60번

93. 반복 setInterval(draw, 1000 / 60);

94. 눈에

95. 보이지는

96. 않지만

97. 화면을

98. 매번

99. 다시

100. 그린다

101. draw

102. draw

103. draw

104. draw

105. draw

106. 초당

107. 60번

108. 반복한다

110. requestAnimationFrame을

111. 사용하면

112. 좀

113. 더

114. 자연스러운

115. 애니메이션이

116. 된다

117. 모바일에서는

118. iOS6부터

119. 사용

120. 가능

121. function draw() { requestAnimationFrame(draw); // ... } requestAnimationFrame(draw);

122. 움직이는

123. 동작은

124. 스프라이트를

125. 이용한다

127. 캔버스에서는

128. drawImage를

129. 이용해

130. 간단하게

131. 구현할

132. 수

133. 있다

134. var ctx = elCanvas.getContext(2d); ctx.drawImage(대상이미지, 원본x, 원본y, 원본너비, 원본높이, 대상x, 대상y, 대상너비, 대상높이); 원본

135. x,y,width,height

136. 대상

137. x,y,width,height

138. drawImage

140. 원본과

141. 대상의

142. 크기가

143. 다르면

144. 픽셀

145. 조작으로

146. 인해

147. iOS4에서

148. 느려진다

149. var ctx = elCanvas.getContext(2d); ctx.drawImage(elImg, 0, 0, 100, 100, 0 , 0, 200, 100); 원본

150. 너비

151. 100

152. 대상

153. 너비

154. 200

155. drawImage

157. 캔버스로

158. 만든

159. 애니메이션

160. 데모

161. iOS5

163. 똑같은

164. 데모를

165. iOS4가

166. 설치된

167. 똑같은

168. 기기에서

169. 실행

170. iOS4

172. ?!?!?!

174. 빠른

175. 애니메이션을

176. 위해서는

177. 하드웨어

178. 가속이

179. 필수

180. iOS5의

181. 사파리

182. 부터

183. 캔버스

184. 하드웨어

185. 가속

186. 지원

187. 빠름!

188. 빠름!

189. 빠름!

191. CSS3

192. 3D

193. Transforms를

194. 이용하면

195. iOS4에서도

196. 하드웨어

197. 가속이

198. 가능

199. 안드로이드

200. 4.0

201. 이상에서도

202. 하드웨어

203. 가속

204. 지원

205. .displayObject { -‐webkit-‐transform:translate3d(x,y,z) s cale3d(x, y, z) rotateZ(deg); -‐wekit-‐transform-‐origin:0 0; -‐webkit-‐transform-‐style:preserve-‐3d; }

206. 다른

207. CSS속성이

208. 같이

209. 변경되면

211. 속도가

212. 느리다

213. background-position과

214. 같은

215. 속성을

216. 사용할

217. 수

218. 없다

219. 따라서

220. 3D속성만

221. 사용할

222. 수

223. 있도록

224. 구조를

225. 만든다

226. IMG(position:absolute)

227. DIV(overflow:hidden)

229. CSS3

230. 3D

231. Transforms를

232. 사용한

233. 데모

234. iOS4

236. 끝?

239. 기기

240. 별로

241. 다른

242. 대응을

243. 해야

244. 한다

246. 4.0

247. 미만은

248. 하드웨어

249. 가속을

250. 받을

251. 수

252. 없다

253. iPhone

254. iPhone

255. iPhone

256. Android

257. Android

258. 기기/OS

259. 3GS

260. 4

261. 4S

262. 3

263. 미만

264. 3

265. 이상

266. CSS3D

267. (iOS4

268. 이하)

269. Canvas

270. 렌더링

271. CSS3D

272. Canvas

273. or

274. CSS3D

275. 방식

276. Canvas

277. DOM

278. (iOS5

279. 이상)

282. 4.0도

283. 문제가

284. 있다

285. -  한

286. 면이

287. 2048픽셀을

288. 넘어가는

289. 이미지를

290. 사용하면

291. 화면에

292. 검정색으로

293. 표시

294. 된다.

295. -  회전을

296. 하게

297. 되면

298. overflow:hidden

299. 영역의

300. 크기가

301. 바뀐다.

303. 대리점

304. 폭주

305. 10만원대

306. 갤 럭시S3

307. 놓칠라 갤S3

308. 공짜폰에

309. 유통

310. 대란...

311. 전 산

312. 마비

314. 일파만파

315. 7만원

316. 판매 갤럭시S3

317. 1 to.

319. 2.X

320. 사용자

321. 분들께

325. 바꿔주세요.

326. 제발...

336. from.

337. 익명의

338. 개발자

340. 이렇게

341. 어려운

342. 상황이지만

343. 방법은

344. 있다

346. Collie

349. 콜리는

350. 18종

351. 이상의

352. 모바일

353. 기기에

354. 대응하는

355. 모바일에

356. 최적화된

357. 라이브러리

360. 더

361. 빠른

362. 방식으로

363. 렌더링

364. 한다

366. 이벤트

367. 모델이

368. 다르기

369. 때문에

370. 캔버스에도

371. 버블링을

372. 구현

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

375. child

376. div

377. parent

378. body

379. layer

381. 캔버스와

382. DOM에서

383. 보다

384. 정밀한

385. 이벤트

386. 영역을

387. 찾기

388. 위해

389. hitArea

390. 적용

391. -  PNPOLY

392. 알고리즘을

393. 이용해

394. 캔버스의

395. getImageDa ta

396. 보다

397. 빠르게

398. 영역

399. 확인

400. 가능

401. -  외부

402. 도메인의

403. 이미지일

404. 경우

405. getImageData

406. 사용

407. 불가능

408. [[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]]

409. 비동기

410. 이미지

411. 로딩의

412. 불편함을

413. 해소하는

414. ImageManager

415. 제공

416. A

417. 로딩

418. 이미지

419. 로딩

420. 끝

421. A

422. 사용

423. 실제

424. A

425. 이미지를

426. 적용

428. 많은

429. 수의

430. 객체를

431. 다루기

432. 위해

433. 타일

434. 캐시

435. 기능

436. 제공

437. 체스판과

438. 같은

439. 정적인

440. 타일

441. 맵을

442. 만들

443. 때

444. 유리

445. 캔버스

446. 캔버스

448. 간단하게

449. 고해상도

450. 디스플레이

451. 지원

452. 성능

453. 문제로

454. 인해

455. 아이폰

456. 레티나만

457. 지원

458. var isRetina = collie.Renderer.isRetinaDisplay(); collie.ImageManager.addImages({ yame : (isRetina ? large : small) + /yame.png }); a

460. 개별

461. 편의성

462. 제공

463. 처음에

464. 나온

465. 토끼가

466. 움직이는

468. 구현

469. 예제

470. 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();

471. 오픈소스

472. LGPL

473. v2.1

475. http://jindo.dev.naver.com/collie

476. http://dev.naver.com

477. 에서도

478. 찾을

479. 수

480. 있습니다.

[C3]collie deview2012

Recomendados

Recomendados

Más contenido relacionado

Más de NAVER D2

Más de NAVER D2 (20)

[C3]collie deview2012