食品添加物を見つけ出す! 面白いテーマが楽しい Pixi.js 実装のミニゲーム The Land of Clean

doxas : 2016-10-29 13:26:58

非常に完成度の高い 2.5D グラフィックス

今回ご紹介するのは「クリーン」というキーワードを主題にした、食品がメインテーマのミニゲームコンテンツです。

ブラウザで普通に遊ぶことができ、グラフィックス描画には Pixi.js が利用されているようですね。

Pixi.js の得意とする二次元的な描画処理をかなり器用に、かつしっかりと使いこなしたコンテンツが非常に素晴らしいできばえになっていて、その動きはちょっとした遠近感を持たせた 2.5D の実装になっています。

食品添加物を見つけるために Let's Click!

今回のサイトは体裁としては「ミニゲーム」となっていますが、ゲーム的な要素はそれほど多くありません。いわゆる画面内の特定のポイントを見つけてクリックするタイプのシンプルなゲーム内容です。

舞台は、全てのものが食べ物によって形作られた不思議な世界。

といっても、具体的なストーリーなどが用意されているわけではありません。

3つのステージに、それぞれ5つの人工的な添加物が隠れているので、それを見つけてクリックするというのがゲームの目的になります。

もうキャプチャ画像を見てもらえればわかると思うのですが、食べ物を使って表現された見事な世界観は彩りも豊かに、非常に素晴らしい質感で見る者を圧倒します。

静止画では伝わりにくいと思いますが、マウスを動かしたり、ゲームを進行させるためにアイコンをクリックしたり、それらのアクションをユーザーが行うたびにシーン内に何かしらのアクションが起こります。

画面は立体というよりは、二次元画像を立体っぽく配置した感じの構成になっていて、なんというか立体的な絵本かなにかを見ているような気分になりますね。

合計3つ用意されているステージを選択すると、違った風景のところに移動します。ここからが、ミニゲームの開始です。

画面内の怪しいところをクリックして、添加物を探していきましょう。

下の画像はちょっと見えにくいと思いますが、画面の中央あたりに、見つかって飛び出してきた添加物さんが浮いてますね。これをさらにもう一度クリックすると、詳細な説明の画面が出てきます。

全編英語なので、科学的な化合物の名称とかはさすがに日本人にはちょっとキツイですね……

ブラウザの翻訳機能などを使えば、ある程度は、なんとなく聞いたことのあるような名前が出てくることもありますね。どっちにしても、カタカナの難しそうな名前が出てくることが多いですけども。

ステージ内の5つの添加物を見つけて破壊するまでの「総クリック回数」をカウントするようになっていて、これが少なければ少ないほど、獲得できるメダルの色が金・銀・銅といったような感じで変化するみたいですね。

ちなみに、再戦した場合には仮にたくさん余分にクリックしても、悪い結果で上書きされることはないみたいです。一度本気で楽しんだあとは、じっくりと画面の隅々までクリックしてみるのもいいかもしれません。

全体的に 2.5 次元の不思議な絵本のような世界観が徹底的に統一されていて、かなり素晴らしい完成度だと個人的には感じました。

いわゆる 2D のスプライトを組み合せてシーンが構成されていますが、ユーザーのアクションに応じてインタラクティブにスプライトが動くことで、立体的にも感じられるリッチな表現になっています。

Pixi.js はこういったコンテンツを作るのには本当に適していますね。

その特性を理解した上でしっかりと活用しているサイトとして、本当に感心させられました。

ぜひみなさんもチェックしてみてください。

リンク:

The Land of Clean

share

follow us in feedly

search

search

monthly

sponsor

social