2011 2/25開催のNHN HTML5勉強会で使用したスライドです。 内容は、ケータイゲームをHTML5のcanvasに移植した導入事例についてです。 http://atnd.org/events/13029

1. 激闘!戦国絵巻 Flashのcanvas移植 作成者：野津手 昌美 所属チーム /上位部署: ：UIT室 Mobile UIチーム UXデザインセンター 連絡先：masami.notsute@nhn.com

2. 自己紹介 UIT室 Mobile UIチーム 野津手 昌美 masaminotsute 現在はJavaScript の開発を 担当しています。 以前はJavaでサーバーサイドの開発もやっていました。 趣味は 犬とネットショッピング

3. 目次 1 はじめに 2.1 ゲームの紹介 2 Flashのcanvas移植 2.2 canvasアニメーションについて 2.3 Flashエリアの構造について 2.4 Flashとcanvasのデータ連携 2.5 実装方法 2.6 はまったところ 3 さいごに 3.1 Flash と canvas

4. はじめに ゲームの紹介

5. Flashのcanvas移植 激闘!戦国絵巻のご紹介 ・2009年11月よりサービス開始。 ・「携帯版ハンゲーム」で 人気のシミュレーションゲーム ⇒戦闘や探索を行い自分の領地を発展させて 勢力を拡大していく ゲーム。

6. Flashのcanvas移植 Flashのエリアの構造について

7. Flashのcanvas移植 Flashのエリアの構造について ①背景、建物が 独立したオブジェクトデータ (swfファイル) ②独立したオブジェクトデータを プログラムで合成させている。

8. Flashのcanvas移植 canvasのアニメーション

9. Flashのcanvas移植 canvasのアニメーション canvas canvas canvas １frame 2frame 3frame

10. Flashのcanvas移植 canvasのアニメーション cx.drawImage( ImgElement, x, y, Img.width, Img.height ) (x, y) (0, 0)

11. Flashのcanvas移植 canvasのアニメーション TimeLineで2枚の画像を切り替えて アニメーションさせている。 A image Bimage A A A A B B B B ０ 1 2 3 4 5 6 7 8 TimeLine

12. 別な方法で実装することも…

13. Flashのcanvas移植 canvasのアニメーション Cimage 一枚の画像で映画のフィルムのようにみせることもできる。 A B C D E F G H

14. Flashのcanvas移植 Flashとcanvasのデータ連携

15. Flashのcanvas移植 Flashとcanvasのデータ連携

16. (携帯側) http://swf.hange.jp/sengoku/sengoku_main.php?id=sd1|bd-b00178f0-s005672e-s0028e28-l001bd4d-s0041465-s001d867-s010547c-s020bb81-s006189a-s0185e97-s00944ab-s003c2ad-s011db9b-s02351c6-s0199cc6-n00278f0-n0017839-n00578f0

17. (スマートフォン側) background: {id: 'b001', x: 120, y: 240}, building: [{id:'s005', x:103, y:46}, {id:'s002', x:142, y:40}, {id:'s003', x:20, y:101}, {id:'l001', x:126, y:107}, {id:'s009', x:216, y:103}, {id:'n001', x:120, y:57}, {id:'n005', x:120, y:240}]

18. (携帯側) http://swf.hange.jp/sengoku/sengoku_main.php?id=sd1|bd-b00178f0- ・・・(省略) s0199cc6-n00278f0-n0017839-n00578f0 建物のID ＋ x座標 ＋ y座標 change (n001) (78) (39) (スマートフォン側) background: {id: 'b001', x: 120, y: 240}, building: [{id:'s005', x:103, y:46}, ・・・(省略) {id:'n005', x:120, y:240}]

19. Flashのcanvas移植 実装方法

20. 独立したデータを どのように管理していくのか？

