Phaser 3 | 簡単な図形を描画する方法

2020-07-11

Phaser3のGraphicsを利用して簡単な図形を描画する方法です

Graphicsの基本コード

graphics()を利用します

全てではないと思いますが、graphics()内に配列にて指定していく事が可能

let graphics = this.add.graphics({lineStyle: {width: 1,color: 0xffffff},fillStyle:{color: 0xffffff}});

本家チュートリアル等でもgraphics()で先にオウジェクトが図形である事を定義した後、値を与えて図形の形や色などを指定していく方法が多いかと思います

let graphics = this.add.graphics();
    graphics.lineStyle(1,0xffffff);

Graphicsで四角形を描画する

塗りつぶしの場合、fillStyle()で塗りつぶしの色を指定して、fillRect()で四角形を描画します
fillStyleの因数は色コードと透明度です：fillStyle(color,alpha);
fillRectはX座標、Y座標、横幅、高さになります：fillRect(x,y,width.height)

let graphics = this.add.graphics();
    graphics.fillStyle(0x800000, 1).fillRect(10, 10, 100, 100);

四角形を描画する表示サンプル

See the Pen Phaser 3 add graphics fillStyle by yochans (@yochans) on CodePen.

Graphicsで円形を描画する

塗りつぶしの場合、fillTriangle()で円形の描画が可能です
fillCircle()はX座標とY座標と半径を指定します
fillCircle(X座標,Y座標,半径)
座標は円の中心点となります

let graphics = this.add.graphics();
    graphics.fillStyle(0x800000, 1).fillCircle(60, 60, 50);

円形を描画する表示サンプル

See the Pen Phaser 3 add graphics fillCircle by yochans (@yochans) on CodePen.

Graphicsで三角形を描画する

塗りつぶしの場合、fillTriangle()で三角形の描画が可能です
fillTriangle()は３つの頂点を指定します
fillTriangle(X座標,Y座標,X座標,Y座標,X座標,Y座標)

let graphics = this.add.graphics();
    graphics.fillStyle(0x800000, 1).fillTriangle(50, 10, 10, 100, 90, 100);

三角形を描画する表示サンプル

See the Pen Phaser 3 add graphics fillTriangle by yochans (@yochans) on CodePen.

Phaser3 グラフィックス,Phaser3

Posted by Yousuke.U