【Unity】シェーダーを使ってスプライト画像の色を変更する方法

by tama 2018.05.31 自習室 0

ここでは下の動画のように、1枚のスプライト画像から色違いのキャラを作成する、という処理の実装方法を説明します。

なお、この記事は以下の記事で紹介されているものの実装方法を詳しく説明したものとなっています。
やり方が間違っていたのかも知れませんが、こちらの記事のままだとエラーが出てうまく出来なかったので別でまとめさせていただいています。(スクリプトをアタッチするとエラーが出る)

画像の色相を変更する

また、この記事で紹介している方法を使って敵を量産した《SHOGI SHOOTING》というゲームをiOS/Androidでリリースしてます。もしよかったらプレイしてみてください。

環境

Unity 2017.3.1f1

このページの構成

ポイント

手順としては以下のとおりです。: ① 色を変えたいスプライト画像を表示する。; ② 色を変えるためのシェーダーを作成する。; ③ ②で作成したシェーダーを適用するマテリアルを作成する。; ④ ③で作成したマテリアルをスプライト画像にアタッチする。; ⑤ マテリアルの値を変更して色を変える。

スプライト画像の表示

始めに、色変更したいスプライト画像をシーンビューにドラッグ＆ドロップして表示させておいてください。

シェーダーの作成

「Project」から「Create」-「Shader」-「Standard Surface Shader」を選択してシェーダーを作成します。名前はなんでも良いのですが、ここでは元の記事と合わせて”HsvUI”という名前にしています。

作成した”HsvUI”をダブルクリックして”HsvUI.shader”を開き、以下のスクリプトをペタッと全部貼り付けてください。

Shader "Custom/HsvUI"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Hue ("Hue", Float) = 0         //色相
        _Sat ("Saturation", Float) = 1  //彩度
        _Val ("Value", Float) = 1       //明度

        _Color ("Tint", Color) = (1,1,1,1)

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15

        [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
    }

    SubShader
    {
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp]
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
            Name "Default"
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 2.0

            #include "UnityCG.cginc"
            #include "UnityUI.cginc"

            #pragma multi_compile __ UNITY_UI_CLIP_RECT
            #pragma multi_compile __ UNITY_UI_ALPHACLIP

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
                UNITY_VERTEX_INPUT_INSTANCE_ID
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                float2 texcoord  : TEXCOORD0;
                float4 worldPosition : TEXCOORD1;
                UNITY_VERTEX_OUTPUT_STEREO
            };

            fixed4 _Color;
            fixed4 _TextureSampleAdd;
            float4 _ClipRect;
            half _Hue, _Sat, _Val;

            fixed3 shift_col(fixed3 RGB, half3 shift)
            {
                fixed3 RESULT = fixed3(RGB);
                float VSU = shift.z*shift.y*cos(shift.x*3.14159265/180);
                float VSW = shift.z*shift.y*sin(shift.x*3.14159265/180);

                 RESULT.x = (.299*shift.z+.701*VSU+.168*VSW)*RGB.x
                     + (.587*shift.z-.587*VSU+.330*VSW)*RGB.y
                     + (.114*shift.z-.114*VSU-.497*VSW)*RGB.z;

                 RESULT.y = (.299*shift.z-.299*VSU-.328*VSW)*RGB.x
                     + (.587*shift.z+.413*VSU+.035*VSW)*RGB.y
                     + (.114*shift.z-.114*VSU+.292*VSW)*RGB.z;

                 RESULT.z = (.299*shift.z-.3*VSU+1.25*VSW)*RGB.x
                     + (.587*shift.z-.588*VSU-1.05*VSW)*RGB.y
                     + (.114*shift.z+.886*VSU-.203*VSW)*RGB.z;

                return (RESULT);
            }

            v2f vert(appdata_t v)
            {
                v2f OUT;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
                OUT.worldPosition = v.vertex;
                OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

                OUT.texcoord = v.texcoord;

                OUT.color = v.color * _Color;
                return OUT;
            }

            sampler2D _MainTex;


            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
                #ifdef UNITY_UI_CLIP_RECT
                color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
                #endif

                #ifdef UNITY_UI_ALPHACLIP
                clip (color.a - 0.001);
                #endif

                half3 shift = half3(_Hue, _Sat, _Val);

                return fixed4( shift_col(color, shift), color.a);
            }


        ENDCG
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

Shader "Custom/HsvUI"

{

Properties

{

[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}

_Hue ("Hue", Float) = 0 //色相

_Sat ("Saturation", Float) = 1 //彩度

_Val ("Value", Float) = 1 //明度

_Color ("Tint", Color) = (1,1,1,1)

_StencilComp ("Stencil Comparison", Float) = 8

_Stencil ("Stencil ID", Float) = 0

_StencilOp ("Stencil Operation", Float) = 0

_StencilWriteMask ("Stencil Write Mask", Float) = 255

_StencilReadMask ("Stencil Read Mask", Float) = 255

_ColorMask ("Color Mask", Float) = 15

[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0

}

SubShader

{

マテリアルの作成

次にマテリアルを作成します。「Project」から「Create」-「Material」を選択してください。

これも名前はなんでも良いのですが、ここでは”M_ChangeColor”という名前にしています。

このマテリアルに先ほど作成したシェーダーを適用します。
作成したマテリアルを選択し、「inspector」から「Shader」-「Custom」-「HsvUI」を選択してください。(HsvUIのところはシェーダー作成時につけた名前が表示されるので、違う名称になっているかも知れません)

最後に、スプライトにこのマテリアルを適用します。
スプライトを選択し、「inspector」から「Sprite Renderer」-「Material」に先ほど作成したマテリアルをドラッグ＆ドロップしてください。

以上で準備は完了です！

色の変更

スプライトの「inspector」から「M_ChangeColor」の「Hue」「Saturation」「Value」あたりの値を変えてみてください。スプライト画像の色が変更されると思います。（Hueは色相、Saturationは彩度、Valueは明度の値です）

コメントを残すコメントをキャンセル

Unity初めての人に1冊おすすめするならこれ。今まで読んだ中で1番わかりやすかったし、そもそもどんなスクリプトを作らないといけないのか、の考え方から説明してくれている本はこれくらいだと思う。Unityのバージョンが上がるたびに最新版を出されているので、買うときは最新版が出てないか調べてみてください。

初めての人にもう1冊おすすめするならこちら。ビジュアル綺麗なゲームができるので作ってて楽しい。あとねじ子がかわいい。

スマホアプリを作りたいならこちらの本をおすすめします。サンプルゲームがスマホアプリ化を前提に作られてますし、マネタイズについても書かれています。特に2Dアクション、放置ゲーを作りたいなら読んでおいて損はないと思います。

「Unityの教科書」の著者が書いているC#の入門書。説明が分かりやすいし、ゲームを題材にするなどUnityを使う人に向けて書かれている印象があります。

テトリスを題材に、プログラミングする時の考え方を説明してくれている本。大きな問題を小さくして少しずつ解決していく過程が丁寧に説明されているので、プログラムをどう作ればいいか分からない人は読んでみると勉強になると思います。個人的にはすごく良かった本ですが、文体や言い回しに癖があって合わない人は合わないと思うので、買う時は試し読みしてからをオススメします。

開発者の生き方全般について書かれている本。やる気が出ない時に読むと復活できたりすることもあるので、個人的に重宝してます。

Arduino使いたいなら必携の本だと思います。必要な部品の入手方法から実装まで、基本的なパターンはほぼ網羅されてます。

環境

このページの構成

ポイント

スプライト画像の表示

シェーダーの作成

マテリアルの作成

色の変更

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル