PixiJS

PixiJS とは？

- 2D WebGL レンダラー

- レンダー速度がとても速い

- プラグインがたくさんあるので、場合によって必要なことだけを導入できる

- WebGL がサポートされないブラウザで自動的に canvas を使うことができる

- Phaser (2D ゲームフレームワーク)と RPGツクールMV　(RPGを作るツール) は Pixi Js でレンダーする

Basics: App, Renderer, Texture, Sprite

code:js

// canvas にフォルバック

let type = "WebGL";

if (!PIXI.utils.isWebGLSupported()) {

type = "canvas"

}

const {

Application,

loader,

Sprite,

} = PIXI;

// PIXI application を定義する

let app = new Application({ width: 512, height: 512 });

// app を HTMLに追加する

document.body.appendChild(app.view);

// app の設定

app.renderer.view.style.position = "absolute";

app.renderer.view.style.display = "block";

app.renderer.autoResize = true;

app.renderer.resize(window.innerWidth, window.innerHeight);

// アセット（Sprite のための画像）の取得

PIXI.loader

.load(setup);

let sprite1, sprite2;

function setup() {

// loader からアセットのアクセス方法

sprite2 = new Sprite(loader.resources.goliath.texture);

// ステージに新しい sprite を追加

app.stage.addChild(sprite1);

app.stage.addChild(sprite2);

// sprite にプロパティーを与える

sprite2.x = 90;

sprite2.y = 300;

// update loop を開始する

app.ticker.add(delta => gameLoop(delta));

}

Containers, Graphics, Text, Scenes

code:js

// テキストオブジェクトを作る

let text1 = new Text('These text objects are', {

fontFamily : 'Arial',

fontSize: 24,

fill : 0xff1010,

align : 'center'

});

let text2 = new Text('inside a container~', {

fontFamily : 'Arial',

fontSize: 24,

fill : 0xff1010,

align : 'center'

});

// container に追加する

container = new Container();

container.addChild(text1);

container.addChild(text2);

app.stage.addChild(container);

const graphics = new PIXI.Graphics();

// Rectangle

graphics.beginFill(0x46c4f2);

graphics.drawRect(50, 50, 100, 100);

graphics.endFill();

// Star

graphics.lineStyle(2, 0xFFFFFF);

graphics.beginFill(0xFFCC5A, 1);

graphics.drawStar(280, 510, 7, 50);

graphics.endFill();

// Graphics オブジェクトで描いたものはそのオブジェクトの中に保存される

app.stage.addChild(graphics);

Keyboard inputs

AnimatedSprite & TilingSprite

code:js

PIXI.loader

// spritesheet をロードする時に直接その json を使う

.add("./mage.json")

.add("tilingBackground", "./background.jpg")

.load(setup);

let mage, background;

function setup() {

// ロードされた　spritesheet　を指定する

let container = new Container();

// animatedSprite のファイル名の prefix で指定する

// 使っている texture 以外、width と height も必要

background = new TilingSprite(loader.resources.tilingBackground.texture,

loader.resources.tilingBackground.texture.width * 2,

loader.resources.tilingBackground.texture.height);

mage.scale.y = 0.3;

mage.scale.x = 0.3;

mage.x = background.width / 2 - mage.width / 2;

mage.y = background.height / 2 + mage.height;

mage.anchor.set(0.5, 0.5);

mage.on('pointerup', handleMageClick);

mage.interactive = true;

// 順番は重要　（mage を先に追加した場合、background の後ろになるので見えなくなる）

container.addChild(background);

container.addChild(mage);

//　親のポジションを変更すれば、子のポジションも親とともに変更する

container.y = 30;

app.stage.addChild(container);

// アニメーションの設定

mage.animationSpeed = 0.3;

mage.play();

app.ticker.add(delta => gameLoop(delta));

}

let movingForward = true;

function handleMageClick() {

movingForward = !movingForward;

if (movingForward) {

mage.scale.x = 0.3;

} else {

mage.scale.x = -0.3;

}

}

function gameLoop(delta) {

// x ポジションではなく、tilePosition で tilingSprite の見た目を変更

if (movingForward) {

background.tilePosition.x -= 0.5;

} else {

background.tilePosition.x += 0.5;

}

}

プロジェクト

他のHTML5 ライブラリー

- CreateJS はたくさんのライブラリが含まれている。easelJS (CreateJSのレンダーライブラリ) は前に canvas でレンダーして、WebGLの対応がそれほどよくないが、今は stageGL と言うライブラリがあって、それを使ったらWebGLも対応できる。stageGL のレンダー速度もかなり速いと読みましたが、最近のパフォーマンステストとかが見つからないので、どれが速いかと断言できない（ほとんど同じと言う stackoverflow コメントがあったけど）

- fabric と konva は WebGL を使っていないので (canvas だけ)、たくさんのスプライトを表示すると、少し遅くなる

パフォーマンステスト (WebGL と canvas の違い）