Catlike學習筆記(1.2)-使用Unity畫函數圖像

『Catlike系列教程』第二篇來了~今天周六，早上（上午11點）醒來去超市買了一周的零食回來以后就玩了一整天游戲非常有負罪感。現在晚上九點天還亮著感覺像下午7點左右的樣子好像還不是很晚。。。所以就寫一點東西吧。這一篇是「Building a Graph」挑戰一下試試吧。

PART 1 概述

那么大概文章看下來我們預計要做以下事情。

• 使用一定數量的小方塊表達函數圖像
• 做一個 Shader 給圖像上色使其更好看
• 給圖像傳入時間參數使其動起來

PART 2 畫函數圖像

首先我們確認一下要支持的功能細節，根據默認攝像機的位置和視野我們就暫定需要畫出函數[-1. 1]之間的圖像，同時可以通過一個條拖動來修改函數的解析度，假設解析度可以是[10,100]，那么我們需要在x=[-1, 1]之間生成[10,100]個方塊。同時動態的調整方塊的大小使其完美銜接。代碼如下：

public class GraphController : MonoBehaviour
{
    [Range(10, 100), SerializeField] private int _resolution;
    [SerializeField] private GameObject _cube;

    // Use this for initialization
    private void Start ()
    {
        _cube.SetActive(false);

        var step = 2f / _resolution;
        var startPosX = -1f;
        var scale = Vector3.one * step;
        for (int i = 0; i < _resolution; i++)
        {
            var pos = new Vector3(startPosX + i * step, Calc(startPosX + i * step), 0);
            var point = Instantiate(_cube, transform);
            point.transform.localPosition = pos;
            point.transform.localScale = scale;
            point.SetActive(true);
        }
    }

    private float Calc(float x)
    {
        return Mathf.Pow(x, 2);
    }
}

根據Calc(float)可以看出我們畫出來曲線是如下函數的圖像。 $y=x^2$ $f(x)=ax+b$

PART 3 給曲線上色

首先我們創建一個 Surface Shader，通過Assets / Create / Standard Surface Shader創建一個新的 Shader。修改代碼如下：

Shader "Custom/ColoredPoint" {
    Properties {
        _Glossiness ("Smoothness", Range(0,1)) = 0.5
        _Metallic ("Metallic", Range(0,1)) = 0.0
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        // 此處將世界坐標傳入IN
        struct Input {
            float3 worldPos;
        };

        half _Glossiness;
        half _Metallic;

        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_BUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_BUFFER_END(Props)

        void surf (Input IN, inout SurfaceOutputStandard o) {
            // 在這里根據世界坐標將方塊染上不同的顏色
            o.Albedo.rgb = IN.worldPos.xyz * 0.5 + 0.5;
            // Metallic and smoothness come from slider variables
            o.Metallic = _Metallic;
            o.Smoothness = _Glossiness;
            o.Alpha = 1;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

運行效果如下~

PART 4 讓曲線動起來

首先曲線之所以會動當然是因為我們將時間作為參數同時傳進去導致的~所以我們首先稍微改一下Calc(float)這個函數讓時間參數也生效～這里用到Mathf.PI是為了圖像從[-1, 1]之間完整的顯示一個周期，大家可以隨便改改試試。

private float Calc(float x)
{
    return Mathf.Sin(Mathf.PI * (x + Time.time));
}

然后直接運行肯定是不行的，我們需要把計算y和設置每個小方塊的位置的代碼移到Update()中去。最終代碼如下：

public class GraphController : MonoBehaviour
{
    [Range(10, 100), SerializeField] private int _resolution;
    [SerializeField] private GameObject _cube;

    private List<Transform> _points;
    private float _step;
    private float _startX;

    // Use this for initialization
    private void Start ()
    {
        _cube.SetActive(false);
        _points = new List<Transform>();
        _step = 2f / _resolution;
        _startX = -1f;

        var scale = Vector3.one * _step;

        for (int i = 0; i < _resolution; i++)
        {
            var point = Instantiate(_cube, transform);
            _points.Add(point.transform);
            point.transform.localScale = scale;
            point.SetActive(true);
        }

    }

    private void Update()
    {
        for (int i = 0; i < _resolution; i++)
        {
            var x = _startX + i * _step;
            var pos = new Vector3(x, Calc(x), 0);
            var point = _points[i];
            point.transform.localPosition = pos;
        }
    }

    private float Calc(float x)
    {
        return Mathf.Sin(Mathf.PI * (x + Time.time));
    }
}

運行效果如圖：

PART 5 總結

這一篇也很簡單啊一邊做一邊寫再隨便劃劃水很快就完成了～最后大家可以下載「Github Repo」查看運行結果和全部代碼~或者到「原文地址」查看更加詳細的過程和思路。

原文鏈接：https://snatix.com/2018/06/09/020-building-a-grap/

本文由 sNatic 發布于『大喵的新窩』 轉載請保留本申明