three.js で作られたプロシージャル生成迷路ゲーム! プロトタイプながら可能性を感じる一品
製作途中の苦悩が見え隠れする味わい深さ
今回ご紹介するのは、とある WebGL 製の迷路ゲームのプロトタイプです。
そう、今回はまだプロトタイプの状態のものをあえてご紹介します。というのは、この作者の方がコンテンツの製作過程をブログで公開してくださっているのですが、その記事も合わせて見てみるとなかなか味わい深いものがあったからです。
3D 迷路を設計する上で、作者はどんなところで苦しんだのでしょうか。その辺りも踏まえて、ご紹介しようと思います。
トーラス上に迷路をマッピング
プログラマであれば、比較的よく目にするテーマのひとつに自動迷路生成がありますね。
多くの場合これは 2D で実現されている事が多いですが、今回のコンテンツはもちろんそのあたりは 3D で実装されています。この作者の方はもともと迷路のプロシージャルな生成についていろいろと実装経験などもあるようですが、3D 迷路を作るためには結構困難も多かったようです。
上の画像を見ると、なんかロードの途中っぽい気配が漂っていますが、これでロードは完了しています。
迷路の壁がたまたま目の前に来ると、こんな感じの絵になっちゃうんですね。
迷路は毎回プロシージャルに、ランダムに生成されます。ですから目の前が多少開けていることもあれば、上の画像のように壁で塞がれている場合もあります。
空には緑色の銀河のような絵が出ており、全体的にグリーン系の色で統一されたシーンとしてレンダリングされています。
迷路の中にはランダムでキューブ状のアイテムが置かれており、これを集めるのがひとまずの目的となっていますが、今回のものはまだプロトタイプなので、キューブに接触しても演出などは一切ありません。
ただ衝突判定は生きているようで、接触するとキューブが消えてしまうようです。
操作はいわゆる FPS ゲームなどのように WASD キーを使うタイプで、I キーと K キーを使うことで視点を上下に振ることも可能です。
たまたま全景が見える場所までうまく移動できれば、巨大なトーラスの上に迷路がマッピングされている様子を確認することができると思います。
冒頭にも書いたとおり、今回のコンテンツはまだまだ製作途中のもの。作者の方が同時に公開しているブログ記事を見ると、様々な苦悩や困難が見え隠れして興味深いですね。
視野角を広げ過ぎるとシーンが歪んでしまうし狭めすぎると視野が狭すぎて操作しにくい、といった、実際に 3D でやってみると誰もがぶち当たる壁に見事に衝突している様子が一種赤裸々に書かれています。
こういった話って、実は意外と聞けそうで聞けないというか、やったことある人間からすると思わず「あるある」と言いたくなるようなことが結構ありますね。
三次元空間上での衝突判定や、いかにして迷路の構造を三次元空間上にマッピングするのかなど、困難に直面しつつもそれを解決していく様子がブログには書かれています。
コンテンツともども、非常に興味深い内容となっています。ぜひチェックしてみてください。