introduction

「CLUTによるOpenGL入門」(著者:床井浩平)の冒頭に

この迷宮(「リアルタイムCG」や「インタラクティブCG」)の中には、実にさまざまな宝、リアルタイムCGのテクニックが隠されているはずです。 迷宮をさ迷いながらそれを拾い集めて、自分自身の世界を作り上げてください。

とある。でもこの迷宮の世界は、一昔前までは、ハードやソフトが高価であったためほんの一握りの人々の世界でしかなかった。だが、技術の発展により高度なハードが標準で端末に装備されるようになってきた。そして、 WebGLの登場により高価なソフトがなくても無償で、だれでもが迷宮をさ迷える時代となった。
  このサイトは、やっと迷宮の入り口に入ることが出来たであろう私が、その成果として作成したゲームを公開している個人サイトです。ゲームで遊んだ経験のない私が、ゲームを作成していますので、操作性や見た目のおかしさが多々あると思いますが、 楽しんで頂ければ幸いです。

warning

WebGLをサポートしているブラウザーは限られています。Window版Chromeはデフォルトでサポートしています。Frefoxでは、URLにabout:configと入力し、webgl.force-enabledをダブルクリックしてtrueに 設定する必要があります(最新のFerfoxはデフォルトでサポートしているようです)。IEはWebGLをサポートしていません。

 

このゲームの開発間環境を以下に示しますでの、できれば同等の環境でご利用されることを推奨いたします。

PCモデル Lenovo Window7 PC
プロセッサー Inte(R) Core(TM) i5-2320 cpu
メモリー 4.00GB
ブラウザー Frefox 14.01

games

遊び方

緑の宇宙船と赤の宇宙船によるドッジボールです。緑の宇宙船からボールを発射できます。

左マウスドラッグ : 緑の宇宙船がワールド空間の原点を中心に回転します。
左マウスクリック : 緑の宇宙船からボールが発射されます。なを、ボールが飛ぶ方向は緑の宇宙船とワールド空間の原点(+表示)を結んだ方向です。 ボールを発射しながら方向を定めてください。
備考 初めて作ったゲームです。WebGLの環境を作成してからだったので、一週間ぐらいでできました。ただ、WebGLの理解が浅かったため、環境には冗長が多かったので 作り直した経緯があます。
遊び方

戦闘ヘリコプターの空中戦です。敵は戦闘ヘリコプターと地上の装甲車です。

左マウスドラッグ : 戦闘ヘリコプターのローカル空間の原点を中心に回転します。
左マウスクリック : 機関銃が連射されます。銃弾の方向は戦闘ヘリコプターが傾いた方向です。
←→↑↓キー : 押下されたキー方向に戦闘ヘリコプターが移動します。
備考 パーティクルによる爆発により、ドッジボールに比べてゲームらしくなったと感じます。ただ、戦闘ヘリコプターの回転が思った方向に向かないという操作性に問題があります。
遊び方

F-16による空中戦です。敵は戦闘機とどこから発射されたか分からないミサイルです。

左マウスドラッグ : マウス方向に2D移動します。z方向には移動しません。
ホィールドラッグ : F-16のローカル空間の原点を中心に回転します。
右マウスドラッグ : ワールド空間の原点を中心に回転します。
spaceキー : 機関銃が連射されます。
lキー : leftミサイルが発射されます。ただし、激突判定をしていないで、戦闘に関しては無関係です。
rキー : rigthミサイルが発射されます。ただし、激突判定をしていないで、戦闘に関しては無関係です。
備考 ゲームで遊んだ経験が無いため、ゲームそのものはインベーダーゲームの3D版になってしまった。ゲームの構想では、最終的には強敵を登場させるつもりだったが、モデリングの力不足により、強敵を作ることすら出来なかった。
遊び方

女性と牛が戦うストリートファイターもどきのゲームです。操作対象は当然女性です。

左マウスドラッグ : ワールド空間の原点を中心に回転します。
右マウスドラッグ : ワールド空間のX,Zの2次元空間を移動できます。(牛がスクリーンから外れたら使用してください。)
センターホィール : ワールド空間を拡大/縮小できます。
0 キー : 女性が頭を下げます。(牛のパンチを避ける防御機能です。)
1 キー : 後ろ回し蹴りです。
2 キー : 回し蹴りから後ろ蹴りの連続技です。
3 キー : 前蹴りです。
←→↑↓キー : 押下されたキー方向に移動します。ただし、左マウスドラッグでワールド空間を回転すると方向が分からなくなるのでご注意下さい。
備考 今回のモデリングはBlenderを使用し、jsonへの変換はThree.jsのプラグインを使用しました。モデリングしたフィギュアのクオリティを上げるのであれば、パーテックを個別に操作するべきだが、パーテック操作はCPU資源を 多量に使用するので、オバーヘッドが発生する。パーテック個別操作のゲームは高性能ビデオカードにて将来開発することにし、今回はオブジェクト単位のパーテックスをGPUで移動させるマトリック方式とした。
オブジェクト単位の操作に関しては、「ActionScript3.0 アニメーション(ボーンデジタル)Chaptter13フォワードキネマティクス:物体を歩かせる」を参考にした。ただ、私が知るモデリングソフトでは、 ブウンディングボリューム の中心点やセグメントの親と子のpin位置をしることができなかった。だが、Blenderでは私が知りたい情報を取得できる機能があり(Armature)重宝した。
残念ながら、このゲームはキーボードを押しつづければ、勝利できます。今後の課題としては、敵に人口知能を搭載することです。なお、このゲームにはサウンドはありません。(音響作成ソフトがほしいです)
遊び方

http://anomarokarintou.blog37.fc2.com/さんの初音ミクを参考に、Blendeでモデリングしたフィギュアのアニメーションです。ゲームではありません。
ある程度のHiegthポリゴンでもWebGLでアニメションできることを証明する為に作成して見ました。

左マウスドラッグ : ワールド空間の原点を中心に回転します。
右マウスドラッグ : ワールド空間のX,Zの2次元空間を移動できます。
センターホィール : ワールド空間を拡大/縮小できます。
備考 モデリングはまだ初心者なので、不備が多数存在します。(現在特訓中)今回のアニメーションでは、一部(スカートの部分)パーテックスの座標計算をしていますので、CPU資源を多く使用   しています。
現在、顔の表情アニメーションを実現するため、試行錯誤中です。

mail

このサイトのゲームは、還暦前の初老プログラマーが個人で作成していますので、不都合、誤りが多数存在しています。したがいまして、このサイトの不都合、誤りをお気づきになりましたら ご連絡を頂ければ幸いです。

最後に、プログラム作りの楽しさを再び味わうことができる環境を提供していただいた、プラットホーム(IE以外のブラウザ)開発の勇士に感謝いたします。

mail