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

8,629 views

Published on

2012年5月15日 第3回SmartHacks

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,629
On SlideShare
0
From Embeds
0
Number of Embeds
549
Actions
Shares
0
Downloads
34
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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. ご清聴ありがとうございました

    ×