Google

2014年1月11日土曜日

HTML5で3Dゲーム:技術検証開始

今回は技術検証の開始話です。

さて開発が始まったのはいいものの、厳密なゲームルールも含め手探りしながら技術検証をしなければなりませんでした。
ちなみに要求されたゲームルールはテンプ○ランやエスケープ○アといった感じです。
なので上下の視点移動や弾丸、ボス戦等は不要ですが、接近する物体や床、そして当たり判定をどう再現するかが焦点となります。

あ、前回は書き忘れていましたが、3~4世代前の機種でも動かすという、別の面で厳しい話もあったのですが、最終的に飲むことにしました。
飲んだ理由としては、その某OSのCSSはWebGL非対応ですが、ハードのグラボ直結実装で速度がそこそこ早いため、ゲームが不可能とまでは言い切れなかったという点があります。

ちなみにWebGL等の対応状況に関しては以下の記事等がまとまっていて解りやすいかと。

 http://htmlgclue.blogspot.jp/2013/07/webgl20137.html


そんな状況において心の中で毎日自問自答していたのはこんな事です。

 「完全な3Dが果たしてできるのか、それともスペ○リをやるか、、、」

この2つのどっちが天国で、どっちが地獄なのやら皆目検討が付きません。
(実際にはどちらも地獄だと思いますがw)

まず、前者の道はただ一つ、CSS3Dしか頭にありませんでした。
自力でウィズのような描画を書き上げるにはとても時間がありません。
そこで簡易ラップされてて使いやすいFWを探した結果、候補を見つけました、というか現実的に1つしかありませんでした。
CSS3Dでググっていれば出てくるのでおなじみですよね。
さらに以下の記事も素晴らしく、デモの実機動作速度は特筆ものです。

 WebGL無しiOSでも簡単軽快3D。three.jsとCSS3DRendererでDOMを3D化

D&Dでスマホ上でもぐりぐり行けます。
このデモが古めの実機でぐりぐり動くのを見た時点で、完全3Dの道を選ぶならThree.jsで作るのみという結論に達しました。

そして後者の道、自前○ペハリの場合は擬似3Dになるため、これまた使いやすい2DFWを選定しなければなりません。
こちらの候補も開発者ならお馴染みの以下です。

選定の理由は、各種デモを触って、クラスリファレンスを見て、ゲームを作る際にコストが削減できそうと思ったものを独断と偏見で選んだだけなんですけどね。
上2つはまあ言わずもがなです。
pixi.jsは実機での動作速度が非常に魅力で、FW設計のシンプルさがゲーム製作時の障害になりにくそうだった点が惹かれました。

PIXI.jsのサンプルはスマホでも軽快動作してくれます。
上記の3つからどれかを使って擬似3D化するという事になります。

さて、候補選定が済んだら次はゲーム内容の制限決定です。
Untiy側が劣化に引きずられるのは仕方ないですが、そもそもHTML5版が実現できなければプロジェクト失敗です。

そのため、壁に当たったらヤバそうなゲームルールは一旦諦め、バージョンアップ時に再度挑戦という方向で進めることになりました。
例えば以下の様なものです。
  • 交差点で左右に曲がる(テンプ○ラン)
  • カーブしたり地平線が歪曲したりする
  • 開始時等の演出で、カメラ視点を大きく変更する(エスケ○プベア等)
Unityのみならどうにでもなったんですけどね、、、(遠い目)
交差点は可能性もあったのですが、時間もないのでお客様と相談し過剰な表現は勘弁させて頂きました。
こうして決定したゲーム条件はこんな感じです。
  • 視点はほぼ固定
  • 固定された通路をひたすら進む
  • ジャンプしたり取ったり避けたりする
かなりしょぼくなってしまいますが、実現のためには仕方ありません。
揃ったところで次はプロトタイプ作成で速度実験検証です。


が、続きは次回で。

0 件のコメント:

コメントを投稿