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アプリ開発 DeNA Technology Seminar #3 2

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

Pirate Nationについて DeNA Technology Seminar #3 4

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

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

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

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

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

iPhone Web開発 DeNA Technology Seminar #3 10

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

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

CSSアニメーション例 CSSアニメーション例1 アニメーションdiv { opacity: 1; -webkit-transition: opacity 1s linear;}div:hover { opacity: 0;} DeNA Technology Seminar #3 13

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

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

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

Canvasを使う DeNA Technology Seminar #3 17

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

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

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

DemoDeNA Technology Seminar #3 21

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

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

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

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

例：動きの少ない部分をHTML要素として表示きの少ない部分をHTML要素として表示部分要素として div要素で表現し、値によって webkit-transform: scaleでバーを制御ユーザが画面をタップしたときに Img要素を重ね、webkit-transform: rotateで向きを変えるのみ。方向を回転させる DeNA Technology Seminar #3 26

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

Canvasのメリット/デメリット DeNA Technology Seminar #3 28

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

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

Pirate Nationリリースを通して DeNA Technology Seminar #3 31

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

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

ご清聴ありがとうございました DeNA Technology Seminar #3 34

http://20kaido.com	6152
http://www.gamebusiness.jp	5623
http://ke-tai.org	5429
http://gamebusiness.jp	488
http://engineer.dena.jp	366
http://tcyhhd.blogspot.com	175
http://111.68.211.119	168
http://s.deeeki.com	97
http://tcyhhd.posterous.com	94
http://www.forcepenguin.com	34
http://webcache.googleusercontent.com	33
http://apple-stream.com	23
http://tcyhhd.blogspot.jp	15
http://paper.li	10
http://takeshaaan.posterous.com	5
http://www.techgig.com	4
http://translate.googleusercontent.com	4
http://livestrongs.posterous.com	4
https://p.yammer.com	2
http://reread.tumblr.com	2
http://static.slidesharecdn.com	2
http://b.hatena.ne.jp	2
http://www.google.co.jp	1
https://cybozulive.com	1
http://s-fkd.blogspot.com	1
file://	1
http://www.google.com	1
http://192.168.1.4	1
http://cache.yahoofs.jp	1

HTML5@iPhoneゲーム開発

by h_kishi on Dec 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

29 Embeds 18,739

Statistics

HTML5@iPhoneゲーム開発 — Presentation Transcript