Google

2016年10月29日土曜日

PixiJSの基本的使い方と概念

好き勝手に紹介させて頂く話です。

JavaScriptのフレームワークは最近色々ありすぎてJavaScript専門サイトでやるような内容なのですが、私がずっと入れ込んでるPixiJSは自前でも紹介させて頂きたいと思ったので書いてみます。

PixiJSはGoodboy Digital Ltd.が開発しているオープンソースのJavaScriptフレームワーク。
ライセンスはMITです。


日本語での呼び方はスバリ「ピクシー」。人によってはポケ○ンとかガン○ムとか想像されるでしょうが、元々は子鬼とか妖精の類から来ています。
ピクシーの記事は他所様でも書かれているとは思うのですが、うちでは使い方のコツや概念等をメインに考えています。
興味がなかった方でもアウトラインの理解が進む事を目標としています。


では簡単に、PixiJS公式でのアナウンスを部分的に抜粋してご紹介。
ピクシーは、非常に高速な2Dスプライトレンダリングエンジンです。ピクシーのAPIは、Macromedia / Adob​​e社のFlashが開拓し、使い倒され、問題と戦い、テストされたAPIを改良したものです。(翻訳担当:ぐーぐるせんせい)
これを言い直すと、、、

ブラウザ上でお絵かきやゲームを作るのに便利で速いエンジンで、APIはFlashのActionScriptに似てますよ

という事です。(書いてないけど3D描画もOKです)

お絵かき機能の正体はCanvasというHTML5の機能で、線や画像を描ける白板のようなものです。
HTMLタグを使って要素を置いていくのではなく、文字通り四角いキャンバス領域の中にぺたぺた「描く」ことができます。
それを、ピクシーのようなエンジンを使うと実装が簡単になると考えて下さい。


ピクシーの公式サイトに行くとこんなページになってます。

既にバージョンは4まで進んでいます。
背景の雲と宇宙のような物体は非常に良く動きます。初期化が終わるまでは背景真っ黒なので焦らずに待ってみて下さい。
全てJavaScriptの表現力だけで構成されており、スマホブラウザでもかなり高速です。

上記の雲以外にも、このサイトで紹介されている実例デモはなかなかです。
ブラウザゲームを作られてる方にはこういう表現力の高さも今更でお馴染みかも知れませんが、グリグリと動く様はブラウザゲームの進化を実感できるはず。

以下に2点程転載してみましたので、説明文のリンクから飛んで遊んでみて下さい。

一例のXWING FIGHTER スターウォーズ横シュー。パワーアップ、ロック要素等、普通に遊べるレベル。
Macの公式ゲーム。ナゲットを転がす3Dゲーム。左右とスペースでジャンプ。ゲーム設定がイミフw
他にも多々デモがあり、ギャラリー一覧はこちらから飛べます。


本来この手の記事ならここでHello World!なのでしょうが、今回は敢えて出さずにピクシーの特徴やなんで使ってるのかという理由を書いてみました。
  • 2D描画速度が他と比べて圧倒的に速い
  • 3D描画のWebGLにも対応
  • クラス、API構造がシンプルで素直
  • プラグインが作れる柔軟性
  • バージョンアップ回数の活発さ
  • 日本では余り使ってなかったw
まず、そもそも他所様と比べてPixiJSの描画速度はかなり上でした。

http://www.goodboydigital.com/pixijs/bunnymark/

正確なベンチではありませんが、上記サイトで実験速度が実感できます。
下がその画面。

最初は二体ですが、クリックすればするほどスプライトが大量に追加されます!なかなかFPSは落ちません。
ここからもいけます。
API構造がシンプルというのも関係しますが、その分便利過ぎるような機能はありません。
特別な事をするにはプラグインで、という方針になっています。
バージョンも既に4が出る位活発で良い傾向です。
使われる機会が少ない気がするのは日本語のドキュメントが少なすぎるからかでしょうかね。



手前味噌ですが、Flashが廃れた時にうちで公開していたブログパーツをHTML5版に全面書き換えしてみたのですが、ここにもPIXIを使わせて頂いております。

Flash程機密が保てないので、構造は根本から変わってしまいましたが。

次回はようやくハローワールドや描画のルール、コツ等を書く予定です。

0 件のコメント:

コメントを投稿