Phaser3 : 物理ボディからエフェクトを作る①

以前作ったアルファ値取得の処理を使い、物理ボディが粉砕されるようなエフェクトを作ってみたいと思います。

物理ボディの位置と回転に応じてピクセルを描画する

前回のcreateVertsを少し改造し、作成した物理ボディを返すようにします。

作成時にテクスチャの名前でラベルを設定します。

return this.matter.add.sprite(x, y, texture, 0, { shape: { type: 'fromVerts', verts: verts, flagInternal: false }, label: texture }).setTint(0x05FBFF, 0x1E00FF0);

次に物理ボディの現在位置と角度からpointの集合を作るGetPixel関数を作ります。
fillpointShapeの部分で座標を物理ボディの角度に応じて回転させています。

public GetPixel(x: number, y: number, rotate:number,key: string) {
    let source = this.textures.get(key).getSourceImage()
    this.graphicsSub.clear();
    for (let i = 0; i < source.height; i++) {
        for (let j = 0; j < source.width; j++) {
            let pixel = this.textures.getPixel(j, i, key, 0)
            if (pixel.alpha > 0) {
                let color = new Phaser.Display.Color();
                color.setTo(0, 0, 0)
                this.graphicsSub.fillStyle(color.color, 1);
                
                //回転させる
                this.graphicsSub.fillPointShape(new Phaser.Math.Vector2(x+(j*Math.cos(rotate)-i*Math.sin(rotate)), y+(i*Math.cos(rotate)+j*Math.sin(rotate))), 1);
            }
        }
    }
}

updateでマウスクリック時にGetPixelを実行します。

update() {
    if (this.input.activePointer.isDown) {
        this.GetPixel(this.obj.x, this.obj.y, this.obj.rotation,this.obj.texture.key)
    }

実行結果がこちらです。 物理ボディのoriginが中心になっているのでピクセル群と少しずれがでていますが、物理ボディの位置と回転に従ってピクセルを生成できているのがわかります。
次回はこの処理をエフェクトとして作りこんでいきたいと思います。