HTML5@iPhoneゲーム開発

HTML5@iPhoneゲーム開発
株式会社DeNA
ソーシャルメディア事業本部
ソーシャルゲーム統括部スマートフォン開発グループ
岸弘倫<kishi dot hiromichi at dena dot jp>

DeNA Technology Seminar #3 1

自己紹介
‣ 2009年DeNAに入社
– モバゲーの3Dアバター関連開発
– iアプリ開発
– 子会社のMiniNationにて海外向けのiPhoneアプリ
開発
‣ 現在
– iPhone・Androidアプリ開発


本日の
本日の内容

‣ MiniNationからリリースしたiPhoneゲーム
「Pirate Nation」
‣ HTML, CSS, Javascriptで主に開発
‣ 今日は開発で得たノウハウについて話します。
– ゲームというよりHTML5でのiPhoneアプリ開発に
ついてがメインです。

Pirate Nationについて


Pirate Nation
‣ モバゲー「海賊トレジャー」のiPhone移植版
– スマートフォンに合わせてデザイン一新
– 海外ユーザ向けにシステム見直し
‣ 8/30からApp Storeで提供開始
‣ US App StoreのTop Freeで最高3位


Web技術でiPhoneゲーム開発
Web技術でiPhoneゲーム開発
技術ゲーム
‣ Pirate NationはUIWebViewを使ってWebベー
スで開発
‣ UIWebView
– iPhoneアプリ上でHTMLレンダリングするView
– 標準で利用可能
– Mobile Safariと同じWebKit
– 早い話が俺俺ブラウザをiPhoneアプリで簡単に
作ることのできる便利なView
※AndroidもWebViewという同機能のViewが提供


Web技術ベースの
Web技術ベースのFW/PF
技術ベース
‣ Titanium Mobile
– http://www.appcelerator.com/products/titanium
-mobile-application-development/
‣ PhoneGap
– http://www.phonegap.com/
‣ Pirate Nationで採用しなかった理由（4月頃）：
– iOS4の規約変更
– 採用事例の少なさ
– ゲーム開発向けではない

Webサイトとして提供しなかった理由
Webサイトとして提供しなかった理由
サイトとして提供しなかった
‣ Webベースで開発するならWebサイトとして公
開すればよいのでは？
↓
‣ アプリを主体に使うiPhoneユーザのスタイル
‣ Mobile Safariだけでは実現できない機能
‣ App Storeという強力な導線


Objective-
Objective-C側で実装した機能
実装した機能
した
‣ Audio
‣ 加速度センサー
‣ ページ遷移のトランジション
‣ リソースのキャッシュ
– キャッシュ制御のためmanifest未使用
‣ セキュリティ強化
‣ Push Notification
‣ App Storeのアプリ内課金システム
（In App Purchase）

iPhone Web開発


HTML5と
HTML5とCSS3
‣ iPhone(Webkit)に絞ることでクロスブラウザを意識せ
ずに開発可能
‣ HTML5
– inputのtypeの追加とValidation
– ローカルストレージ（今回は未使用）
‣ CSS3
– CSSセレクタの追加
– 角丸、影、グラデーション、透明度などの指定
– transform（translate, scale, rotate, skewなど)の指定
– CSSアニメーション


CSSアニメーション
CSSアニメーション
‣ HTML要素をCSSで指定してアニメーションさ
せる仕様
‣ iPhoneのCSSアニメーションは高速
– （webkit-transformと組み合わせた場合）
– iPhone3G対応で活躍
• DOM操作だとガクガク
→上記を利用することで滑らかに
‣ アニメーション途中の座標を取得できないの
で当たり判定のある表現には向かない

CSSアニメーション例
CSSアニメーション例1
アニメーション
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}


CSSアニメーション例
CSSアニメーション例２
div {
-webkit-transition: 1s ease-in-out;
-webkit-animation-name: anime;
}
// キーフレームでの指定も可能
@-webkit-keyframes anime {
0%{ -webkit-transform: translate(10px, 10px); }
50%{ -webkit-transform: rotate(90deg); }
100% { -webkit-transform: scale(2); }
}


iPhone開発の
iPhone開発のTips
開発
‣ clickイベントの検知は遅いのでtouchstart,
touchendを使う
‣ position: fixedが使えない
– WindowではなくViewportにfixされるため
‣ iframe内のスクロール方法が異なる
– 2本指でフリックでスクロール


（おまけ）ページの一部を固定する
おまけ）ページの一部を固定する
‣ iPhone, iPadだとヘッダやフッタを固定するよ
うなレイアウトの表現が難しい
‣ 「iScroll」
– http://cubiq.org/iscroll
– iPhone, iPadでもフリックしたときの動きをシミュ
レートしてposition:fixedなレイアウト実現
– オプションも豊富


Canvasを使う


海賊トレジャー移植の
海賊トレジャー移植の問題点
トレジャー移植
‣ 「海賊トレジャー」はFlashミニゲームが特徴
– 大砲バトル、サルベージ
⇒iPhoneはFlash Playerが未搭載
‣ Flashゲームをどう実現するか？
– 変更の容易性・即時性
大砲バトル
– 複数プラットフォームへの展開

