PixiJSとは？
PixiJSはイギリスのGoodboy Digital社が開発している、オープンソースの2D描画ライブラリです。
GitHubを見ると、2013年頃からコミットが始まっているライブラリで、CANVAS描画系ライブラリの中では、特に注目されているJavaScriptライブラリです。
サイト内にPixiJSの特徴がまとまっていますが、特に注目すべき点をピックアップしました。
WebGLを使って高負荷な描画も難なくこなす
PixiJSはWebGLを使って2D表現をレンダリングします。WebGLはグラフィック描画を得意とするGPUを使うために、パーティクルといった負荷がかかる処理も、高速に描画することができ、スマートフォンやタブレット端末などでも、パフォーマンスを引き出すことが期待されます。
古い記事になりますが、FlashのStage3D（FlashでOpenGL/DirectXを利用することのできる技術）よりも、PixiJSの方がパフォーマンスが出ているという話もあるくらいです。インタプリタ型のJavaScriptにおいて、FlashPlayerのようにプラグインによって最適化された環境よりも、パフォーマンスが出るということは、驚くべきことです。
• 最速の2D描画JavaScriptｂライブラリは!?
学習コストの低いAPI
PixiJSのAPIはActionScriptに似ていて、DisplayObjectやSpriteなど、Flash開発者にとっては馴染みのあるクラスがあり、addChild()やremoveChild()といったように、メソッドやプロパティも、ActionScriptを意識した作りとなっています。つまりFlash開発者にとっては、クラス名やメソッド名、プロパティ名を見れば、機能を予測できる内容で、初めての開発でもそれほど迷うことがありません。
Flash開発者でなくても、ドキュメントや、チュートリアルがとても充実していて、エンジニアにとって習得しやすい環境が整っています。こうした環境が整っていることも、ライブラリとしてはとても重要なことですね。
豊富なエフェクト機能
PixiJSにはGLSLを利用した多くのフィルターが用意されています。こちらのサンプルでは、PixiJSで用意されているフィルターを見ることができます。
これらのフィルターは、動画やスプライトアニメーションやテキストなど、自由なところに、複数同時にかけることができます。そして、そのことによって処理が重くなる心配もありません。さらには、カスタムフィルター機能を使って、GLSLを使って独自にフィルターを作ることもできるので、GLSLを自力で実装するよりも、手軽にGLSLに触れる事が出来ます。もちろん既存のフィルター機能を使いつつ、さらに独自の処理を加えたい時などにも、カスタムフィルターは役に立ちます。
• GLSLについては、「乗り遅れるな、話題のGLSLを使ったワンランク上のWebサイト」をご覧ください。
マルチプラットフォーム対応でWebGLに対応していなくても大丈夫
PixiJSは、HTML5のCANVASを使って、全てのプラットフォームで動作することを意識して作られています。WebGLが利用できる環境では、その機能を最大限に利用して描画を高速化します。デバイスがWebGLをサポートしていない環境では、自動的に通常のCANVASという仕組みでの描画に切り替えて描画します。もちろんその場合は、WebGLでの描画に比べてパフォーマンスが出ないので、パーティクルの量を減らしたり、自動的に描画環境が切り替わるようにするなど、極力負荷をかけないようにしておく工夫が必要かもしれません。
既にPixiJSを取り入れているWebサイト
海外でも日本でも、PixiJSが使われているWebサイトが既に多く存在します。それらは、CSSやJavaScriptでは実現できない表現手法を持っています。そうしたWebサイトを、いくつか紹介したいと思います。
Introducing The New Uber App For Riders
世界70カ国・地域の450都市以上で展開しているアメリカ発祥の自動車配車サービス「Uber」のWebコンテンツ。レスポンシブに対応しながらも、要所にPixiJSでの演出が加わって、ハイセンスにまとまっている感じは、とても勉強になります。ローカライズされた日本語版サイトも存在しています。
TOYOTA エスティマ Wonder Map
観光ガイドに載っていないような、日本中の奇妙な場所を巡る、トヨタ・エスティマのPRサイト。Flash全盛期に多く見られたような、ワクワクがたくさん詰まったサイトです。レスポンシブ対応でPixiJSのうたうマルチプラットフォームを実現しているところが凄い。
Secrets et vertus des plantes
ハーブの庭園が美しいフランスのサイト。演出としては控えめですが、丁寧に作りこまれた演出がたくさん詰まっています。まるで動く絵本みたいな美しいウェブサイトです。PixiJSは、こういった何げない演出の手助けにもなります。
Wed'ze - Lookbook Winter 2016-2017
フランスのスキー、スノーボードメーカー、ウェッゼの2016、17年の冬の商品を紹介するサイト。画面のスクロールに合わせて、PixiJSを使ったCANVASの演出があり、通常のパララックスを用いたサイトよりも、一歩先を行く表現力を持っています。パララックスにCANVASが持つ、自由な表現力を合わせた珍しい組み合わせですが、見事に調和していて、カッコいいサイトです。
Artisanal Beverages
いろいろなフレーバーが楽しめる炭酸飲料のサイト。手書き風イラストとPixiJSによるアニメーションが、Webサイトにうまく取り入れられていて、とても雰囲気のあるサイトに仕上がっています。
VeintidósGrados
スペイン、マドリード出身のデザイナーでありエンジニアでもあるVicenteLucendoのショーケース。デザインも技術力も高いレベルで実現されているサイトで、とにかくカッコいいの一言です。デザイナー兼エンジニアだから発揮できるクリエイティブを感じます。
Kindernauts
イタリアのフェレロ社が製造・販売しているキンダーチョコレート関連のサイト。細かく作りこまれたマップは、CANVASならではの表現力を持っています。CANVASは大きければ大きいほど再描画領域が広がり、マシン負荷が掛かるようになりますが、WebGLを使う事で、大画面でもそれほど負荷なく表示することが可能になります。
X-WING FIGHTER
スターウォーズのX-WINGを題材とした、シューティングゲーム。Unityで作ったのかと思うほど作り込まれていて、おそらくWebGLに対応しているPixiJSだからこそ、派手なアニメーションやエフェクトをつけても、負荷なく実現できるのだと思います。
競合するライブラリ
同じCANVASを利用するJavaScriptライブラリとして、AdobeのCreateJSが比較対象としてあげられます。現状としては、WebGLへの対応という点でPixiJSが一歩抜け出しているかと思います。CreateJSもWebLGLに対応していますが、PixiJSと比べると限定的と言わざるを得ません。
しかし、CreateJSも次期バージョンでは、「STAGEGL – A FASTER, BETTER, STRONGER WEBGL UPDATE TO EASELJS」というCreateJSの公式ブログにもある通り、新たに作られたStageGL要素により、WebGLへの対応もPixiJSに追いつくかと思われ、CreateJSも選択肢の一つとして、PixiJSと並び立つことが予測されます。もしくはオーサリングソフトAdobeAnimateと連携できるという点では、一歩抜け出す可能性もあります。
まとめ
PixiJSは、WebGLを使って、2D表現を高速にします。かつてのFlashを彷彿とさせるコンテンツも、Flash以上に高速に再現することができます。もちろんプラグインはいらないので、PCでもスマートフォンでもタブレットでも実行することができます。HTML5のCANVASを使うので、CANVASだけでコンテンツを作ってもいいですし、コンテンツ内のいち要素として、好きなところで使うこともできます。さらには他の物理演算やゲームエンジンと組み合わせて、マルチプラットフォームなブラウザゲームを制作することもできます。
そして、豊富なサンプルとAPIドキュメントが揃っていて、学習コストも低く、明日からでもコンテンツ制作に取り入れることができます。そして今までに無いような表現手法をそのコンテンツに取り入れることもできるのです。これを採用しない手はないのでは？
「お!? これは面白い表現手法を取り入れたサイトだ」と思ったら、JavaScriptコンソールを開いてみてください。そのコンテンツでは、PixiJSのクレジットが表示されているはずです。
