Download as KEY, PPTX
![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();](https://image.slidesharecdn.com/20120515smarthacks-120515061156-phpapp01/85/HTML5-11-320.jpg)
HTML5で作るスマホブラウザゲーム
- 1.
- 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.
- 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.