ことれいのもり

【PixiJS】v8で図形を描画する方法の変更点

はじめに

PixiJS v8では、塗りつぶしの図形を描画するときの書き方が変更されました。

ゲーム制作の途中ですごく手間取ったのでまとめておきます。

前提

バージョン: PixiJS v8

参考リンク

図形の描画方法

図形を指定 → 塗りつぶし、ストロークの順で記述します。

制作途中のゲームではこのように記述しています。

// アンカーの位置を可視化する円の描画
this.centerPoint = new Graphics;
this.centerPoint.circle(0, 0, 5); // 円を描画
this.centerPoint.fill(0xff0000); // 赤色で塗りつぶす
this.centerPoint.stroke({ width: 1, color: 'white' }); // 線は白色

// 画像の大きさを可視化する矩形の描画
this.boundsRect = new Graphics();
this.boundsRect.rect(0, 0, this.sprite.width, this.sprite.height); // 矩形を描画
this.boundsRect.stroke({ width: 1, color: 'white' }); // 線は白色

v7までは beginFill() → 形を指定 → endFill() という順番になっていました。

図形の形状を指定するメソッド名も変更されているそうです。

v7からv8に移行する場合はめんどくさそうですね・・・。

おわりに

変更点の詳細はマイグレーションガイドに載っているのでぜひご覧ください。

現状v8の記事が少なすぎて一つの機能すら追加するのに手間取るので、この記事が役に立つと幸いです。