NHN HTML5勉強会 Flashのcanvas移植

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

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

目次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

はじめにゲームの紹介

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

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

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

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

Flashのcanvas移植canvasのアニメーションcanvascanvascanvas１frame2frame3frame

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

Flashのcanvas移植canvasのアニメーションTimeLineで2枚の画像を切り替えてアニメーションさせている。A imageBimageAAAABB BB０12345678TimeLine

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

Flashのcanvas移植canvasのアニメーションCimage一枚の画像で映画のフィルムのようにみせることもできる。ABCDEFGH

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

(携帯側)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

(スマートフォン側)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}]

(携帯側)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}]

Flashのcanvas移植実装方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

さいごにFlash　と　canvas

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

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

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

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

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

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

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

続きは・・・news.uxdc.jp blog:http://news.uxdc.jp/uit twitter：nhnuit1

NHN HTML5勉強会 Flashのcanvas移植

More Related Content

Featured (20)

NHN HTML5勉強会 Flashのcanvas移植