link facebook2 twitter youtube

PixiJS事始め

PixiJSは2Dインタラクティブコンテンツ用JavaScriptライブラリです。
同系統のライブラリの中では、CreateJSに次いで関心を持たれています。

特徴

  • 速い
  • 無料
  • 柔軟性がある

PixiJSと似たようなリッチインタラクティブコンテンツを作成することができる、ライブラリのCreateJSと比べてもPixiJSは速いようです。

くわしくは、我らがICSさんのこの記事を御覧ください。
HTML5 CanvasとWebGLの使い分け

PixiJSに限ったことではないかもしれませんが、マルチプラットフォームに対応しているので僕たちは表現に注力することができます。

テキストが豊富

公式サイトのexampleが充実しています。
文章は英語やけど、読めば大変有益なことが書いてる。
英語の勉強も兼ねて頑張って読んでみましょう!

なんとPixiJSの本まで出版されています!
kindle版もあるので気軽に勉強できますね!
https://www.amazon.co.uk/Learn-Pixi-js-Interactive-Graphics/dp/1484210956

ゲームまで作れます。
[http://proclive.io/pixi-js-reverse-mask-tutorial/]
(http://proclive.io/pixi-js-reverse-mask-tutorial/)

さっそく動かしてみる

//Create the renderer
var renderer = PIXI.autoDetectRenderer(256, 256);

//Add the canvas to the HTML document
document.body.appendChild(renderer.view);

//Create a container object called the `stage`
var stage = new PIXI.Container();

//Tell the `renderer` to `render` the `stage`
renderer.render(stage);

公式サイトのソースをそのまま持ってきました。

rendererオブジェクト

2行目のrendererオブジェクトはPixiJSで作成するイメージを描画するエリアを作成します。自動的に<canvas>タグを生成して描画します。

autoDetectRendererメソッドは自動的に最適なレンダラーを見つけ出してくれます。
WebGLレンダラーはcanvasレンダラーよりも処理が速いのでまずこれが選択されてますが、WebGLをサポートしていないブラウザの場合canvasレンダラーに変更されます。

4行目は、appendChildを使ってDOMにPixiJSで作成したデータを挿入しています。
renderer.viewのviewはレンダラーオブジェクトのcanvas要素です。

var stage = new PIXI.Container();
でstageと呼ばれるcontainerオブジェクトを生成します。このステージオブジェクトはPixiが表示するコンテンツのルートオブジェクトとして使われます。

上記のコードを実行してみましょう!

実行結果

黒いcanvas要素がHTMLに追加されました。
Pixiにおける"Hello world"的なことですね。

次からは簡単なデモを勉強しながら、さらにPixiの理解を進めたいと思います!

© eggplant