21. sengoku.effects = { s001: { timeLine: 0, imgs: ['sp_s001_0000.png'], drawImgList: [], init: function() { // 初期化 }, animation: function(elCanvas) { // setIntevalで呼ばれる。 } }, s002: { // 省略 }, s003: { // 省略 }, s004: { // 省略 }, s005: { // 省略 } }

22. Flashのcanvas移植 Flashとcanvasのデータ連携 実装方法 (初期化時) ① canvas内で利用する全ての画像のLoad

23. sengoku.effects = { s001: { timeLine: 0, imgs: ['sp_s001_0000.png'], drawImgList: [], init: function() { // 初期化 }, animation: function(elCanvas) { // setIntevalで呼ばれる。 } }, s002: { // 省略 }, s003: { // 省略 }, s004: { // 省略 }, s005: { // 省略 } }

24. Flashのcanvas移植 Flashとcanvasのデータ連携 実装方法 (初期化時) ① canvas内で利用する全ての画像のLoad ② Loadしてきた画像から、 imgのelementの生成、 canvas描画用のx座標とy座標の算出

25. sengoku.effects = { s001: { timeLine: 0, imgs: ['sp_s001_0000.png'], drawImgList: [], init: function() { // 初期化 }, animation: function(elCanvas) { // setIntevalで呼ばれる。 } }, s002: { // 省略 }, s003: { // 省略 }, s004: { // 省略 }, s005: { // 省略 } }

26. Flashのcanvas移植 Flashとcanvasのデータ連携 canvasでsetする座標 (0, 0) (x, y)

27. Flashのcanvas移植 Flashとcanvasのデータ連携 実装方法 (初期化時) ① canvas内で利用する全ての画像のLoad ② Loadしてきた画像から、 imgのelementの生成、 canvas描画用のx座標とy座標の算出 ③ sengoku.effectsの ${建物id}.init()の 実行をかける。

28. sengoku.effects = { s001: { timeLine: 0, imgs: ['sp_s001_0000.png'], drawImgList: [], init: function() { // 初期化 }, animation: function(elCanvas) { // setIntevalで呼ばれる。 } }, s002: { // 省略 }, s003: { // 省略 }, s004: { // 省略 }, s005: { // 省略 } }

29. Flashのcanvas移植 Flashとcanvasのデータ連携 実装方法 (最後に) ひたすら、setInterval()で sengoku.effectsの ${建物id}.animation() 実行をかけるだけ。

30. sengoku.effects = { s001: { timeLine: 0, imgs: ['sp_s001_0000.png'], drawImgList: [], init: function() { // 初期化 }, animation: function(elCanvas) { // setIntevalで呼ばれる。 } }, s002: { // 省略 }, s003: { // 省略 }, s004: { // 省略 }, s005: { // 省略 } }

31. Flashのcanvas移植 はまったところ

32. Flashのcanvas移植 はまったところ canvasの座標に小数値を設定すると･･･ ■整数値 ■小数値 例) (126, 107) 例) (126.5, 107.5)

33. 何が困るの？

34. Flashのcanvas移植 はまったところ 移動などのアニメーション処理に注意!! 移動

35. Androidの1.6と2.1には バグあった・・・

36. Flashのcanvas移植 はまったところ バグその① alpha値(透明度)がおかしい。 × ○ 正常 バグ

37. Flashのcanvas移植 はまったところ バグその① - 解決策 - 解決していない。 ※特にゲームとしての動作に支障が無いために そのままにしてます。。

38. Flashのcanvas移植 はまったところ バグその② 画像描画時に1.5倍拡大されてしまう。 × ○ 正常 バグ

39. Flashのcanvas移植 はまったところ バグその② - 解決策 - 縮小して描画 cx.drawImage(elImg, setX*2/3, setY*2/3, elImg.width*2/3, elImg.height*2/3);

40. Androidの1.6と2.1のバグは、 発生しない端末もあるため、注意が必要です。

41. さいごに Flash と canvas

42. 今回の移植では、Flashは プロトタイピングとして役に立ちました。

43. 正直いうと、 Flash から canvas 移植なんてとても大変

44. Flash ・ツールを利用して誰でも簡単に アニメーションを作成することができる ・ブラウザの違いに影響を受けない。 ・ライブラリーが充実している ・pluginがないと見れない。 (iOSで標準で見ることができない) etc・・・

45. HTML5 - canvas - ・コンパイルを必要としない。 ・iOSでも、Androidでも動く。 ・ライブラリーが充実していない。 ・アニメーション作成用のツールがない ・情報が少ない etc・・・

46. canvasの方がマイナス要素が多いけど・・・ 解決できる要因が多い。 ツールも開発中っぽい。 ライブラリも少しずつだが増えてきている。 情報も増えてきている。

47. canvasには、明るい未来が・・・ 1

48. Thank you. 作成者：野津手 昌美 所属チーム /上位部署: ：UIT室 Mobile UIチーム UXデザインセンター 連絡先：masami.notsute@nhn.com

49. 続きは・・・ news.uxdc.jp blog: http://news.uxdc.jp/ uit twitter： nhnuit 1