PIXIJSでWebでちょっとリッチな演出を入れてみる

Screenshot

Webサイトで演出にこだわりたい場合、CSS3で色々できると思います。

CSS3は、HTMLと連携してスタイリングやレイアウトを簡単に実装できますが、より複雑な演出をしたい場合はWebGLを利用するのが良い場合があります。

PixiJSとは

JavaScript性の高性能な2Dレンダリングエンジンです。(TypeScriptにも対応しています)

WebGLとHTML5 Canvasを使用して、2Dグラフィックスを高速かつ効率的にレンダリングするために設計されています。ゲーム開発などにも使えますが、本体自体は描画エンジンに特化しており

直感的でシンプルなAPIのためアニメーション・パーティクルなどの演出を入れたい場合に有効です。(Flashなき今、代用にも使えますね)

ただし、2Dに特化しているので、3D表現を存分にしたい場合はThree.js などを利用するのが良いでしょう。

WebGLは2024年現在ほとんどのPC,Mobileブラウザで対応しています。

https://caniuse.com/webgl

PixiJSの使い方

npmパッケージがあるので下記コマンドよりインストールします。

npm install pixi.js

サンプルで画像を全画面表示させる場合はこの様になります。

import { Application, Size, Assets, Sprite } from 'pixi.js';

function calculateCoverSize(originalSize: Size, displaySize: Size): Size {
  const originalAspect = originalSize.width / originalSize.height;
  const displayAspect = displaySize.width / displaySize.height;

  let resultWidth, resultHeight;

  if (originalAspect > displayAspect) {
    // Original is wider than display aspect ratio
    resultWidth = displaySize.width;
    resultHeight = displaySize.width / originalAspect;
  } else {
    // Original is taller than display aspect ratio
    resultWidth = displaySize.height * originalAspect;
    resultHeight = displaySize.height;
  }

  return {
    width: resultWidth,
    height: resultHeight
  };
}

// PixiJSのアプリケーションを作成
const app = new Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

// テクスチャを読み込む
const texture = await Assets.load('path/to/your/image.jpg');

// スプライトを作成
const sprite = new Sprite(texture);

// 画像を隙間なく埋めるためのサイズを計算
const coverSize = calculateCoverSize(texture, app.view);
// スプライトのサイズを設定
sprite.width = coverSize.width;
sprite.height = coverSize.height;
// スプライトを中央に配置
sprite.x = (app.view.width - coverSize.width) / 2;
sprite.y = (app.view.height - coverSize.height) / 2;
// ステージにスプライトを追加
app.stage.addChild(sprite);

とっても簡単ですね。

ドキュメントも充実していますし、描画周りに特化していることでドキュメントのボリュームも少なめなので一通り読めば理解が進むかなと思います。

Pixiの拡張

素晴らしい機能だけでなく、Pixiにはさまざまな連携できる外部パッケージもあります。

Reactと連携できたり、ゲーム用に音声再生させたりもできます。

https://github.com/pixijs/pixi-react

https://github.com/pixijs/sound

アニメーション周りはPixiJsのtickerでもできますが、細かい制御を自分で作ると大変なので、Tween.jsなど外部のパッケージと組み合わせるといいかと思います。

https://github.com/tweenjs/tween.js

終わりに

いかがでしたでしょうか？なかなか汎用性のあるパッケージなのでぜひ利用してみてください。