はじめてのPixiJS 😇

いままで2DのものをつくるときはCanvasのAPIを直接叩いていたんですが、
ふと、ライブラリをつかってみようとおもいPixi.jsを試してみることにしました。
ドキュメント に目を通しながら探り探り書いたコードをメモしておきます。

JavaScript

// tickerをつくる
const ticker = new PIXI.ticker.Ticker();
// rendererをつくる（WebGLがつかえたらWebGLをつかう）
const renderer = new PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight);
// stageをつくる
const stage = new PIXI.Container();
// 真っ赤なtextureをつくる
const texture = new PIXI.Texture.fromImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX/AAAZ4gk3AAAACklEQVQIW2NgAAAAAgABYkBPaAAAAABJRU5ErkJggg==");
// spriteをつくる
const sprite = new PIXI.Sprite(texture);

const V = .1; // スピード
const L = 180; // 振幅

let diffX = 0;
let index = 0;
let x, y;

sprite.width = 80;
sprite.height = 80;

// 中心に配置
x = (window.innerWidth - sprite.width) / 2;
y = (window.innerHeight - sprite.height) / 2;

// Canvasを配置
document.body.appendChild(renderer.view);
// stageにspriteを配置
stage.addChild(sprite);

ticker.add(function(delta) {
    ++ index;
    diffX = Math.sin(index * V) * L;

    // tickerが進む度にspriteの座標を更新
    sprite.position = new PIXI.Point(x + diffX, y);
    renderer.render(stage);
});

// tickerをスタート
ticker.start();

DEMO

比較的わかりやすかったので安心しました。
PixiJSの読み込みは CDN から行っています。

cdnjs.com

これだけのコードで60FPSで描画されるものができましたが、FPSの変更の仕方がいまいちわかっていません。
引き続き精進します。