Contenu connexe
Similaire à HTML5@iPhoneゲーム開発
Similaire à HTML5@iPhoneゲーム開発 (20)
HTML5@iPhoneゲーム開発
- 1. HTML5@iPhoneゲーム開発
株式会社DeNA
ソーシャルメディア事業本部
ソーシャルゲーム統括部スマートフォン開発グループ
岸 弘倫<kishi dot hiromichi at dena dot jp>
DeNA Technology Seminar #3 1
- 2. 自己紹介
‣ 2009年DeNAに入社
– モバゲーの3Dアバター関連開発
– iアプリ開発
– 子会社のMiniNationにて海外向けのiPhoneアプリ
開発
‣ 現在
– iPhone・Androidアプリ開発
DeNA Technology Seminar #3 2
- 3. 本日の
本日の内容
‣ MiniNationからリリースしたiPhoneゲーム
「Pirate Nation」
‣ HTML, CSS, Javascriptで主に開発
‣ 今日は開発で得たノウハウについて話します。
– ゲームというよりHTML5でのiPhoneアプリ開発に
ついてがメインです。
DeNA Technology Seminar #3 3
- 6. Web技術でiPhoneゲーム開発
Web技術でiPhoneゲーム開発
技術 ゲーム
‣ Pirate NationはUIWebViewを使ってWebベー
スで開発
‣ UIWebView
– iPhoneアプリ上でHTMLレンダリングするView
– 標準で利用可能
– Mobile Safariと同じWebKit
– 早い話が俺俺ブラウザをiPhoneアプリで簡単に
作ることのできる便利なView
※AndroidもWebViewという同機能のViewが提供
DeNA Technology Seminar #3 6
- 7. Web技術ベースの
Web技術ベースのFW/PF
技術ベース
‣ Titanium Mobile
– http://www.appcelerator.com/products/titanium
-mobile-application-development/
‣ PhoneGap
– http://www.phonegap.com/
‣ Pirate Nationで採用しなかった理由(4月頃):
– iOS4の規約変更
– 採用事例の少なさ
– ゲーム開発向けではない
DeNA Technology Seminar #3 7
- 8. Webサイトとして提供しなかった理由
Webサイトとして提供しなかった理由
サイトとして提供しなかった
‣ Webベースで開発するならWebサイトとして公
開すればよいのでは?
↓
‣ アプリを主体に使うiPhoneユーザのスタイル
‣ Mobile Safariだけでは実現できない機能
‣ App Storeという強力な導線
DeNA Technology Seminar #3 8
- 9. Objective-
Objective-C側で実装した機能
実装した機能
した
‣ Audio
‣ 加速度センサー
‣ ページ遷移のトランジション
‣ リソースのキャッシュ
– キャッシュ制御のためmanifest未使用
‣ セキュリティ強化
‣ Push Notification
‣ App Storeのアプリ内課金システム
(In App Purchase)
DeNA Technology Seminar #3 9
- 11. HTML5と
HTML5とCSS3
‣ iPhone(Webkit)に絞ることでクロスブラウザを意識せ
ずに開発可能
‣ HTML5
– inputのtypeの追加とValidation
– ローカルストレージ(今回は未使用)
‣ CSS3
– CSSセレクタの追加
– 角丸、影、グラデーション、透明度などの指定
– transform(translate, scale, rotate, skewなど)の指定
– CSSアニメーション
DeNA Technology Seminar #3 11
- 12. CSSアニメーション
CSSアニメーション
‣ HTML要素をCSSで指定してアニメーションさ
せる仕様
‣ iPhoneのCSSアニメーションは高速
– (webkit-transformと組み合わせた場合)
– iPhone3G対応で活躍
• DOM操作だとガクガク
→上記を利用することで滑らかに
‣ アニメーション途中の座標を取得できないの
で当たり判定のある表現には向かない
DeNA Technology Seminar #3 12
- 13. CSSアニメーション例
CSSアニメーション例1
アニメーション
div {
opacity: 1;
-webkit-transition: opacity 1s linear;
}
div:hover {
opacity: 0;
}
DeNA Technology Seminar #3 13
- 14. CSSアニメーション例
CSSアニメーション例2
アニメーション
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); }
}
DeNA Technology Seminar #3 14
- 15. iPhone開発の
iPhone開発のTips
開発
‣ clickイベントの検知は遅いのでtouchstart,
touchendを使う
‣ position: fixedが使えない
– WindowではなくViewportにfixされるため
‣ iframe内のスクロール方法が異なる
– 2本指でフリックでスクロール
DeNA Technology Seminar #3 15
- 16. (おまけ)ページの一部を固定する
おまけ)ページの一部を固定する
‣ iPhone, iPadだとヘッダやフッタを固定するよ
うなレイアウトの表現が難しい
‣ 「iScroll」
– http://cubiq.org/iscroll
– iPhone, iPadでもフリックしたときの動きをシミュ
レートしてposition:fixedなレイアウト実現
– オプションも豊富
DeNA Technology Seminar #3 16
- 18. 海賊トレジャー移植の
海賊トレジャー移植の問題点
トレジャー移植
‣ 「海賊トレジャー」はFlashミニゲームが特徴
– 大砲バトル、サルベージ
⇒iPhoneはFlash Playerが未搭載
‣ Flashゲームをどう実現するか?
– 変更の容易性・即時性
大砲バトル
– 複数プラットフォームへの展開
DeNA Technology Seminar #3 18
サルベージ
- 19. Flash代替案
Flash代替案
‣ Objective-C(OpenGL)
⇒開発コスト、変更コスト、移植性が問題
‣ Flash CS5のiPhoneアプリ変換機能
⇒規約変更に伴い選択肢からなくなる
‣ Canvas, SVG
⇒調査した結果そこそこのパフォーマンスが出た
Canvasを採用
DeNA Technology Seminar #3 19
- 20. Canvasとは
Canvasとは
‣ CanvasとはJavascriptベースでブラウザ上に
図を描画するための仕様
– DOM操作と異なりフレーム単位で画面を再描画
‣ 大砲バトルとサルベージをCanvasで実装
DeNA Technology Seminar #3 20
- 22. 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ディスプレイの解像度が高すぎる
→上位機種で必ずしもパフォーマンスが良くなるとは限らない
DeNA Technology Seminar #3 22
- 23. Canvas高速化Tips
Canvas高速化Tips
高速化
‣ 座標や幅・高さの指定はintにする
‣ parseIntは使わない
‣ new Date()ではなくDate.now()を使う
‣ 描画がネックの場合画像の解像度を落とす
‣ HTML要素とCSSアニメーションを併用(後述)
DeNA Technology Seminar #3 23
- 25. HTML要素とCSSアニメーションを
HTML要素とCSSアニメーションを併用
要素 アニメーション
‣ 動きのない画像はHTML要素を重ねて表示
– Canvasへの描画に掛かる時間を減らす
‣ 決まった動きをするものはHTML要素+CSSアニ
メーションを利用
– CSSアニメーションで動かすほうが高速
– 高レベルな動作の指定ができる
‣ その他
– Canvas要素に動きを指定して画面を揺らす
– 塗り潰した要素を重ねて画面効果
DeNA Technology Seminar #3 25
- 26. 例:動きの少ない部分をHTML要素として表示
きの少ない部分をHTML要素として表示
部分 要素として
div要素で表現し、値によって
webkit-transform: scaleでバーを制御
ユーザが画面をタップしたときに
Img要素を重ね、webkit-transform: rotateで
向きを変えるのみ。
方向を回転させる
DeNA Technology Seminar #3 26
- 29. Canvasの
Canvasのメリット
‣ 開発環境の準備が楽
– ブラウザですぐ確認可能
‣ Javascriptなので覚えることが少ない
‣ 既存のHTML要素との併用が容易
DeNA Technology Seminar #3 29
- 30. Canvasの
Canvasのデメリット
‣ 描画速度がネックで表現に限界
– フィーチャーフォンのFlashゲーム+αぐらいなら実現
可能
‣ 世代間のパフォーマンス差が激しい
‣ その他、Android 2.1系のCanvasの基本APIにバ
グがあり、移植をする上でも問題
↓
総合的に見ると現状はスマートフォン向けゲー
ム開発の選択肢としてあまりオススメできない
DeNA Technology Seminar #3 30
- 32. Webベースにして良かった点
Webベースにして良かった点
ベースにして
‣ ユーザの反応を見て改良を即座に反映
– アプリ再申請すると審査が終わるまで1-2週間
⇒Webだと即座に更新可能、出しわけ可能
‣ ゲームのバージョンの差異がない
‣ イベントなど新機能追加の容易さ
– 例:期間限定セール、ハロウィンイベント
DeNA Technology Seminar #3 32
- 33. 現在の
現在の課題
‣ Canvasの描画速度
– 描画速度がボトルネック
– アクション性の強いゲーム表現には限界がある
‣ サーバへのリクエストを減らす
– リクエストのたびにウェイトの発生
⇒他のアプリと比べてストレスが大きい
– 世界的にはネットワークが不安定な環境も多く、
処理をクライアントに寄せる工夫が必要
DeNA Technology Seminar #3 33