Phaser3 : 凹面の当たり判定を自動で生成してみる⑤ 簡単な三角形分割

前回に引き続きメッシュの自動生成を行っていきます。

ベクトルが変わる部分を保存する

前回で輪郭の抽出ができたので、今回は応用していきたいと思います。
探索するベクトルが変わる部分を保存すれば輪郭の頂点だけを取得できるはずです。

let prevmov =new Phaser.Math.Vector2(mov.x, mov.y);

while (!(tmp.x === origin && tmp.y === 0)) {
    tmp = this.GetBoarder(tmp, mov);
    if (!(prevmov.x === mov.x && prevmov.y === mov.y)) {
        this.border.push(new Phaser.Math.Vector2(tmp.x, tmp.y));
    }
    prevmov.set(mov.x, mov.y);
}
~~
for (let p of this.border) {

    let dx = posX + p.x;
    let dy = posY + p.y;

    let pic = this.add.graphics();
    pic.x = dx;
    pic.y = dy;
    pic.fillStyle(0xff0000, 1);
    pic.fillPointShape(new Phaser.Math.Vector2(0, 0), 1.5);
}

実行結果がこちらです。 うまく頂点を取得できたようです。

簡単な三角形分割を実装してみる

こんどはこちらの記事を参考に三角形分割を実装してみたいと思います。 Javaゲーム制作記 任意多角形の三角形分割 MapとFilterを使って最も遠い点を取得します。
border配列には反時計回りに頂点が入っていますので、border配列の番号続きをそのまま両隣りの頂点として扱えます。

while (this.border.length > 3) {
    //最も遠い頂点とその隣の頂点を取得する
    let max = Math.max.apply(null, this.border.map(function (o) { return o.x + o.y; }))
    let farPoint = this.border.filter(function (x) { return x.x + x.y === max })[0];
    let nextPoint1 = this.border[Math.abs(this.border.indexOf(farPoint) - 1 % this.border.length)]
    let nextPoint2 = this.border[Math.abs(this.border.indexOf(farPoint) + 1 % this.border.length)]

    let line = new Phaser.Geom.Line(nextPoint1.x + posX, nextPoint1.y + posY, nextPoint2.x + posX, nextPoint2.y + posY);
    lines.strokeLineShape(line);
    console.log(farPoint, nextPoint1, nextPoint2)
    this.border.splice(this.border.indexOf(farPoint),1)
}

実行結果がこちらです。 スプライトを変更してみても一応三角形分割できていることがわかります。