tintプロパティがすごい便利

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

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

tintのイメージ

正確には付加というよりかはtintで指定した色を上限に絞り込むような感じで変化します。

0xFFFFFFの白色のスプライトのtintを0xFF0000にすると赤になります。

しかし0x000000の黒色のスプライトのtintを0xFF0000にしても色は黒のままです。つまり色を足してるわけではないってことです。

だからスプライトの色を指定の色で絞り込む感じだと私は思ってます(誰かもっとうまい説明して)。

解除する場合は0xFFFFFFにすると元通りになります。

ダメージ演出に使える

敵キャラなどを攻撃して当たった際やプレイヤーキャラがダメージを受けた際に「当たったよ」と分かるようにキャラの色を赤や黒などに一瞬変えてダメージを演出するのが一般的だと思いますがそれをtintでやれば簡単にできます。

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

すごく簡単で便利です。

カラフルなパーティクルにも使える

ゲームではカラフル演出がある方が見栄えがします。なのでカラフルなパーティクルがあると便利です。

そんなカラフルなパーティクルの作り方をQiitaに投稿しています。

tintが色を絞る機能なら最初にすべてMaxになってる白でスプライトを作っておけば何色にも変えられるという寸法です。

すごく簡単で便利な技です。

◇ Posted by いんわん