HTML5@iPhoneゲーム開発

56,268 views

Published on

Published in: Technology
0 Comments
58 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
56,268
On SlideShare
0
From Embeds
0
Number of Embeds
32,298
Actions
Shares
0
Downloads
498
Comments
0
Likes
58
Embeds 0
No embeds

No notes for slide

HTML5@iPhoneゲーム開発

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

×