1. 程式人生 > 其它 >【Unity】UI或3D場景自動設定漸變色背景

【Unity】UI或3D場景自動設定漸變色背景

技術標籤:UGUI

給定一組色值(或者多組色值,每次隨機取一組),初始化時建立圖片並賦值給UI的Image或3D場景的Sprite。從下/左往上/右,按曲線漸變

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

[RequireComponent(typeof(Image))]
public class BgGradient : MonoBehaviour
{
    public enum GradientType
    {
        None,
        Vertical,
        Horizontal,
        Diagonal
    }

    private Image bgImage;

    [SerializeField, Header("漸變方式")]
    private GradientType gradientType = GradientType.Vertical;

    [SerializeField, Header("開始顏色")]
    private Color startColor = Color.white;
    [SerializeField, Header("結束顏色")]
    private Color endColor = Color.black;

    [SerializeField, Header("漸變曲線(0~1)")]
    private AnimationCurve gradientCurve = new AnimationCurve(new Keyframe(0,0),new Keyframe(1,1));

    private void Awake()
    {
        bgImage = GetComponent<Image>();
    }

    private void Start()
    {
        SetGradientColor();
    }

    private void Update()
    {
        if(Input.GetKeyDown(KeyCode.Alpha1))
        {
            gradientType = GradientType.None;
            SetGradientColor();
        }
        if(Input.GetKeyDown(KeyCode.Alpha2))
        {
            gradientType = GradientType.Vertical;
            SetGradientColor();
        }
        if(Input.GetKeyDown(KeyCode.Alpha3))
        {
            gradientType = GradientType.Horizontal;
            SetGradientColor();
        }
        if(Input.GetKeyDown(KeyCode.Alpha4))
        {
            gradientType = GradientType.Diagonal;
            SetGradientColor();
        }
    }

    private void SetGradientColor()
    {
        //建立Texture2D
        Vector2Int imageSize = new Vector2Int(Screen.width,Screen.height);
        Texture2D texture2D = new Texture2D(imageSize.x,imageSize.y);
        //遍歷畫素點
        switch(gradientType)
        {
            case GradientType.Vertical:
                for(int y = 0; y < imageSize.y; y++)
                {
                    Color pixelColor = GetColorByCurve(1.0f * y / imageSize.y);
                    for(int x = 0; x < imageSize.x; x++)
                    {
                        texture2D.SetPixel(x,y,pixelColor);
                    }
                }
                break;
            case GradientType.Horizontal:
                for(int x = 0; x < imageSize.x; x++)
                {
                    Color pixelColor = GetColorByCurve(1.0f * x / imageSize.x);
                    for(int y = 0; y < imageSize.y; y++)
                    {
                        texture2D.SetPixel(x,y,pixelColor);
                    }
                }
                break;
            case GradientType.Diagonal:
                for(int x = 0; x < imageSize.x; x++)
                {
                    for(int y = 0; y < imageSize.y; y++)
                    {
                        Color pixelColor = GetColorByCurve(0.5f * x / imageSize.x + 0.5f * y / imageSize.y);
                        texture2D.SetPixel(x,y,pixelColor);
                    }
                }
                break;
            default:
                for(int x = 0; x < imageSize.x; x++)
                {
                    for(int y = 0; y < imageSize.y; y++)
                    {
                        texture2D.SetPixel(x,y,startColor);
                    }
                }
                break;
        }
        texture2D.Apply();
        //建立Sprite
        Sprite sprite = Sprite.Create(texture2D,new Rect(0,0,imageSize.x,imageSize.y),new Vector2(0.5f,0.5f));
        sprite.name = "GradientBg";
        if(bgImage != null)
            bgImage.sprite = sprite;
    }

    private Color GetColorByCurve(float ratio)
    {
        float curveValue = gradientCurve.Evaluate(ratio);
        curveValue = Mathf.Clamp01(curveValue);
        return Color.Lerp(startColor,endColor,curveValue);
    }

}

可以多個顏色漸變···看著不怎麼實用···

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

[RequireComponent(typeof(Image))]
public class BgGradientMult : MonoBehaviour
{
    public enum GradientType
    {
        None,
        Vertical,
        Horizontal,
        Diagonal
    }

