Phaser 3 | graphics()で簡単な図形を描画する方法

2023-02-11Phaser3 グラフィックス,Phaser3

Phaser 3 | graphics()で簡単な図形を描画する方法

Phaser3のGraphics()を利用して簡単な図形を描画する方法とサンプルコードを紹介しています。

Graphicsの基本コード

ここではPhaser3で図形を描画する事が可能な関数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