Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5で作るスマホブラウザゲーム株式会社フォリフエンジニア大橋 巧2012/05/16 第3回SmartHacks
自己紹介•   大橋 巧•   2011年4月入社•   スマートフォン向けコンテンツのクライアン    トサイド担当•   Corollin’ Planet•   最近はFlashコンテンツのHTML5変換や、    Backbone.jsで...
今日のお話• 開発事例紹介• スマホブラウザゲームの アニメーション• 開発ではまった事とその解決法
開発事例紹介
5-Land•   iOS/Androidのブラウザ    上で動くミニゲーム集•   一部を除いてHTML5で    はない•   ガラケーレベル
Corollin’ Planet• 2011年7月リリース• HTML5で開発• 開発2週間くらい•   corollin.com
Corollin’ Planet•   今年3月、Mobile Hack Tokyoの    HackathonにてFacebookアプリ    としてリリース    ○ 得点、進行状況のシェア    ○ 友人のプレイ記録をゲーム    内で見...
Final Rebellion•   MMOストラテジー•   マップのスクロール、    ガチャ演出などに    HTML5を使用•   joynt.in/finalrebellion
スマホブラウザゲーム(の、アニメーション)
大きく2通り• Canavasによるアニメーション• CSS3によるアニメーション
Canvasとは•   JavaScriptを使って動的に図を描くHTMLの要素HTML:    <canvas width= 100 height= 100 ></canvas>js:    var canvas = document.get...
Canvasアニメーション•   ループの中で、描画→クリア→描画setInterval(function() {   // Canvasをリフレッシュ   ctx.clearRect(0, 0, canvas.width, canvas.he...
CSS3アニメーション•    Animation     ○ キーフレームをCSSに記述    CSS:      #hoge {        -webkit-animation: animation_1 1s infinite;      ...
CSS3アニメーション•    Transition     ○ 時間的変化     ○ スタイルを変更すると自動的にアニメー     ションを伴って変化する    CSS:        -webkit-transition: ease-ou...
番外•    HTML5使わない場合    js:          setInterval(function() {             x++;             document.getElementById( hoge ).s...
CanvasかCSS3か•   Canvasアニメーション    ○ 複雑な動き(物理判定など)も作れる    ○ CSS3と比べるとパフォーマンスは落ちる•   CSS3アニメーション    ○ 実装が簡単(CSSのみで完結)    ○ シン...
Corollin’ Planetでは•   両方組み合わせ•   メインのゲーム部分は    Canvas•   メニュー画面や、    ストーリー部分はCSS3
開発中にはまった事
開発中にはまった事• アニメーションが重い• Canvasのバグ(主にAndorid)• CSS3のバグ(主にAndorid)
対策:アニメーションが重い•   Canvas    ○ Retinaディスプレイ対応    ○ 描画範囲を最小限に    ○ putImageDataを使用•   CSS3    ○ GPUアクセラレーションを利用
Retinaディスプレイ対応•   2倍サイズの画像を2倍サイズのCanvasに描画    ○ 非Retina<canvas width= 100 height= 100 >ctx.drawImage(img, 0, 0, 100, 100);...
描画範囲を最小限に!•   Canvasアニメーションでは毎フレームCanvasを    クリアする必要があるため必然的に描画範囲    が大きくなり、重くなる    →必要な部分だけ再描画する
putImageData•   getImageDataで読み込んだものを貼付ける•   drawImageDataより描画コスト軽い    var image = ctx.getImageData(0, 0, 100, 100);    ct...
GPUアクセラレーション•   iOSではtransformプロパティ等に対してアクセ    ラレーションが有効    →iOS5からはCanvasに対しても有効•   iOSシミュレータの場合    デバッグ→ブレンドレイヤーで確認
その他•   Canvasを複数枚重ねてレイヤー的に•   描画は2フレームに1度•   キャラクターの画像はAi→Canvasという    IllustlatorのプラグインでCanvasデータに変更
Canvasのバグ•   主にAndroid 2.1x    ○ drawImageのサイズ、座標が引き延ばされる    ○ scaleが2回適用される    ○ rotate, translateがなんかカオス
Canvasのバグ•    drawImageのバグ     →scaleで対応    var zoom_fix = Math.sqrt(320 / screen.width);    ctx.scale(zoom_fix, zoom_fix);  ...
CSS3のバグ•   Android2.2以降でTransformを設定した要素の子    要素にTransformを設定    →アニメーション時、一瞬Transformが適用さ    れない事がある•   対策:やめましょう
まとめ
Androidのチェックを万全に•   先述した以外にも端末やメーカー別のバグが    あるため、詳細なチェックは必須•   iOSで動いているものをAndroidでも動かそう    とすると難しいが、逆は簡単    →Androidベースで開...
安定した機能を使う•   実際に他社で使用されているなど、実績のあ    るものを使用•   Web SQLのようにHTML5の仕様から外れてし    まうものも
ライブラリの使用•   ここ一年でかなり充実•   バグや実装の違いを吸収してくれるものも•   ライブラリ    →enchant.js, Arctic.js,easel.js, etc...•   オーサリングツール    →Adobe E...
ご清聴ありがとうございました
Upcoming SlideShare
Loading in …5
×

HTML5で作るスマホブラウザゲーム

9,304 views

Published on

2012年5月15日 第3回SmartHacks

  • Be the first to comment

HTML5で作るスマホブラウザゲーム

  1. 1. HTML5で作るスマホブラウザゲーム株式会社フォリフエンジニア大橋 巧2012/05/16 第3回SmartHacks
  2. 2. 自己紹介• 大橋 巧• 2011年4月入社• スマートフォン向けコンテンツのクライアン トサイド担当• Corollin’ Planet• 最近はFlashコンテンツのHTML5変換や、 Backbone.jsでWebアプリの開発とか
  3. 3. 今日のお話• 開発事例紹介• スマホブラウザゲームの アニメーション• 開発ではまった事とその解決法
  4. 4. 開発事例紹介
  5. 5. 5-Land• iOS/Androidのブラウザ 上で動くミニゲーム集• 一部を除いてHTML5で はない• ガラケーレベル
  6. 6. Corollin’ Planet• 2011年7月リリース• HTML5で開発• 開発2週間くらい• corollin.com
  7. 7. Corollin’ Planet• 今年3月、Mobile Hack Tokyoの HackathonにてFacebookアプリ としてリリース ○ 得点、進行状況のシェア ○ 友人のプレイ記録をゲーム 内で見られる• あのザッカーバーグもプレイ 感想:”Too Hard.”• Best Social Mobile Game受賞!
  8. 8. Final Rebellion• MMOストラテジー• マップのスクロール、 ガチャ演出などに HTML5を使用• joynt.in/finalrebellion
  9. 9. スマホブラウザゲーム(の、アニメーション)
  10. 10. 大きく2通り• Canavasによるアニメーション• CSS3によるアニメーション
  11. 11. Canvasとは• JavaScriptを使って動的に図を描くHTMLの要素HTML: <canvas width= 100 height= 100 ></canvas>js: var canvas = document.getElementsByTagName(canvas)[0]; var ctx = canvas.getContext(2d); ctx.Rect(0, 0, 50, 100); ctx.fill();
  12. 12. Canvasアニメーション• ループの中で、描画→クリア→描画setInterval(function() { // Canvasをリフレッシュ ctx.clearRect(0, 0, canvas.width, canvas.height); // 座標を移動させながら描画 ctx.drawImage(img, x++, y);}, 100);
  13. 13. CSS3アニメーション• Animation ○ キーフレームをCSSに記述 CSS: #hoge { -webkit-animation: animation_1 1s infinite; } @-webkit-keyframes animation_1 { 0% { left: 0px; } 50% { left: 200px; } 100% { left: 100px; top: 100px; } }
  14. 14. CSS3アニメーション• Transition ○ 時間的変化 ○ スタイルを変更すると自動的にアニメー ションを伴って変化する CSS: -webkit-transition: ease-out 2s; js: document.getElementById( hoge ).style.left = 100px ; document.getElementById( hoge ).style.top = 100px ;
  15. 15. 番外• HTML5使わない場合 js: setInterval(function() { x++; document.getElementById( hoge ).style.left = x + px ; }, 100);• CanvasもCSS3も使えないブラウザでは必要 (IE8以下など)
  16. 16. CanvasかCSS3か• Canvasアニメーション ○ 複雑な動き(物理判定など)も作れる ○ CSS3と比べるとパフォーマンスは落ちる• CSS3アニメーション ○ 実装が簡単(CSSのみで完結) ○ シンプルなアニメーション
  17. 17. Corollin’ Planetでは• 両方組み合わせ• メインのゲーム部分は Canvas• メニュー画面や、 ストーリー部分はCSS3
  18. 18. 開発中にはまった事
  19. 19. 開発中にはまった事• アニメーションが重い• Canvasのバグ(主にAndorid)• CSS3のバグ(主にAndorid)
  20. 20. 対策:アニメーションが重い• Canvas ○ Retinaディスプレイ対応 ○ 描画範囲を最小限に ○ putImageDataを使用• CSS3 ○ GPUアクセラレーションを利用
  21. 21. Retinaディスプレイ対応• 2倍サイズの画像を2倍サイズのCanvasに描画 ○ 非Retina<canvas width= 100 height= 100 >ctx.drawImage(img, 0, 0, 100, 100); ○ Retina<canvas width= 200 height= 200 style= width: 100px; height: 100px; >ctx.drawImage(img, 0, 0, 200, 200);• アニメーションのパフォーマンスにも影響
  22. 22. 描画範囲を最小限に!• Canvasアニメーションでは毎フレームCanvasを クリアする必要があるため必然的に描画範囲 が大きくなり、重くなる →必要な部分だけ再描画する
  23. 23. putImageData• getImageDataで読み込んだものを貼付ける• drawImageDataより描画コスト軽い var image = ctx.getImageData(0, 0, 100, 100); ctx.putImageData(image, 0, 0);• Corollinではあらかじめアニメーションパター ンを読み込み、putImageで連続的に再生 (内部でセル画を生成しているイメージ)
  24. 24. GPUアクセラレーション• iOSではtransformプロパティ等に対してアクセ ラレーションが有効 →iOS5からはCanvasに対しても有効• iOSシミュレータの場合 デバッグ→ブレンドレイヤーで確認
  25. 25. その他• Canvasを複数枚重ねてレイヤー的に• 描画は2フレームに1度• キャラクターの画像はAi→Canvasという IllustlatorのプラグインでCanvasデータに変更
  26. 26. Canvasのバグ• 主にAndroid 2.1x ○ drawImageのサイズ、座標が引き延ばされる ○ scaleが2回適用される ○ rotate, translateがなんかカオス
  27. 27. Canvasのバグ• drawImageのバグ →scaleで対応 var zoom_fix = Math.sqrt(320 / screen.width); ctx.scale(zoom_fix, zoom_fix); ctx.drawImage(hoge, 0, 0);• transform, rotate →使わない
  28. 28. CSS3のバグ• Android2.2以降でTransformを設定した要素の子 要素にTransformを設定 →アニメーション時、一瞬Transformが適用さ れない事がある• 対策:やめましょう
  29. 29. まとめ
  30. 30. Androidのチェックを万全に• 先述した以外にも端末やメーカー別のバグが あるため、詳細なチェックは必須• iOSで動いているものをAndroidでも動かそう とすると難しいが、逆は簡単 →Androidベースで開発していくのもアリ
  31. 31. 安定した機能を使う• 実際に他社で使用されているなど、実績のあ るものを使用• Web SQLのようにHTML5の仕様から外れてし まうものも
  32. 32. ライブラリの使用• ここ一年でかなり充実• バグや実装の違いを吸収してくれるものも• ライブラリ →enchant.js, Arctic.js,easel.js, etc...• オーサリングツール →Adobe Edge, Sencha Animater, etc...
  33. 33. ご清聴ありがとうございました

×