Your SlideShare is downloading. ×
0
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

7,470

Published on

2012年5月15日 第3回SmartHacks

2012年5月15日 第3回SmartHacks

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

No Downloads
Views
Total Views
7,470
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
32
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

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

    ×