Unity スキルのクールダウンシステム作り方
概要
Unity系の記事をいくつか作成している山田です。
今回はアクションRPG等でよくあるクールダウンシステム用のShader Graphを作成したのでご紹介します。
スキル共通のグローバルクールダウンと
個別のクールダウンがそれぞれあるタイプです。
Shader Graphの基礎
まずはShader Graphを作成してください。
Shader Graphを知っている方は読み飛ばしてください。
Unityのバージョンによって異なると思いますが、
今回はUIのImageに設定するので Canvas Shader Graph にしてください。
このようなウィンドウができると思います。
Blackboard
この画面だと左上のウィンドウです。
これはShader Graphに設定するパラメータを設定できるものです。
右上の＋マークを押して型を選択して、パラメータ名を設定できます。
Graph Inspector
この画面だと右下のウィンドウです。
Blackboardで設定したパラメータの詳細設定を確認できるイメージです。
基本はDefault Valueに初期値を設定しつつ確認していきます。
Main Preview
この画面だと右上のウィンドウです。
Previewの名の通りです(笑)
Node
背景の黒い部分を右クリック、Create Nodeを選択すると下のようにたくさんのNode がでるのでここから必要な Nodeを組み合わせていきます。
クールダウン Shader Graph 実装
クールダウンを視覚的に表すための半透明の円を作成していきます。
まずは、下の画像を真似て作ってみてください。
UV
UVノードはテクスチャ座標を取得する際に使います。
テクスチャ座標といわれてもピンとこないと思いますが、Shader Graphの最初に使われるNodeって認識で大丈夫だと思います。
Distance
入力されたAとBの、距離を返すものです。
今回もそうですが、最も一般的な使い方はUVとVector2(0.5f, 0.5f)を入れて円のグラデーションを取り出すのに使用します。
Step
しきい値をとって2値化することができます。（Edge未満なら0, 以上なら1）
今回のようにグラデーションになっているものの境界を特定の値ではっきりさせて白と黒にわけるのに使用します。
Power
入力Bにお好みの値をいれて真ん中の黒い部分の広さの調整してます。
Multiply
掛算をすることができます。
基本的な動作は両方で共通して色がついている部分が残るイメージです。
クールダウンの値での満ち欠け
まずは下を真似して作成してください。
Polar Coordinates
R成分の円形グラデーションと
G成分の時計回りグラデーションが含まれているNodeです。
今回は円形の満ち欠けなので時計回りグラデーションを利用していきます。
Split
入力された要素を分割することができます。
出力にはRGBAと色の設定に見えますが、あくまでも分割する機能です。
今回のPolar CoordinatesはＲ成分とＧ成分の２つに分割できます。
時計回りグラデーションなのでＧ要素の出力を利用します。
CoolDown
クールダウンの値によって円の満ち欠けを行いたいので、パラメータを作成します。
Blackboardの＋押して、Float、CoolDownを作成をします。
CoolDownのDefault Valueを弄るとStepの見た目が回転するのがわかるはずです。
ここでCoolDownが-0.5の時に真っ白、0.5の時に真っ黒になるはずです。
Remap
そこでRemapを追加して-0.5から0.5の値を0から1となるように変換します。
Rotate
最後に上から満ち欠けして欲しいので、Rotateノードを使って回転させます。
Rotationを180に設定
UnitをDegreesに設定して180度回転させます。
Iconとの合成
これまで作ってきた、満ち欠けする半透明の円をIcon画像と合成していきます。
まずはパラメータを作成します。
Texture2D型のMainTex
Color型のColorです。
※MainTextはShader Graphにおける予約語のようなもので今回のIconのSpriteの役割があるので名前を変えないでください。
Sample Texture 2D
パラメータのMainTexと組み合わせることで設定した画像やRGBAそれぞれに分割した色を取り出したり出来ます。
今回はRGBAの出力とパラメータのColor（Defalut Valueを灰色に設定）と掛け合わせることで暗い画像に変換しています。
最後にここまで作ってきた半透明の円をIconにAddで追加することでクールダウンのは完成です。
クールダウンが０の時は元の画像を表示
このままだとクールダウンが０の場合も暗い画像になってしまうので条件分岐で変えていきます。
Comparison
入力AとＢを比較してbool型のデータを出力します。
今回はCoolDownが0より大きい場合はtrue,0以下はfalseを出力しています。
Branch
入力された値がTrueならば入力Trueを出力
FalseならはFalseの画像を出力します。
今回はクールダウンが0より大きい場合は加工した画像を
0以下の場合は元の画像をそのまま出すようにしています。
最後にBase Colorに設定したらShader Graphの完成です。お疲れ様です。
使い方も軽く紹介しておきます。
作成したShader Graphの下の丸いアイコンがMaterialです。
Materialを選択した状態で、「Ctrl + D」でコピーできるのですが、コピーしたMaterialはパラメータを変更することができます。
任意のImageのMaterialを今回作成したものに設定してCoolDownのパラメータを0から1の間で変更してみてください。
楽しい
Materialのパラメータをスクリプトから変更するには以下のソースのようにします。
CoolDown(float percentage)メソッドに対し、0から1までの値をいれてください。
public class SkillImage : MonoBehaviour
{
private Image _image;
private static readonly int CoolDownId = Shader.PropertyToID("_CoolDown");
public void Awake()
{
_image = GetComponent<Image>();
}
public void CoolDown(float percentage)
{
_image.material.SetFloat(CoolDownId, percentage);
}
}パラメータを弄るだけであらゆるSpriteに適応できるので汎用性が高く、気に入っています。
役立てていただけると幸いです。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか？