NHN HTML5勉強会 Flashのcanvas移植

49
激激 ! 激激激激 Flash 激 canvas 激激 作作作 作作作 作作 作作作作作 / 作作作作 : UIT 作 Mobile UI 作作作 UX 作作作作作作作作 作作作[email protected]

Transcript of NHN HTML5勉強会 Flashのcanvas移植

激闘 ! 戦国絵巻Flash の canvas 移植作成者:野津手  昌美

所属チーム / 上位部署 : : UIT 室  Mobile UI チーム  UX デ

ザインセンター

連絡先: [email protected]

自己紹介 

UIT 室 Mobile UI チーム

野津手 昌美masami notsute

現在は JavaScript の開発を担当しています。以前は Javaでサーバーサイドの開発もやっていました。

趣味は 犬とネットショッピング

目次

1 はじめに

2 Flash のcanvas 移植

3 さいごに

2.1 ゲームの紹介

2.2 canvas アニメーションについて2.3 Flash エリアの構造について2.4 Flash と canvas のデータ連携2.5 実装方法2.6 はまったところ

3.1 Flash と canvas

はじめに

ゲームの紹介

Flash の canvas 移植

激闘 ! 戦国絵巻のご紹介

・ 2009 年 11 月よりサービス開始。

・「携帯版ハンゲーム」で人気のシミュレーションゲーム ⇒戦闘や探索を行い自分の領地を発展させて  勢力を拡大していく ゲーム。

Flash の canvas 移植

Flash のエリアの構造について

Flash の canvas 移植

Flash のエリアの構造について

① 背景、建物が独立したオブジェクトデータ(swf ファイル )

② 独立したオブジェクトデータをプログラムで合成させている。

Flash の canvas 移植

canvas のアニメーション

canvas

Flash の canvas 移植

canvas のアニメーション

1 frame 2frame 3frame

canvas canvas

(0, 0)(x, y)

cx.drawImage( ImgElement, x, y, Img.width, Img.height )

Flash の canvas 移植

canvas のアニメーション

TimeLine

0 1 2 3 4 5 6 7 8

TimeLine で 2 枚の画像を切り替えてアニメーションさせている。A image B image

A A A A B B B B

Flash の canvas 移植

canvas のアニメーション

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

一枚の画像で映画のフィルムのようにみせることもできる。

A B C D E F G H

Flash の canvas 移植

canvas のアニメーション

C image

Flash の canvas 移植

Flash と canvas のデータ連携

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 座標(n001) (78) (39)

background: {id: 'b001', x: 120, y: 240},building: [{id:'s005', x:103, y:46},        ・・・ ( 省略 )

      {id:'n005', x:120, y:240}]

change

(携帯側 )

(スマートフォン側 )

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

実装方法  ( 初期化時 )

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

② Load してきた画像から、  img の element の生成、  canvas 描画用の x 座標と y 座標の算出

① canvas 内で利用する全ての画像のLoad

実装方法  ( 初期化時 )

Flash の canvas 移植

Flash と canvas のデータ連携

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

(0, 0)canvas で set する座標

(x, y)

Flash の canvas 移植

Flash と canvas のデータ連携

② Load してきた画像から、  img の element の生成、  canvas 描画用の x 座標と y 座標の算出

① canvas 内で利用する全ての画像のLoad

③ sengoku.effects の ${ 建物id}.init() の 実行をかける。

実装方法  ( 初期化時 )

Flash の canvas 移植

Flash と canvas のデータ連携

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

ひたすら、 setInterval() でsengoku.effects の ${ 建物id}.animation()実行をかけるだけ。

実装方法  ( 最後に )

Flash の canvas 移植

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 の座標に小数値を設定すると・・・

■ 整数値 ■ 小数値例 )   (126, 107) 例 )   (126.5, 107.5)

何が困るの?

移動などのアニメーション処理に注意 !!

移動

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

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

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);

縮小して描画

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

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

さいごに

Flash  と canvas

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

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

Flash

・ツールを利用して誰でも簡単に アニメーションを作成することができる

・ブラウザの違いに影響を受けない。

・ライブラリーが充実している

・ plugin がないと見れない。  (iOS で標準で見ることができない )

etc ・・・

HTML5 - canvas -

・コンパイルを必要としない。

・ iOS でも、 Android でも動く。

・ライブラリーが充実していない。

・アニメーション作成用のツールがない

etc ・・・

・情報が少ない

canvas の方がマイナス要素が多いけど・・・

解決できる要因が多い。ツールも開発中っぽい。ライブラリも少しずつだが増えてきている。情報も増えてきている。

1  

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

Thank you.作成者:野津手  昌美

所属チーム / 上位部署 : : UIT 室  Mobile UI チーム  UX デ

ザインセンター

連絡先: [email protected]

1  

続きは・・・

news.uxdc.jp blog :

http://news.uxdc.jp/

uit twitter :

nhnuit