2012年5月15日 第3回SmartHacks

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. 大きく２通り
• 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. ご清聴
ありがとうございました