다각형 그리기

다각형 그리기

사각형

x: 중심점
y: 중심점

this.add.rectangle(x, y, w, h, color, alpha)
const rect = this.add.rectangle(x, y, w, h, 0x9966ff).setOrigin(0, 0)
rect.setStrokeStyle(4, 0xefc53f); // 테두리 그리기

타원

this.add.rectangle(x, y, r, color, alpha)
const circle = this.add.circle(400, 200, 80, 0x9966ff);
circle.setStrokeStyle(4, 0xefc53f);


var circle = new Phaser.Geom.Circle(x, y, radius);

삼각형

각각의 3 꼭지점
const triangle = new Phaser.Geom.Triangle(x1, y1, x2, y2, x3, y3);

x: 중심점
y: 중심점
this.add.triangle(x, y, x1, y1, x2, y2, x3, y3, 0x6666ff);
this.add.triangle(200, 200, 0, 148, 148, 148, 74, 0, 0x6666ff);

폴리곤

삼각형 그리기와 동일 각각의 점을 나열하면 된다.

var polygon = new Phaser.Geom.Polygon(points);

const graphics = this.add.graphics();
const points = new Phaser.Geom.Polygon([{x:0,y:0},  {x:0,y:300},  {x:150,y:150}, {x:0,y:0}]);
graphics.fillPoints(points.points, true); //  색상 채우기
// graphics.strokePoints(points.points, true);
graphics.generateTexture('parallel', 300, 300); // with, height의 크기로 출력 - (되도록 원사이즈가 나오도록 조정)
const parallel = this.add.image(150, 150 'parallel'); // x, y 에 그래프 출력

shape에 physics 추가하기

const rect = this.add.rectangle(x, y, w, h, 0x9966ff).setOrigin(0, 0)
this.physics.add.existing(rect, false);

create

create 메소드에 아래와 같이 추가하면 특정 다각형이 출력된다.

public create () {
  this.add.rectangle(100, 100, 100, 100, 0x6666ff);
}