Google

2014年1月24日金曜日

HTML5で3Dゲーム:壁床3D

前回は当たり判定の記事でした。

今回は壁床ですが、ここまで書いてて大事な点について記載することを忘れていました。
計算がすべての擬似3Dゲームにおいては、主人公や物体の大きさや1点透視法でのカメラ角度やその他見え方等の表現等に関して、予め大きさや距離等を決めておかないと実現ができません。
当たり判定にも絡むこれらの話についてどう決定しどう対処したか?という話を書いておきます。

お忘れの方もいらっしゃるかと思いますが、元々このゲームはUnity版と同時に開発し、Unity版と全く同じゲーム性を求められていました。
この検証のゴタゴタの裏でUnity版が同時進行していたのですが、同時進行しているが故に可能だった重要なポイントがあります。

1つめとしてUnity版及びHTML5版のどちらも「大きさや距離等を統一」することにした点。
(同じゲーム性ですし当然っていえば当然なんですが)
横に2列あるマスの1個1個の大きさについては1mx1mという基準を設け、アイテムまたは障害物もこれに習い最大で1m立方体ということになりました。
主人公の当たり判定も当然その中に収まる範囲で、ということになります。
焦点は例の透視法計算の関係からゼロでしたが、1マス進行は1m、物体も1m、とにかく基準はすべて1mという物差しを決めたのです。

これはUnityのプリミティブ機能で作成できる「Cube」がこの1m立方体という点も大きく関係していました。
さっと作れて、かつ取り込んだ3Dモデルのサイズが拡大縮小等で変動しても簡単に比較できますし。

このCubeが立方体。
グリッドもそうですが、角度によって見えない時もあるし、、
さらに大事なのは次の点。
Unity版/HTML5版は視点もカメラも一緒、距離も大きさも一緒なので、Unity上で表示した画像はそのままHTML5に持ってきても同じに見えるはず。
これを最大限に活用するためにこんな裏技?を使う事になりました。
  1. Unity上で指定位置にアイテム等のモデリングを表示
  2. その状態の画像をキャプチャ
  3. CSSスプライト化し、HTML5でリソースとして再利用
まあ、なんといいますか、、、、自分で言うのもなんですが酷いですよね。
もはや透視法の計算ですらありません。
とはいうものの、接近してポリゴンの見え方がおかしくなる問題もこれでほぼ解決になるため利用価値は大いにありました。
デメリットとしては、戻りが発生した場合にUnity上の作業がやり直しになる点ぐらいでしょうか。
前々回の記事にあった透視法の実装は、最終的にUnityの力を借りて実現したというのがこの話のネタの一つになります。


さて、これを念頭において頂いて、改めて壁と床の話を。
以前の記事で書いたように、Three.jsなしでどう表現するかについて何度か試行錯誤をしていました。
往年のセガ名作ゲームのように遠い位置からタイルをガンガン並べる方法も考えましたが、枚数が多くなれば当然処理が重くなりますし、このタイプのゲームには今ひとつあっていません。
なにせ、斜めのパネルも位置による角度の計算があるため、その部分の処理も面倒です。

そしてここでもまたひどい決断をすることになってしまいました。
結論から言うとUnityや3Dツールで道路をキャプチャし、CSSスプライトとして使用するという方法を採用したのです。
要は3Dツール上のカメラやサイズなどを一致させ、アルファレンダリングをしてそれを動画キャプチャし、フレームレートに応じた分割を行うという、、、、笑ってやってください。

方法自体も酷いですが、これをやった場合負荷以外に心配になるのはファイルサイズでしょう。
某OSの640x960が基準の世界で、画面の半分以上は締めると思われる壁床の領域全てにアニメーションをしたら、まずサーバ負荷的が重くなり、ロードからゲーム開始までの時間が遅くなってしまいます。
しかしここは以下のような対処でなんとかなりました。
  • ホーム画面登録から起動する方式を適用することで、画面全体を320x480にする
  • 単純な画像の床にする
    • (某セガ体感ゲーム系のようなシンプルタイプ)
  • 色数を64色で構成しgifとして扱う
  • 移動速度(ゲーム難易度)と相談し、1サイクルに必要な枚数を調整する
上記の結果、床のスクロール専用画像を150KB未満まで落とすことができました。
1サイクルの枚数は秘密ですが、見栄え的にはなかなかでした。

担当CGデザイナーには無茶な注文と言われましたが、何と言われようとOKなものはOKです。
色数を落とした事でPhotoShopでのちまちま補正作業になってしまう点、バランス調整で速度の変更がどうしても必要になった場合に全てやり直しという点はデメリットですが、効果は絶大でした。

実際に使われているソースを出したい処ですが、ちょっと色々問題があるので今回はすみません。
参考となるよう、この記事のために簡単なデモを書いてみましたのでそちらでご勘弁を。
本番と違ってて申し訳ございませんが、やった内容はご理解頂けるかと思います。

パースも何も考えず縦に3つ重ねてみました。
本番とはかなり違いますが原理だけ一緒です。
ちなみに本番では縦横の分割はしませんでした。
今回のデモはこちらからどうぞ。
ブラウザサイズの大きさによって表示が拡大縮小するため、大きいサイズだと相当汚く見えます。

次回は速度も絡んだファイルサイズ等の話をします。

0 件のコメント:

コメントを投稿