サルベージ

Flash代替案
Flash代替案
‣ Objective-C（OpenGL)
⇒開発コスト、変更コスト、移植性が問題
‣ Flash CS5のiPhoneアプリ変換機能
⇒規約変更に伴い選択肢からなくなる
‣ Canvas, SVG
⇒調査した結果そこそこのパフォーマンスが出た
Canvasを採用


Canvasとは
Canvasとは
‣ CanvasとはJavascriptベースでブラウザ上に
図を描画するための仕様
– DOM操作と異なりフレーム単位で画面を再描画
‣ 大砲バトルとサルベージをCanvasで実装


Demo


Canvasの
Canvasの性能
Canvasベンチマーク

80.0
70.0

Frame Per Second
60.0
50.0 iPhone3G
iPhone3GS
40.0
iPhone4
30.0 iPhone4(Viewport修正)
20.0
10.0
0.0
1 10 20 30 40 50
描画画像数

‣ iPhone4が遅い ※Canvas上に適当な画像を描画するだけのプログラムで計測

– 原因1：Viewportの設定（表示の拡大処理が遅い）
⇒ディスプレイサイズに合わせて画像とcanvasを修正
– 原因2：Retinaディスプレイの解像度が高すぎる
→上位機種で必ずしもパフォーマンスが良くなるとは限らない

Canvas高速化Tips
Canvas高速化Tips
高速化
‣ 座標や幅・高さの指定はintにする
‣ parseIntは使わない
‣ new Date（）ではなくDate.now()を使う
‣ 描画がネックの場合画像の解像度を落とす
‣ HTML要素とCSSアニメーションを併用（後述）


CanvasとHTML+CSSアニメーション
CanvasとHTML+CSSアニメーション
‣ Canvas
– フレームごとの当たり判定や描画タイミングの制御可能
– 高レベルなアニメーション指定、画面の一部のみを再描
画する機能はない
‣ HTML+CSSアニメーション
– 高レベルな指定方法を提供、高速
– フレームごとの制御や描画タイミングの指定ができない
‣ 両者の得意な部分を担当する


HTML要素とCSSアニメーションを
HTML要素とCSSアニメーションを併用
要素アニメーション
‣ 動きのない画像はHTML要素を重ねて表示
– Canvasへの描画に掛かる時間を減らす
‣ 決まった動きをするものはHTML要素+CSSアニ
メーションを利用
– CSSアニメーションで動かすほうが高速
– 高レベルな動作の指定ができる
‣ その他
– Canvas要素に動きを指定して画面を揺らす
– 塗り潰した要素を重ねて画面効果

例：動きの少ない部分をHTML要素として表示
きの少ない部分をHTML要素として表示
部分要素として

div要素で表現し、値によって
webkit-transform: scaleでバーを制御

ユーザが画面をタップしたときに

Img要素を重ね、webkit-transform: rotateで
向きを変えるのみ。

方向を回転させる

例：CSSアニメーションを利用
CSSアニメーションを

CSSアニメーションのキーフレームを
使って動きを定義。
パフォーマンスが良くなる他、
細かい動きの表現や変更にも強くなる


Canvasのメリット/デメリット


Canvasの
Canvasのメリット
‣ 開発環境の準備が楽
– ブラウザですぐ確認可能
‣ Javascriptなので覚えることが少ない
‣ 既存のHTML要素との併用が容易


Canvasの
Canvasのデメリット
‣ 描画速度がネックで表現に限界
– フィーチャーフォンのFlashゲーム+αぐらいなら実現
可能
‣ 世代間のパフォーマンス差が激しい
‣ その他、Android 2.1系のCanvasの基本APIにバ
グがあり、移植をする上でも問題
↓
総合的に見ると現状はスマートフォン向けゲー
ム開発の選択肢としてあまりオススメできない

Pirate Nationリリースを通して


Webベースにして良かった点
Webベースにして良かった点
ベースにして
‣ ユーザの反応を見て改良を即座に反映
– アプリ再申請すると審査が終わるまで1-2週間
⇒Webだと即座に更新可能、出しわけ可能
‣ ゲームのバージョンの差異がない
‣ イベントなど新機能追加の容易さ
– 例：期間限定セール、ハロウィンイベント


現在の
現在の課題
‣ Canvasの描画速度
– 描画速度がボトルネック
– アクション性の強いゲーム表現には限界がある
‣ サーバへのリクエストを減らす
– リクエストのたびにウェイトの発生
⇒他のアプリと比べてストレスが大きい
– 世界的にはネットワークが不安定な環境も多く、
処理をクライアントに寄せる工夫が必要


ご清聴ありがとうございました


HTML5@iPhoneゲーム開発

Recommended

Recommended

More Related Content

What's hot

What's hot (14)

Viewers also liked

Viewers also liked (20)

Similar to HTML5@iPhoneゲーム開発

Similar to HTML5@iPhoneゲーム開発 (20)

Recently uploaded

Recently uploaded (9)

HTML5@iPhoneゲーム開発