tintプロパティがすごい便利【pixi.js】

pixi.jsのspriteにはtintというプロパティがあります。

tintとは「色合い」という意味の英単語で、言葉同様にspriteに色合いを付加してくれるものです。

16進数でtintに値を入れるとspriteがその色を足した色になって表示されます。解除する場合は0xFFFFFFにします。

マップの色を変えて雰囲気を出す

背景に使うタイルマップを雰囲気ごとに用意するのはとても大変ですがtintを使えば簡単です。

上の2枚の画像は同じ画像を使っています。1枚目は普通に表示していて2枚目がtintで色を足しています。

2枚目は夕暮れ的な雰囲気を出したかったので少し赤を足しつつ暗くしています。

これは私のこのゲームで使っています。

ダメージ演出に使える

敵キャラなどを攻撃して当たった際に「当たったよ」と分かるように敵キャラの色を白などに一瞬変えてダメージを演出するのもtintでやれば簡単にできます。

攻撃が当たったときにダメージ演出用の色をtintにいれて、終わったらtintに0xFFFFFFを入れてtintを解除します。

ダメージ演出はこのゲームで使ってます(‘ω’)ノ

無い色は足されない?

ちゃんと検証していないんですがどうも元画像に含まれていない色はtintで足せないようです。

tintは足すというより色を抑えて強調するような役割な気がします。だって0xFFFFFFで解除だから白にはできないしね。

ちょっと謎ですが便利なことには違いないです。

 

同カテゴリー記事

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最近作ったゲーム