端が直線にならないHPゲージの作り方(Shader)

2018.09.18
Unity
shader, script, UI

　前回の記事では、両端の形状を維持したまま動くゲージをImageのMaskやFilledを用いて作成しました。このゲージをShaderを用いて作成しました。

1. Shader
2. Script
3. 実行結果

Shader

　作成したShaderは以下の通りです。Imageのカラー変更とImageTypeのFilledは正しく動作するようです。

Shader "Unlit/Gauge"
{
	Properties
	{
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
		
		_Shift("Shift", Range(0 ,1)) = 0
	}
	SubShader
	{
        Tags
        {
            "Queue"="Transparent"
            "IgnoreProjector"="True"
            "RenderType"="Transparent"
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

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

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
            #pragma target 2.0
			
			#include "UnityCG.cginc"
            #include "UnityUI.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
                float4 col : COLOR;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
                fixed4 col : COLOR;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			fixed4 _Color;
			float _Shift;
			
			v2f vert (appdata v)
			{
				v2f o;
                UNITY_SETUP_INSTANCE_ID(v);
                UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o);
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				o.col = v.col;
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				float s = (1 - _Shift) * 0.5;
				float2 coord = float2(saturate(i.uv.x + _Shift * step(s, i.uv.x)), i.uv.y);
                half4 col = tex2D(_MainTex, coord) * i.col;
				half mask = abs(step(1 - _Shift, i.uv.x) - 1);
				col *= mask;
				return col;
			}
			ENDCG
		}
	}
}

Shader "Unlit/Gauge"

{

Properties

{

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

_Shift("Shift", Range(0 ,1)) = 0

}

SubShader

{

Script

　適当なゲームオブジェクトにこのScriptをアタッチし、背景及びゲージ用sprite、先ほどのShaderとスライダーをアタッチすれば動きます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class HPGaugeShader : MonoBehaviour {

    public Sprite preBack, preGauge;
    public Shader shader;
    public GameObject preSlider;

    private GameObject objBack, objGauge, objSlider;
    private Slider slider;
    private Material mat;

	// Use this for initialization
	void Start () {
        Image img;
        RectTransform rect;

        Transform trfCanvas = GameObject.Find("Canvas").transform;
        objBack = new GameObject();
        objBack.transform.SetParent(trfCanvas);
        objBack.transform.localPosition = Vector3.zero;
        objBack.AddComponent<CanvasRenderer>();
        img = objBack.AddComponent<Image>();
        img.sprite = preBack;
        rect = objBack.GetComponent<RectTransform>();
        rect.sizeDelta = new Vector2(img.sprite.rect.width, img.sprite.rect.height);

        objGauge = new GameObject();
        objGauge.transform.SetParent(trfCanvas);
        objGauge.transform.localPosition = Vector3.zero;
        objGauge.AddComponent<CanvasRenderer>();
        img = objGauge.AddComponent<Image>();
        img.sprite = preGauge;
        rect = objGauge.GetComponent<RectTransform>();
        rect.sizeDelta = new Vector2(img.sprite.rect.width, img.sprite.rect.height);
        img.material = new Material(shader);
        mat = img.material;

        objSlider = Instantiate(preSlider, trfCanvas);
        objSlider.transform.localPosition = new Vector3(0, -50f, 0);
        slider = objSlider.GetComponent<Slider>();
    }

    // Update is called once per frame
    void Update () {
        if (Input.GetMouseButton(0))
        {
            mat.SetFloat("_Shift", slider.value);
        }
    }
}

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using UnityEngine.UI;

public class HPGaugeShader : MonoBehaviour {

public Sprite preBack, preGauge;

public Shader shader;

public GameObject preSlider;

private GameObject objBack, objGauge, objSlider;

private Slider slider;

private Material mat;

// Use this for initialization

void Start () {

Image img;

RectTransform rect;

Transform trfCanvas = GameObject.Find("Canvas").transform;

objBack = new GameObject();

objBack.transform.SetParent(trfCanvas);

objBack.transform.localPosition = Vector3.zero;

objBack.AddComponent<CanvasRenderer>();

img = objBack.AddComponent<Image>();

img.sprite = preBack;

rect = objBack.GetComponent<RectTransform>();

rect.sizeDelta = new Vector2(img.sprite.rect.width, img.sprite.rect.height);

objGauge = new GameObject();

objGauge.transform.SetParent(trfCanvas);

objGauge.transform.localPosition = Vector3.zero;

objGauge.AddComponent<CanvasRenderer>();

img = objGauge.AddComponent<Image>();

img.sprite = preGauge;

rect = objGauge.GetComponent<RectTransform>();

rect.sizeDelta = new Vector2(img.sprite.rect.width, img.sprite.rect.height);

img.material = new Material(shader);

mat = img.material;

objSlider = Instantiate(preSlider, trfCanvas);

objSlider.transform.localPosition = new Vector3(0, -50f, 0);

slider = objSlider.GetComponent<Slider>();

}

// Update is called once per frame

void Update () {

if (Input.GetMouseButton(0))

{

mat.SetFloat("_Shift", slider.value);

}

実行結果

　実行結果はこちらです。
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span><span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>