PixiJSで１枚の画像をバラバラのオブジェクトにして個別にアニメーションさせたい。

前提・実現したいこと

画像をcanvasに描画してクリックしたら画像がバラバラに落ちていくようなことをいたいと思っています。
canvasでは実現できてますが、処理が重くいろいろ調べてたらPixiJSというライブラリを知りました。

canvasのdrawimageのように画像のコピーする範囲をずらして配列に保存してアニメーションさせたいのですが、PixiJSでは1枚の画像をバラバラのオブジェクト？にしてアニメーションさせるのか方法が分かりません。

canvasで試したこと

同じような処理をCanvasのみで実現しました。画像の大きさを15px * 15px　ごとに細切れにしてcanvasにdrawimageしてる感じです。

javascript
1var imgw = 15;
2var imgh = 15;
3var img_original = new Image();
4img_original.src = "画像のパス";
5
6var canvas = document.getElementById("canvas");
7var ctx = canvas.getContext("2d");
8
9var cntW = img_original.width / imgw;
10var cntH = img_original.height / imgh;
11var max_speed = 6;
12var min_speed = 2;
13var imgLen = 0;
14var timer=null;
15
16//画像コピーする
17copyimage();
18
19canvas.addEventListener("click",function() {
20    testTimer = setInterval(particleFunc, 10);
21});
22
23//画像をcanvasにコピーする
24  function copyimage() {
25    for (var i = 0; i < cntH; i++) {
26      for (var j = 0; j < cntW; j++) {
27        //イメージを細切れにして全体をきれいに描画する
28        ctx.drawImage(
29          img_original,
30          j * imgw,
31          i * imgh,
32          imgw,
33          imgh,
34          j * imgw,
35          i * imgh,
36          imgw,
37          imgh
38        );
39
40        imgPos.push({
41          xpos: j * imgw,
42          ypos: i * imgh,
43          initx: j * imgw,
44          inity: i * imgh,
45          angle: Math.random() * 360,
46          speed: Math.random() * (max_speed - min_speed) + min_speed
47        });
48      }
49    }
50 
51  }
52
53//パーティクルアニメーション
54 var idx = 0;
55 var cos = 0;
56 var sin = 0;
57 var rad = Math.PI / 180;
58 var angleAdd = 2;
59
60  function particleFunc() {
61    //ctx.scale(0.25, 0.25);
62    ctx.clearRect(0, 0, canW, canH);
63
64    for (var i = 0; i < imgPos.length; i++) {
65      imgPos[i].ypos += imgPos[i].speed;
66      imgPos[i].angle += Math.random() * angleAdd;
67      cos = Math.cos(imgPos[i].angle * rad);
68      sin = Math.sin(imgPos[i].angle * rad);
69
70      ctx.setTransform(sin, cos, cos, sin, imgPos[i].xpos, imgPos[i].ypos);
71
72      ctx.drawImage(
73        img_original,
74        imgPos[i].initx,
75        imgPos[i].inity,
76        imgw,
77        imgh,
78        0,
79        0,
80        imgw,
81        imgh
82      );
83      //これを設定しないとばグル
84      ctx.setTransform(1, 0, 0, 1, 0, 0);
85
86    }
87  }

PixiJSのソースコード

javascript
1
2var imgw = 10;
3var imgh = 10;
4var cntW = 600;
5var cntH = 600;
6
7const app = new PIXI.Application(cntW, cntH)
8document.body.appendChild(app.view)
9
10// 画像を読み込み、テクスチャにする
11let imageTexture = new PIXI.Texture.from('画像のパス');
12// 読み込んだテクスチャから、スプライトを生成する
13let sprite = new PIXI.Sprite(imageTexture);
14
15
16sprite.anchor.x = 0.5;
17sprite.anchor.y = 0.5;
18sprite.scale.x=0.5;
19sprite.scale.y=0.5;
20
21sprite.x = app.screen.width / 2;        // ビューの幅 / 2 = x中央
22sprite.y = app.screen.height / 2;       // ビューの高さ / 2 = y中央
23// 表示領域に追加する
24app.stage.addChild(sprite);
25app.ticker.add(delta => {
26
27})