激闘 ! 戦国絵巻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 月よりサービス開始。
・「携帯版ハンゲーム」で人気のシミュレーションゲーム ⇒戦闘や探索を行い自分の領地を発展させて 勢力を拡大していく ゲーム。
(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 のアニメーション
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
(携帯側 )
(スマートフォン側 )
sengoku.effects = { s001: { timeLine: 0, imgs: ['sp_s001_0000.png'], drawImgList: [ ], init: function() { // 初期化 }, animation: function(elCanvas) { // setInteval で呼ばれる。 } }, s002: { // 省略 }, s003: { // 省略 }, s004: { // 省略 }, s005: { // 省略 }}
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: { // 省略 }}
② 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: { // 省略 }}
バグその② - 解決策 -
cx.drawImage(elImg, setX*2/3, setY*2/3, elImg.width*2/3, elImg.height*2/3);
縮小して描画
Flash の canvas 移植はまったところ
Flash
・ツールを利用して誰でも簡単に アニメーションを作成することができる
・ブラウザの違いに影響を受けない。
・ライブラリーが充実している
・ plugin がないと見れない。 (iOS で標準で見ることができない )
etc ・・・
HTML5 - canvas -
・コンパイルを必要としない。
・ iOS でも、 Android でも動く。
・ライブラリーが充実していない。
・アニメーション作成用のツールがない
etc ・・・
・情報が少ない
Top Related