【Pixi.js入門】WebGLが手軽に扱えるJavaScriptライブラリの使い方

皆さんは、PixiJSというWebGLを手軽に扱えるJavaScriptライブラリをご存知でしょうか？

PixiJSはWebGLを使ってインタラクティブなウェブサイトやウェブアプリを制作する際の画像を用いた2D表現で使われることが多く、特にウェブサイトへの導入実績が豊富にあります。

よくWebGLで開発をするプロジェクトの場合、ThreeJSなどの3Dを扱うJavaScriptライブラリと比較されることがあり、2D表現の場合は「PixiJS」、3D表現の場合は「ThreeJS」という風な使われ方をすることが多いです。

しかし、現時点ではPixiJSはまだまだ日本語の情報が少なく、日本人の開発者も少ないためWebGLを使ってみたい初心者の人にとっては少々市域が高いライブラリになっていることも現実です。

そこで、今回は初心者でもPixiJSの使い方が理解できるように、簡単な入門方法について解説していきたいと思います。

【PixiJSとは何か】どんなことができるのか？

PixiJSは「goodboydigital」という企業が開発した画像の2D表現に特化したライブラリでして、画像のインタラクティブ表現としてエフェクトをかけたり、ページ遷移時のアニメーション表現としても使われます。

PixiJSはWebGLを内部的に使うことによって数値計算がGPU上で行えるので、PC上はもちろんスマートフォン上でもサイトやアプリをスムーズに動かすことができます。

WebGLが扱える技術者の需要は今後も伸び続けることが予測されるので、実務でWebGLを使いたい方は、まずは2DでのWebGL表現が可能なPixiJSの扱いから慣れていき、次に3Dでの扱い方を学ぶためにThreeJSへとステップアップしていくのが良いでしょう。

具体的に何ができるかを知り方い人は下記に実際に作られたサイトがありますので、ご覧ください。

また、それ以外のサンプルを見たい方は下のボタンからギャラリーページをご覧ください。

ギャラリーページはコチラ

Art4GlobalGoals

Art4GlobalGoalsのページはコチラ

CUSP

CUSPのページはコチラ

UIX

UIXのページはコチラ

Fanny Myard

Fanny Myardのページはコチラ

PixiJSのダウンロードと実行方法

まずPixiJSをダウンロードするためにはビルド済みのファイルを「https://pixijs.download/release/pixi.min.js」から入手するか、ターミナルを開いてnpmコマンドを使い「npm install pixi.js」と入力してダウンロードを完了させた後に「import * as PIXI from 'pixi.js'」でライブラリをインポートしましょう。

また、ビルドしたファイルをダウンロードした場合は、他のJavaScriptライブラリを読み込む時と同様にscriptタグのsrc属性を以下のように記述しましょう。

<script src="pixi.min.js"></script>

PixiJSのCDN

PixiJSをダウンロードせずにささっと試してみたい方はCDNを利用されることをオススメします。

CDNの利用方法は「cdnjs」の「https://cdnjs.com/libraries/pixi.js」にアクセスしてリンクをコピーした後に以下のようにHTMLに記述しましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.0/cjs/pixi.min.js"></script>

PixiJSの使い方と実装サンプルの解説

ここからはPixiJSの基本的な使い方を理解してもらうために、キャラクターの画像をcanvas上に表示してアニメーションさせるというサンプルの実装方法について解説していきます。

WebGLやcanvasという単語を聞くと一見難しそうに感じてしまうかもしれませんが、初めて使う人でも直感的に扱えるようにしっかりとプログラムが設計されているので、全く心配する必要はありません。

実装したサンプルのコード全文と細かい部分に関しては下記解説をご覧ください。

サンプルの実行結果はコチラ

サンプルコード全文

const app = new PIXI.Application({
    width: window.innerWidth, 
    height: window.innerHeight, 
    backgroundColor: 0x000000, 
    resolution: window.devicePixelRatio || 1,
    transparent: false,
});

document.body.appendChild(app.view);

//グループ化するためのコンテナを作成・追加
const container = new PIXI.Container();
app.stage.addChild(container);

//テクスチャの読み込み
const texture = PIXI.Texture.from('dragon.png');
const dragon = new PIXI.Sprite(texture);
dragon.anchor.set(0.5); //原点

//グループに追加
container.addChild(dragon);

//コンテナをセンタリング
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;

//画像を真ん中に寄せる
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;

//アニメーション
app.ticker.add((delta) => {
    container.rotation -= 0.01 * delta;
});

Applicationの作成

まずは、キャラクターを登場させるためのcanvasを作成する必要がありますので、PixiJSのApplicationメソッドにオプションを設定して大きさや背景色の指定を以下のように行いましょう。

その後、追加したい要素を指定して「appendChild」することによってcanvasを表示することができます。

const app = new PIXI.Application({
    width: window.innerWidth, //横幅
    height: window.innerHeight, //縦幅
    backgroundColor: 0x000000, //背景色
    resolution: window.devicePixelRatio || 1, //解像度
    transparent: false, //背景を透過させるか否か
});

document.body.appendChild(app.view); //canvasを追加

Containerの作成

canvasの作成が終わったら、キャラクターをグループ化する場合はContainerメソッドを使いましょう。

作成しただけでは、canvasに反映されないのでサンプルコードように「stage.addChild」を行いましょう。

const container = new PIXI.Container(); 
app.stage.addChild(container);

テクスチャの読み込みと位置指定をしてstageに追加

ステージに登場させるキャラクターを作るために、画像の読み込みを行う必要があります。

「Texture.from」で画像のパスを指定してSpriteメソッドでテクスチャを適用させましょう。

//テクスチャの読み込み 
const texture = PIXI.Texture.from('dragon.png'); 
const dragon = new PIXI.Sprite(texture); 

dragon.anchor.set(0.5); //原点 

//グループに追加 
container.addChild(dragon); 

//コンテナをセンタリング 
container.x = app.screen.width / 2; 
container.y = app.screen.height / 2;

//画像を真ん中に寄せる 
container.pivot.x = container.width / 2; 
container.pivot.y = container.height / 2;

アニメーションさせる

app.ticker.add((delta) => {
    container.rotation -= 0.01 * delta;
});

PixiJSで使える便利なプロパティやメソッドの紹介

ここまでは、PixiJSのもっともシンプルな実装方法について解説してきましたが、ここではPixiJSで使える便利なプロパティやメソッドについて紹介していきたいと思います。

ここで紹介するのはPixiJSのほんの一部の機能ですの、もっと詳しく知りたいという方は下記ボタンよりexampleページにアクセスしてください。

Example ページはコチラ

画像サイズの調節する場合

dragon.scale.set(2.0);

実行結果はコチラ

透明度の変更をする場合

dragon.alpha = 0.35;

実行結果はコチラ

画像の色合いを変える場合

dragon.tint = 0xff0000;

実行結果はコチラ

rendererのサイズの変える場合

window.addEventListener('resize', function() {
    app.renderer.resize(this.innerWidth, this.innerHeight);
    container.x = app.screen.width / 2;
    container.y = app.screen.height / 2;
});

まとめ

今回はWebGL入門者向けにPixiJSの使い方について解説してきましたが、いかがでしたでしょうか？

少ないコードで簡単にWebGLを扱うことができるので、これから本格的にWebのインタラクティブ表現を学んでいきたい方にとっては良い教材になったのではないでしょうか？

ある程度PixiJSの扱い方に慣れてくると、WebGLの本来の使われ方である3D表現に挑戦してみるのも良いかもしれませんね。