皆さんは、PixiJSというWebGLを手軽に扱えるJavaScriptライブラリをご存知でしょうか？
PixiJSはWebGLを使ってインタラクティブなウェブサイトやウェブアプリを制作する際の画像を用いた2D表現で使われることが多く、特にウェブサイトへの導入実績が豊富にあります。
よくWebGLで開発をするプロジェクトの場合、ThreeJSなどの3Dを扱うJavaScriptライブラリと比較されることがあり、2D表現の場合は「PixiJS」、3D表現の場合は「ThreeJS」という風な使われ方をすることが多いです。
しかし、現時点ではPixiJSはまだまだ日本語の情報が少なく、日本人の開発者も少ないためWebGLを使ってみたい初心者の人にとっては少々市域が高いライブラリになっていることも現実です。
そこで、今回は初心者でもPixiJSの使い方が理解できるように、簡単な入門方法について解説していきたいと思います。
目次
- 1 【PixiJSとは何か】どんなことができるのか？
- 2 Art4GlobalGoals
- 3 CUSP
- 4 UIX
- 5 Fanny Myard
- 6 PixiJSのダウンロードと実行方法
- 7 PixiJSのCDN
- 8 PixiJSの使い方と実装サンプルの解説
- 9 サンプルコード全文
- 10 Applicationの作成
- 11 Containerの作成
- 12 テクスチャの読み込みと位置指定をしてstageに追加
- 13 アニメーションさせる
- 14 PixiJSで使える便利なプロパティやメソッドの紹介
- 15 画像サイズの調節する場合
- 16 透明度の変更をする場合
- 17 画像の色合いを変える場合
- 18 rendererのサイズの変える場合
- 19 まとめ
【PixiJSとは何か】どんなことができるのか？
PixiJSは「goodboydigital」という企業が開発した画像の2D表現に特化したライブラリでして、画像のインタラクティブ表現としてエフェクトをかけたり、ページ遷移時のアニメーション表現としても使われます。
PixiJSはWebGLを内部的に使うことによって数値計算がGPU上で行えるので、PC上はもちろんスマートフォン上でもサイトやアプリをスムーズに動かすことができます。
WebGLが扱える技術者の需要は今後も伸び続けることが予測されるので、実務でWebGLを使いたい方は、まずは2DでのWebGL表現が可能なPixiJSの扱いから慣れていき、次に3Dでの扱い方を学ぶためにThreeJSへとステップアップしていくのが良いでしょう。
具体的に何ができるかを知り方い人は下記に実際に作られたサイトがありますので、ご覧ください。
また、それ以外のサンプルを見たい方は下のボタンからギャラリーページをご覧ください。
Art4GlobalGoals
CUSP
UIX
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ページにアクセスしてください。
画像サイズの調節する場合
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表現に挑戦してみるのも良いかもしれませんね。
