Pixi.js を利用した滑らか動作のブラウザゲーム！ 可愛らしい見た目だけどその結末は！？
約 5 分間ほどの時間で気軽にプレイできる
今回ご紹介するのは、Pixi.js を利用したブラウザで動作するミニゲーム作品です。
Pixi.js は canvas2d や WebGL の描画モードに対応したブラウザ用のグラフィックスライブラリで、WebGL が非常に簡単に利用できるためパフォーマンスを重視した表現によく利用されています。
今回のコンテンツはミニゲーム作品となっていて、ゲームの演出を含むグラフィックス処理のほぼ全てが、Pixi.js の WebGL モードによって描かれています。
非常に滑らかな動作はさすがという感じです。
小さなゲームだけどストーリー性重視
今回のコンテンツはゲーム作品なのですが、結構ストーリーを重視した作りになっています。
ですからこの場でその内容を全て解説してしまうと、ネタバレになってしまってちょっとおもしろくありません。今回は、そのゲームの操作方法や特徴などを簡単にご紹介しようと思います。
ページに訪れると、画面の中心に矩形のゲーム用エリアが置かれていて、iframe のなかでゲームが実行されるようになっていますね。ブラウザゲームを投稿することができるウェブサイトのなかの、投稿作品のひとつという位置づけです。
ゲームは基本的にマウスのみでプレイすることができます。
オープニング画面の PLAY ボタンをクリックすると、おもむろにゲームがスタートします。2D ベースのゲームなので利用しているリソースもそれほど多くなく、ローディングで長く待たされるといったこともありません。
上の画像を見るとわかるように、このゲームでは四角形の枠のようなものが画面内に現れ、それをマウスで操作しながらプレイしていきます。
この矩形はいわゆるカメラのファインダーのようなもので、この矩形に囲まれた部分が、クリック操作によって写真撮影されたように切り取られます。
意味のあるものを次々に撮影していくことによって、自動的にゲームの内容が変化しながら進行していく感じですね。
被写体は基本的にわかりやすいものが多く、難易度はけして高くありません。
プレイ時間は、作者からのメッセージにもあるように 5 分程度となっており、それほど難しい内容でもないのでサクッとプレイすることができます。
キャラクターは手書き風の可愛らしいデザインで、最初のうちは、どこか平原のようなフィールド上に、丸や四角にデザインされた人間たちが自由に歩き回っています。
周囲とどこか違ったような、気になるものがあったらどんどん撮影していってみましょう。ストーリーの進行に関係のある被写体を撮影できたときは、下の画像のように赤いラベルとメッセージが表示されるようになっています。
物語が少しずつ進行していくと、少しずつ、可愛らしくポップな雰囲気だったゲームの様子が変化していきます。
なんというか、人間のどこか本質を突くような、なんとも言えないストーリーが展開していきます。
写真を撮影するような操作を通して、プレイヤーは客観的にその世界を見ていくことになるわけですが……
果たしてどんな結末が待っているのでしょうか。
まるで怒号を浴びせるようなこの赤いキャラクターはいったい？
今回のゲームは、Pixi.js を用いることで、とても滑らかに、生き生きと動き回るキャラクターたちを表現しています。
また、ゲームの後半には、いかにも WebGL 実装らしいエフェクトのような効果が加わったシーンも出てきます。
canvas2d の表現力でも、この程度のグラフィックスであれば問題なく実現できるとは思いますが、それでも、WebGL モードのちからでかなりスムーズな描画が実現できており、やはり 2D ベースなら Pixi.js はかなり強いなあということをあらためて感じさせてくれる仕上がりになっています。
ゲームの作者さんは、結構有名な方みたいですね。海外ではパトロン制度のように、自分の気に入ったクリエイターを金銭的にサポートするシステムやウェブサービスがあったりしますが、エンディングのワンシーンにはそういったパトロンたちの名前も掲載されています。
普段紹介している WebGL の事例とはちょっとベクトルの違う事例ではありますが、これもまた、WebGL 実装のひとつの例であることは間違いありません。
自分の表現したいものに合わせた最適な形で、WebGL を活用したいものです。
みなさんもぜひチェックしてみてください。
