matterの物理エンジンで複雑な形状を使ってみる(Phaser3)

やりたいこと

Phaser3で複雑な形状で物理エンジンを使用するためにmatterを使ってみます。

データの用意

画像の用意

画像をPNGで用意します。

今回は例として上の画像を作成しました。わかりにくいですが白い領域は透明です。

名前をc.pngとしました。サイズは100×100です。

実装

画像のロード

sceneのpreloadで上記の画像を読み込みます。

    preload ()
    {
        this.load.image('c', 'assets/c.png');
    }

画像の追加

sceneのcreateで上記の画像を追加します。

    create ()
    {
        const poly = this.add.image(300, 300, 'c');

領域の設定

上で追加した画像に当たり判定の領域を設定します。

        const chevron = '0 0 ' +　　　　　//①の(x,y)
                        '100 0 ' +　　　　//②の(x,y) 
                        '100 100 ' +      //③の(x,y)
                        '80 100 ' +       //④の(x,y)     
                        '80 20 ' +        //⑤の(x,y)
                        '20 20 ' +        //⑥の(x,y)
                        '20 100 ' +       //⑦の(x,y)
                        '0 100 ' +        //⑧の(x,y)
                        '0 0';            //⑨の(x,y)(1個目と同じ)
        this.matter.add.gameObject(poly, { shape: { type: 'fromVerts', verts: chevron, flagInternal: true } });
 

文字列にx yを下図①～⑨の順番にスペース区切りで設定します。

matter.add.gameObjectにて画像(poly)と点列(chevron )を紐づけます

結果

以下の用に当たり判定を設定することができました。

180°回転し別のオブジェクトを入れることも可能です。