Webグラフィックス描画ライブラリ「PixiJS」を試す

ブラウザ上で動作する、WebGLの知識が無くてもリッチでインタラクティブな2Dグラフィックスを描画することができるライブラリ「PixiJS v5」を試してみました。 PixiJS

PixiJSって？

PixiJSは、WebGL APIに飛び込んだり、ブラウザーとデバイスの互換性を処理したりすることなく、リッチでインタラクティブなグラフィックス、クロスプラットフォームアプリケーション、およびゲームを作成できるようにするレンダリングライブラリです。

GitHub - pixijs/pixi.js: The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

WebGLって？

WebGL (Web Graphics Library) は、互換性があるウェブブラウザーでプラグインを使用せずにインタラクティブな 3D グラフィックスや 2D グラフィックスをレンダリングするための JavaScript API です。HTML5 <canvas> 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。これにより、ユーザーの端末が提供するハードウェアのグラフィックアクセラレーションを API で利用することが可能になります。

WebGL: ウェブの 2D および 3D グラフィック - Web API | MDN

動作サンプル

動作サンプル codepen

環境構築

PixiJSはCDNを使用するので、ファイルはHTMLを一つのみ用意します。

$ touch index.html

サーバーを立てる

http-serverを使用します。 http-server - npm

インストール

$ npm install -g http-server

サーバーの起動

$ http-server

デフォルトでは8080番のポートが使用されます。 http://127.0.0.1:8080

キャンバスを表示する

PIXI.Renderer を生成し、canvas要素をviewに割り当てます。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
</head>
<body>
  <canvas id="mycanvas"></canvas>
  <script>
    const canvas = document.getElementById('mycanvas')
    const renderer = new PIXI.Renderer({
      view: canvas,
    })
  </script>
</body>
</html>

キャンバスが表示されました。（黒い部分がキャンバスです）

キャンバスのサイズを画面幅に合わせておきます。

...
const renderer = new PIXI.Renderer({
  view: canvas,
  width: window.innerWidth,  // 追加
  height: window.innerHeight,  // 追加
})
...

ステージとスプライトを表示する

画像からスプライトを作成し、ステージに追加します。ステージは画像等の表示物をまとめるコンテナの役割を果たします。

...
const stage = new PIXI.Container()
const mediumFattyTunaTexture = PIXI.Texture.from('medium_fatty_tuna.png')
const sushi = new PIXI.Sprite(mediumFattyTunaTexture)

sushi.width = 200
sushi.height = 200

// 配置や回転に使用する原点を設定する
sushi.anchor.set(0.5)
// 配置座標を指定
sushi.x = renderer.width * 0.5
sushi.y = renderer.height * 0.5

// ステージに配置
stage.addChild(sushi)

// ステージをレンダリング
renderer.render(stage)

sushiが描画されました。

アニメーションを作る

PIXI.Tickerを用いてフレーム毎のループ処理を記述し、アニメーションを作ってみます。

...
const animate = () => {
  sushi.rotation += 0.05
  renderer.render(stage)
}

const ticker = new PIXI.Ticker()

ticker.add(animate)
ticker.start()

寿司が回り始めました。

インタラクションを使用する

interactive プロパティを用いることでインタラクションを有効化できます。有効化後、イベントリスナーを追加しアニメーションスタート処理を記述します。

...
// ticker.add(animate)  // コメントアウト
// ticker.start()  // コメントアウト

sushi.interactive = true

sushi.on('pointertap', () => {
  ticker.add(animate)
  ticker.start()
})

クリック or タップに反応して回転を始めるようになりました。

最終的なコード内容はこのようになります。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
</head>
<body>
  <canvas id="mycanvas"></canvas>
  <script>
    const canvas = document.getElementById('mycanvas')
    const renderer = new PIXI.Renderer({
      view: canvas,
      width: window.innerWidth,  // 追加
      height: window.innerHeight,  // 追加
    })

    const stage = new PIXI.Container()
    const mediumFattyTunaTexture = PIXI.Texture.from('medium_fatty_tuna.png')
    const sushi = new PIXI.Sprite(mediumFattyTunaTexture)

    sushi.width = 200
    sushi.height = 200

    // 配置や回転に使用する原点を設定する
    sushi.anchor.set(0.5)
    // 配置座標を指定
    sushi.x = renderer.width * 0.5
    sushi.y = renderer.height * 0.5

    // ステージに配置
    stage.addChild(sushi)

    // ステージをレンダリング
    renderer.render(stage)

    const animate = () => {
      sushi.rotation += 0.05
      renderer.render(stage)
    }

    const ticker = new PIXI.Ticker()

    // ticker.add(animate)
    // ticker.start()

    sushi.interactive = true

    sushi.on('pointertap', () => {
      ticker.add(animate)
      ticker.start()
    })
  </script>
</body>
</html>