    [System.Serializable]
    public class GradientColorNode
    {
        [Range(0,1)]
        public float ratio = 0;
        public Color color = Color.white;

        public GradientColorNode(float _ratio,Color _color)
        {
            ratio = _ratio;
            color = _color;
        }
    }

    private Image bgImage;

    [SerializeField, Header("漸變方式")]
    private GradientType gradientType = GradientType.Vertical;

    [SerializeField, Header("漸變曲線(0~1)")]
    private AnimationCurve gradientCurve = new AnimationCurve(new Keyframe(0,0),new Keyframe(1,1));

    [SerializeField, Header("漸變顏色")]
    private List<GradientColorNode> gradientColorNodeList = new List<GradientColorNode>() { new GradientColorNode(0,Color.white),new GradientColorNode(1,Color.black) };

    private void Awake()
    {
        bgImage = GetComponent<Image>();
    }

    private void Start()
    {
        SetGradientColor();
    }

    private void Update()
    {
        if(Input.GetKeyDown(KeyCode.Alpha1))
        {
            gradientType = GradientType.None;
            SetGradientColor();
        }
        if(Input.GetKeyDown(KeyCode.Alpha2))
        {
            gradientType = GradientType.Vertical;
            SetGradientColor();
        }
        if(Input.GetKeyDown(KeyCode.Alpha3))
        {
            gradientType = GradientType.Horizontal;
            SetGradientColor();
        }
        if(Input.GetKeyDown(KeyCode.Alpha4))
        {
            gradientType = GradientType.Diagonal;
            SetGradientColor();
        }
    }

    private void SetGradientColor()
    {
        //建立Texture2D
        Vector2Int imageSize = new Vector2Int(Screen.width,Screen.height);
        Texture2D texture2D = new Texture2D(imageSize.x,imageSize.y);
        //遍歷畫素點
        switch(gradientType)
        {
            case GradientType.Vertical:
                for(int y = 0; y < imageSize.y; y++)
                {
                    Color pixelColor = GetColorByCurve(1.0f * y / imageSize.y);
                    for(int x = 0; x < imageSize.x; x++)
                    {
                        texture2D.SetPixel(x,y,pixelColor);
                    }
                }
                break;
            case GradientType.Horizontal:
                for(int x = 0; x < imageSize.x; x++)
                {
                    Color pixelColor = GetColorByCurve(1.0f * x / imageSize.x);
                    for(int y = 0; y < imageSize.y; y++)
                    {
                        texture2D.SetPixel(x,y,pixelColor);
                    }
                }
                break;
            case GradientType.Diagonal:
                for(int x = 0; x < imageSize.x; x++)
                {
                    for(int y = 0; y < imageSize.y; y++)
                    {
                        Color pixelColor = GetColorByCurve(0.5f * x / imageSize.x + 0.5f * y / imageSize.y);
                        texture2D.SetPixel(x,y,pixelColor);
                    }
                }
                break;
            default:
                if(gradientColorNodeList.Count > 0)
                {
                    Color pixelColor = gradientColorNodeList[0].color;
                    for(int x = 0; x < imageSize.x; x++)
                    {
                        for(int y = 0; y < imageSize.y; y++)
                        {
                            texture2D.SetPixel(x,y,pixelColor);
                        }
                    }
                }
                break;
        }
        texture2D.Apply();
        //建立Sprite
        Sprite sprite = Sprite.Create(texture2D,new Rect(0,0,imageSize.x,imageSize.y),new Vector2(0.5f,0.5f));
        sprite.name = "GradientBg";
        if(bgImage != null)
            bgImage.sprite = sprite;
    }

    private Color GetColorByCurve(float ratio)
    {
        for(int i = 1; i < gradientColorNodeList.Count; i++)
        {
            if(ratio < gradientColorNodeList[i].ratio)
            {
                float curveValue = (ratio - gradientColorNodeList[i - 1].ratio) / (gradientColorNodeList[i].ratio - gradientColorNodeList[i - 1].ratio);
                curveValue = gradientCurve.Evaluate(curveValue);
                return Color.Lerp(gradientColorNodeList[i - 1].color,gradientColorNodeList[i].color,curveValue);
            }
        }
        return Color.white;
    }

}