HTML5CanvasのアニメーションをPIXI.jsでテクスチャとして取り込む方法

pixi.jsでhtml5canvas(2d canvas)で描かれるアニメーションを表示したいという場合があるかもしません。

pixi.jsで用意されているメソッドを使って描くように移植するのも手ですが、割とめんどくさいです。

そこで今回は2d canvasで描かれるアニメーションをそのままPIXI.jsでテクスチャとして取り込んで表示する方法を紹介します。

とてもかんたんなのでpixiについて全然詳しくない人でもできます。

CanvasからPIXIのテクスチャを作成する

Canvasからテクスチャを作成します。

これはpixiのメソッドPIXI.Texture.fromを使えば簡単にできます。

let canvas = document.createElement("canvas");
let tex = PIXI.Texture.from(canvas);

これだけでcanvasからテクスチャが作れます。

let tex = PIXI.Texture.fromCanvas(canvas);

fromCanvasでも作成できます。ですが、どうやらfromCanvasは廃止されたようなので非推奨みたいですね。

描画が変わり続けるcanvasでもこの方法で大丈夫です。

ただし、ひと手間加えないとアニメーションとして表示されず、静止画になってしまいます。

テクスチャをアップデートする

描画が変わり続けるキャンバスをテクスチャにする場合、毎回pixiで描画するタイミングでテクスチャのアップデートを行う必要があります。

テクスチャをアップデートするためのメソッドもpixiで用意されています。

let tex = PIXI.Texture.fromCanvas(canvas);
tex.update(); 

updateというメソッドを実行するだけで自動的にテクスチャがアップデートされます。

毎回pixiで描画する前に実行するようにしましょう。