More Related Content
What's hot (14)
Viewers also liked (20)
Similar to HTML5@iPhoneゲーム開発 (20)
Recently uploaded (6)
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
- 4. Pirate Nationについて DeNA Technology Seminar #3 4
- 5. Pirate Nation ‣ モバゲー「海賊トレジャー」のiPhone移植版 – スマートフォンに合わせてデザイン一新 – 海外ユーザ向けにシステム見直し ‣ 8/30からApp Storeで提供開始 ‣ US App StoreのTop Freeで最高3位 DeNA Technology Seminar #3 5
- 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
- 10. iPhone Web開発 DeNA Technology Seminar #3 10
- 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アニメーション例２ アニメーション 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
- 17. Canvasを使う DeNA Technology Seminar #3 17
- 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
- 21. Demo DeNA Technology Seminar #3 21
- 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
- 24. CanvasとHTML+CSSアニメーション CanvasとHTML+CSSアニメーション ‣ Canvas – フレームごとの当たり判定や描画タイミングの制御可能 – 高レベルなアニメーション指定、画面の一部のみを再描 画する機能はない ‣ HTML+CSSアニメーション – 高レベルな指定方法を提供、高速 – フレームごとの制御や描画タイミングの指定ができない ‣ 両者の得意な部分を担当する DeNA Technology Seminar #3 24
- 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
- 27. 例：CSSアニメーションを利用 CSSアニメーションを アニメーション CSSアニメーションのキーフレームを 使って動きを定義。 パフォーマンスが良くなる他、 細かい動きの表現や変更にも強くなる DeNA Technology Seminar #3 27
- 28. Canvasのメリット/デメリット DeNA Technology Seminar #3 28
- 29. Canvasの Canvasのメリット ‣ 開発環境の準備が楽 – ブラウザですぐ確認可能 ‣ Javascriptなので覚えることが少ない ‣ 既存のHTML要素との併用が容易 DeNA Technology Seminar #3 29
- 30. Canvasの Canvasのデメリット ‣ 描画速度がネックで表現に限界 – フィーチャーフォンのFlashゲーム+αぐらいなら実現 可能 ‣ 世代間のパフォーマンス差が激しい ‣ その他、Android 2.1系のCanvasの基本APIにバ グがあり、移植をする上でも問題 ↓ 総合的に見ると現状はスマートフォン向けゲー ム開発の選択肢としてあまりオススメできない DeNA Technology Seminar #3 30
- 31. Pirate Nationリリースを通して DeNA Technology Seminar #3 31
- 32. Webベースにして良かった点 Webベースにして良かった点 ベースにして ‣ ユーザの反応を見て改良を即座に反映 – アプリ再申請すると審査が終わるまで1-2週間 ⇒Webだと即座に更新可能、出しわけ可能 ‣ ゲームのバージョンの差異がない ‣ イベントなど新機能追加の容易さ – 例：期間限定セール、ハロウィンイベント DeNA Technology Seminar #3 32
- 33. 現在の 現在の課題 ‣ Canvasの描画速度 – 描画速度がボトルネック – アクション性の強いゲーム表現には限界がある ‣ サーバへのリクエストを減らす – リクエストのたびにウェイトの発生 ⇒他のアプリと比べてストレスが大きい – 世界的にはネットワークが不安定な環境も多く、 処理をクライアントに寄せる工夫が必要 DeNA Technology Seminar #3 33
- 34. ご清聴ありがとうございました DeNA Technology Seminar #3 34