javascriptでゲーム制作＠実務現場レポ

JavaScript でゲーム制作＠実務現場レポ

2011年5月16日月曜日

名前: @sou

仕事:

web アプリエンジニア

web ゲームエンジニア

属性:

web 好き

猫好き

誰？


JavaScript でゲーム制作＠実務現場レポ


＠ “実務” 現場レポ


農園ホッコリーナ for iOS



05/11 リリース

ブラウザベース

人気ランキング（女性） No.1


DeNA @スマフォ


DeNA@スマフォ海外

2010/05 Bandit Nation

2010/08 Pirate Nation

国内

2010/12 怪盗ロワイヤル SP

2011/04 海賊トレジャー SP

2011/05 農園ホッコリーナ2011年5月16日月曜日

DeNA@スマフォ海外

2010/05 Bandit Nation

2010/08 Pirate Nation

国内

2010/12 怪盗ロワイヤル SP

2011/04 海賊トレジャー SP

2011/05 農園ホッコリーナ

← CSS3 + JS

← Canvas

← CSS3 + JS

← Canvas

← Canvas2011年5月16日月曜日

HTML5 ゲームに歴長し


近況アクション

砲撃、クレーン等のミニゲーム

シミュレーション

細かいアニメーション


インストールベースも


忍者ロワイヤル


忍者ロワイヤル

05/12 リリース

インストールベース

ngCore 製

JavaScript

クロスプラットフォーム


閑話休題



iPhone ( != PC)

パフォーマンス

3G 回線



作ってみて

実際にどうよ？

課題どうよ？


仕組み

アニメーション描画

Canvas

Sprite Image


仕組み

Canvas

320 x 386px

8 fps


仕組み

オブジェクト数 30-40 程度

サイズまちまち

15KB

41KB

トータル 300-400KB


仕組み

通信

XHR or Script 要素 (XD)

アニメーションデータ

200-300KB 程度


ざっくりどうよ？

遊んで貰えるものが作れる


ざっくりどうよ？

通信描画

4

3GS

3G

△ △ (Retina)

△ ◎

△ △ (性能)


描画

3G のハードウェア性能

チューニングで改善可能

Retina 対応

難（詳細後述）


通信wi-fi でさくさく

3G 回線でもそこそこ遊べる

電車内（3G + 移動）が辛い

山手線が..

XD 通信ハンドリング

XHR2 待ち


通信

サイズを減らす

やるだけやった

読み込まない工夫が必要

キャッシュ技術を使う

未使用、可能性有り


キャッシュ技術

Application Cache

localStorage (2.5MB)

sessionStorage (2.5MB)

Web SQL Database (5 - 50MB)


Retina 対応

解像度 4 倍

データ量 2 倍強

iPhone 4 描画性能に限界


Retina 対応高解像度対応はいずれ通る道

ビットマップデータをオンデマンドで ←辛い

キャッシュ、データ保持の強化

Storage の容量増やして..

要求に則したデータフォーマット

そう、例えば SWF みたいな! ....


まとめ


iPhone + HTML5 でも多様なゲームを表現可能

海賊トレジャー（アクション）

農園ホッコリーナ（Canvas アニメ）

改善課題も多々

3G 回線の使用感改善

Retina 対応

新しいテーマも多々

WebGL, XHR2 etc, etc,.


HTML5 でゲーム開発、楽しいよ！


情報シェア、したいです＞＜


エンジニアも絶賛募集中


ありがとうございました。


javascriptでゲーム制作＠実務現場レポ

Technology