【PIXI.js】Graphicsのtintで塗りつぶしを設定する方法

beginFillで塗りつぶしたPIXI.Graphicsの色をtintで指定しようとしたら、上書きされずに色がブレンドされたので、その解決策についてまとめる。

PIXI.Graphicsで作成したグラフィックシェイプを塗りつぶす方法はbeginFillとtintの2通りある。

• beginFill・・・他のグラフィックスメソッド（lineToやdrawCircleなど）から​​endFillが呼び出されるまでの描画を単色で塗りつぶす

const circle = new PIXI.Graphics()
     .beginFill(0xff00ff)
     .drawCircle(0, 0, 100)
     .endFill()

• tint・・・グラフィックシェイプの色合いを指定する

circle.tint = 0xff00ff

後からグラフィックシェイプの色を変更したい場合は、tintで色合いを指定する方がおすすめです。

グラフィックシェイプの色合いがブレンドされる

ただし、beginFillで塗りつぶした色をtintで上書き指定すると、色合いがブレンドされてしまう。
tintは「塗りつぶし」ではなくあくまで「色合い指定」のプロパティであるため。

例として、beginFillで青色に塗りつぶした色を2秒後にtintで緑色に指定する。
そうすると、グラフィックシェイプは緑ではなく、黒色に変色してしまう。

const circle = new PIXI.Graphics()
     .beginFill(0x0000ff)
     .drawCircle(0, 0, 100)
     .endFill()
 
setTimeout(() => {
  circle.tint = 0x00ff00
}, 2000)

beginFillでは0xffffffを指定する

PIXI.Graphicsで作成するグラフィックシェイプのbeginFillは無条件で0xffffff(白)を使用し、塗りつぶしたい色はtintで指定する。
つまり、beginFillでは無彩色の白を指定し、その後の色指定は全てtintを使うことでブレンドを防ぐことができる。

以下のコードはbeginFillで0xffffff、tintで青色に塗りつぶし、2秒後にtintで緑色に指定している。
GIFを見ての通りブレンドされることなく、2秒後に緑色に変更されていることが分かる。

const circle = new PIXI.Graphics()
     .beginFill(0xffffff)
     .drawCircle(0, 0, 100)
     .endFill()
circle.tint = 0x0000ff
 
setTimeout(() => {
  circle.tint = 0x00ff00
}, 2000)