Pixi.js の WebGL 版を利用して作られたマルチプラットフォームなゲーム作品 Crimson Wings

doxas : 2016-06-27 14:30:22

PC だけでなくモバイルにも対応

今回ご紹介するのは、Pixi.js を利用してマルチプラットフォームに対応させた WebGL 製ゲーム、Crimson Wings です。

Pixi.js は WebGL 対応の 2D 専用ライブラリとして非常に有名ですね。

いわゆる携帯ゲーム、スマートフォンゲームのありがちなスタイルを踏襲した作品ではあるのですが、マルチプラットフォームに対応した Pixi.js のゲーム実装として、実は以外に珍しいのかなと感じたのでご紹介します。

見た目に反して操作は以外にも難しい

先に書いておくと、私はモバイルゲームとか全然やらない……ため、今回のゲームの内容については評価するだけの予備知識がありません。ただ、少なくともブラウザ上での動作を見る限りは、とてもスムーズに動いており、ゲームとしての体裁も、しっかり作られている印象を受けます。

実際にゲームを起動(というかページを開くだけですが)すると、ポップな感じの絵柄の画面が出てきます。

いわゆるステージクリア型? というんですかね。

ステージをクリアしていくと、次のステージに進むことができるというスタイルですね。

全部でどのくらいのステージが用意されているのかわかりませんが、この画面に映っているステージ数だけでも、結構な数があることがわかります。

ゲームの内容は、横から眺めたような 2D ビューで飛行機を操作して、空中に配置されているフラフープのような輪を通り抜けていくというもの。

飛行機は上下方向にのみ向きを変えることができるのですが、これが意外に操作が難しい……

輪の他にはスターが空に浮かんでいるので、これを回収しながら飛行することができると、評価が高くなるという仕組みですかね。

しかし、この辺りまで来ると、果たしてこれ WebGL でやるほどのことだったのか? という疑問が浮かびます。Canvas2D でも、このくらいなら十分にパフォーマンスが出そうな感じがします。

恐らく、Pixi.js の WebGL モードをあえて使っているのは、エフェクトなどの表現が優れているからではないかなと思います。たとえば、飛行機が輪に衝突してしまった際の爆発エフェクトなどは、全体の雰囲気とはちょっと違ってリアルな炎っぽいテクスチャを使っていました。

WebGL は Canvas2D と比較すると、多くのオブジェクトを大量に描画できるパフォーマンス上での優位戦があることは確かです。

ただし、Canvas2D であっても、たとえばイメージを読みこんだり、それを加算処理で合成したりすることは可能です。そう考えてみるとシェーダを使えるかどうかという意味では両者に大きな違いがありますが、それを度外視すれば、WebGL でも Canvas2D でも実は結構近いことができるんですね。

Pixi.js や three.js の優れた特徴として、プラットフォームが WebGL をサポートしていない場合には自動的に Canvas2D モードなどにフォールバックしてくれる機能が挙げられます。

このようなプラットフォームに応じて最適・最大のパフォーマンスを発揮してくれるのは、手厚い機能を持つライブラリの優れたポイントだと思います。

WebGL 実装にこだわるのもいいですが、こういった Pixi.js などの機能をうまく利用して、効率よく開発できるようにしたいものですね。

Pixi.js を利用した事例として今回のゲームはご紹介しました。内容はちょっとありがちなものかもしれませんが、実装の参考として、ご覧になってみてはいかがでしょうか。

リンク:

Crimson Wings

share

follow us in feedly

search

search

sponsor

social