three.js 実装の練習にちょうどいい？シンプルな three.js 製落ち物パズル Graxie Gems

doxas : 2015-12-16 13:49:06

小規模シンプル開発の見本のような一品

今回ご紹介するのは、three.js を利用したシンプルな WebGL ゲーム作品です。

こんなことを言うと作者の方には怒られちゃうかもしれませんが、個人的には three.js を用いた実装の練習をするのに、このくらいの規模のゲームを作ってみるというのは非常によいのではないかなと感じました。

シンプルなちょっとしたミニゲームといった感じですが、2D 的な要素と 3D 的な要素がほどよく混ざり合った、ちょうどよい感じの実装難易度の作品のような感じがします。

今回のゲームは見た目は 3D ですが、ロジックそのものは二次元ベースで考えることができる普通の落ち物パズルゲームです。

同じ色のジェムを 3 個以上連結させると、ジェムがパーティクルになって花火のように砕け散っていきます。

砕けていく際のパーティクルは加算合成による色の合成がされており、一度にたくさんのジェムが破壊されると流石に爽快です。

3D を描画できる WebGL の場合、なにかと 3D でカッコイイことをやらないといけないみたいな、余計な先入観を持ってしまいがちです。

三次元空間でのオブジェクトの移動などは、慣れないうちは非常に戸惑いも多いもの。まずは、こういったシンプルな二次元でロジックを考えられる題材を用いて、3D 表現に慣れるというのがとてもいいかもしれないなと思いました。

ちなみに、ジェムが破壊された隙間の部分には、上からどんどんジェムが降ってきます。連鎖などのコンボシステムは入っていないようですが、これも比較的簡単に実装できそうですし、今回のゲームは本当にいろんな意味で、3D ゲームに挑戦する上での下地としていい題材だなと感じます。

とは言え、シーン自体は 3D なわけですから、完全に 3D に関する知識が不要かと言えばそんなことはありません。

たとえば、ジェムをマウスでドラッグすることで、上下左右にジェムを移動させることができるシステムになっていますが、これを実現するためには三次元空間とスクリーン空間を双方向に座標変換するような、ちょっと小難しい数学的知識が必要です。

ただ、three.js にはこれをしっかりサポートしてくれる機能があるため、こういった難しい部分はまずはライブラリに任せてしまうというのもひとつの手ですね。

以下の画像が、ちょうどジェムをドラッグして移動させようとしているところです。わかりにくいですが、円で囲んでいる部分ですね。

上の画像を見るとわかるように、ジェムが入れ替わるときには、奥行きを考慮したジェムの移動が発生しています。二次元ベースで考えることができるロジックを使いつつも、ほどよく三次元な処理を加える事で、より表現力が増しているというわけですね。

今回のゲーム自体は本当にシンプルで、どうやら長時間プレイしているといくつかバグらしいものも潜んでいるような気配がしてきます。

しかし、こういったシンプルな実装をベースにして、まずはとりあえず実装してみるというのが、大事なのかなと思います。