シンプル操作が熱中を誘う！荷物を届けまくる WebGL 製ミニゲーム UPS Delivery Day Game

doxas : 2017-12-15 14:20:19

チュートリアルもあるので簡単！

今回ご紹介するのは、WebGL で作られたミニゲーム作品。

Pixi.js なども併用しながら、3D 表現と二次元表現をいずれも高速・軽量に描画しています。ゲームの内容もシンプルかつわかりやすく、チュートリアルが用意されているなど設計も親切です。

日本でも Amazon などの台頭により物流がニュースの話題として挙がることがありますよね。なんだかそういう気持ちをほんの少しだけ味わえる、楽しいゲームとなっています。

今回の作品はミニゲームなので、まずは普通に楽しくプレイしてみるのがいいと思います。

ルールは非常にシンプルで、配送先を模した建物のオブジェクトと、同じ色の荷物をセットになるように配置していくだけです。

建物も荷物も、いずれも常に 4 列に固定されているので、純粋に左右に荷物を動かすだけで操作はとてもわかりやすいですね。

初回起動時には手の形をしたアイコンが画面上に現れて、荷物を動かす様子をジェスチャーしてくれるので初めてでも戸惑うなく操作できます。

ロード完了直後は空から家が降ってきます（笑）

荷物のひとつひとつには、届けるまでの「制限時間」が設定されています。

これは荷物のオブジェクトの下にゲージのようなものが表示されることで確認できます。ゲージが空になる前に、同じ屋根の色を持つ建物に荷物を届けましょう。

屋根の色が同じだったらどの荷物を届けてもいいってのは現実ではあり得ませんが、そこを突っ込んだら負けですね（笑）

また、画面の右上にハートの形をしたアイコンがありますが、これは荷物を届けることができなかったときにひとつずつ消えていきます。すべてのハートが無くなってしまうとゲームオーバーになります。

ゲームを進めていくと、だんだん荷物の色のバリエーションが増えてきます。一見同じように見えても、赤とピンクで別の扱いになっていたりして、徐々に難易度が上がっていきます。

また、届け先の建物のほうにも特殊な条件が設定されるようになったり、あるいは留守中で届けることができない建物が出てきたり……

一筋縄ではいかない結構奥深いルールになっています。

またキャプチャがちょっと難しかったのですが、結構細かいところにまでエフェクトなどが施されていて、荷物をドラッグして動かしている最中の動きなども、実装者目線で見てみるとなかなか興味深いです。

WebGL 製のゲームは、WebGL の誕生直後からいろいろなものがこれまでにも登場していて、最近では、ゲームエンジンからビルドしたと思われる作品が多くなってきています。

今回の作品のような、スクリプティングでゲームを実装する形態は、もしかすると数年のうちに徐々に数を減らしていき、最終的にはなくなってしまうのかもしれないなあとか思ってしまうのですが、今回紹介したような規模のゲームであれば、がんばれば結構作れそうな気もします。

ただ、フロントエンドの普通の実装とは異なり、やはり簡易であってもゲームはゲーム、そこで使われているテクニックの多くは技術的に参考にできるものが多いと思います。

家が生成される際のエフェクトや、ゲージが消耗していくと表示される星の瞬きエフェクトなど、細かいところに注目して観察してみるのもいいのではないでしょうか。