はじめに
PixiJS v8では、塗りつぶしの図形を描画するときの書き方が変更されました。
ゲーム制作の途中ですごく手間取ったのでまとめておきます。2025-03-17
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の記事が少なすぎて一つの機能すら追加するのに手間取るので、この記事が役に立つと幸いです。