Google

2014年2月1日土曜日

HTML5で3Dゲーム:まとめ

まとめと補足です。

ぐりぐりCSS3Dを諦めたため、最終的にセガの3Dゲームがやっていたような1点透視法を使い、物体の接近を画像拡大で表現するという形になりました。
また、床の表現は単調なもので良かった関係から、スプライトによるパラパラアニメーションで表現することで実現したというわけです。
背景は別途画像を準備し重ねあわせで制御を行ったのですが、レイヤ構造はこのようになりました。


Canvasは透明にすれば後ろが透けるのでこのような配置も可能ですし、重ねあわせはGPU直結仕様のお陰で問題はありませんでした。
ちなみに実装ツールはjsdo.itとXDKを途中まで使用し、最終的にはサーバにて書きで調整といった感じです。
jsdo.itは画像ファイル名を買ってに変更してしまう仕様のせいで最後までは使用できませんでした。

また、今回にかぎらずJavaScriptは何度も使っていましたが、速度や可読性チーム作業が入ると大変な言語なのは理解していたため、普段以上に書籍のお世話にもなりました。
記事では処理内容その他には触れませんでしたが、私が読み漁って役立ったと思われる本の一覧だけ列挙しておきます。


上記リストはアフェじゃなくて公式へのリンクですのでご安心を。
次点でまあまあ良かったのはこれらでした。


ちなみに最後に一番困ったのはiOS7による仕様の相違です。
iOS6まではホーム画面に登録した場合、昔のiPhoneアプリのようにiPadで2x等のオプションが表示されたのですが、iOS7では削除された挙句位置ずれを起こすという仕様になってしまったのが面倒でした。

反省点はCSS3Dの限界に挑戦できなかった点、PIXI.jsで作ればさらに軽くなったかも知れなかった点、等々です。
速度は古い機種でも40~50近くでたので自己満足で良しとしました。
機会があれば速度が早い機種で完全CSS3D版を作ってみたいと思います。