Unity_關于我寫爆裂魔法那些事(氛圍渲染流彩描邊星星與其發射系統的實作)-有解無憂

Unity_關于我寫爆裂魔法那些事

- Unity_關于我寫爆裂魔法那些事
- - 氛圍渲染流彩描邊星星與其發射系統的實作
  - - 效果
    - 總體思路
    - 具體實作及其分析
    - - 首先是星星的mesh怎么繪制：
      - 然后是星星的shader怎么寫：
      - 最后手搓發射器
    - 結語

Unity_關于我寫爆裂魔法那些事

背景概：早在今年上半年看了素晴的劇場版紅傳說后，對惠惠的角色喜愛更多了幾分（劃掉），對爆裂魔法的喜愛又多了幾分，嗯，而剛好在不久后的一次與室友的專案合作中，我主擔了特效師的位置，當時學了shadergraph，然后感覺無所不能之后決定去搓一手爆裂魔法，于是新紅魔族爆裂魔法選手詭奇他來了，不過由于當時技術力的原因，只做了一個簡易的魔法陣展開，在多個月以后的最近，我又重拾了爆裂魔法專案，且前不久看到了b站大佬（啊，也不能這么說，好多站點都有他的號）搓的爆裂魔法，產生了一些靈感，在加之技術力的提升，最近搓了起來，這邊貼一下大佬的視頻鏈接：大佬的爆裂魔法
技術涉及概：本篇主要講如何實作爆裂魔法場景效果中的彩色星星這個東西，以及手搓了一個簡易的發射器，涉及到的技術主要有：shader，mesh繪制，c#對游戲物體的運用，

氛圍渲染流彩描邊星星與其發射系統的實作

效果

想要抄的原動漫效果截圖
最終實作的星星效果（由于圖片大小限制，導致效果有點小差別）

以上是關于本篇實作的效果截圖展示，還原度一般，仍存在一些問題，但最終的效果基本是可以用了，感興趣的繼續往下看，

總體思路

發射器的事情先不說，先說這個星星要怎么做，通過觀察原著中的一些場景，可以得到以下特點：
1.星星的描邊是彩色發光的而且會變色
2.中間不是純色，也不是單純的變色，更像是星空的感覺
3.除了大小變化以外，星星還會有粗細變化（這個在開篇的大佬那邊有提到，我也是通過大佬的文章才注意到這個問題）
4.除了平移以外，還會繞中心點自轉
特點大概就如上四點，關于實作的話：
1.彩色光邊首先確定需要在渲染上下功夫，即在shader中做，而且由于只是一個描邊，所以我更傾向于單獨開一個pass去做這個描邊和中間的部分分開，
2.中間的星空感覺同樣在渲染上下功夫，我是粗暴的在網上找了一個星空圖，截取一部分在ps中做了鏡像處理，然后作為主紋理去渲染就可，
3.星星的粗細變化其實最開始想不到要怎么做，中間想過用mesh但是苦于一方面沒試過動態mesh，一方面對mesh的熟悉遠遠不夠，所以更傾向于依然在shader上下功夫，直到前幾天彬哥做了個東西，讓我茅塞頓開，決定就用mesh（這邊貼上彬哥有關動態mesh的文章鏈接：Unity中根據平面的多邊形點的資料，生成簡單的立體網格）
4.這個就簡單了，只是相關c#腳本操作游戲物體的一些東西而已，我就直接在星星的腳本上動手就可
在做完星星后，要將這玩意作為一個元素，發射很多個來營造一個場景氛圍，首先肯定想到粒子系統，但無奈由于每一個星星獨立的mesh在變，所以掛不到粒子系統上去，最終決定手搓個簡單的發射器，在這個發射器中，我需要涉及到如下內容：在一定范圍內隨機的生成位置，一定范圍內隨機的生成角度，一定范圍內隨機的發射方向，一定范圍內隨機移動速度，一定范圍內隨機平轉速度，一定范圍內隨機生命周期等，（基本思路都大同小異）

具體實作及其分析

首先是星星的mesh怎么繪制：

關于這個mesh我想到倆種畫法，一種是單層雙面繪制，一種是雙層繪制，單層的話只需要9個頂點，按照不同方向畫倆便三角形就可以，雙層的話需要至少14個頂點，且要控制好厚度，很麻煩，于是出于懶鬼本懶得緣故，我啪一下就選擇了單層雙面繪制，
這邊關于這個星星我畫了一個草圖，來定下頂點位置和三角繪制的順序，
對照上圖可以得出具體的9個頂點的位置，有關2 4 6 8這四個點，我給其初始位置設定在13 45 57 71這些連線的中點上，也就是坐標都是0.5相關，所有頂點的z我均按照0走了，保證其繪制出的mesh在一個平面上，
綜上所述，初始頂點坐標資訊如下：

PosList = new Vector3[] {
            new Vector3(0,0,0),new Vector3(0,1,0),new Vector3(-0.5f,0.5f,0),
            new Vector3(-1,0,0),new Vector3(-0.5f,-0.5f,0),new Vector3(0,-1,0),
            new Vector3(0.5f,-0.5f,0),new Vector3(1,0,0),new Vector3(0.5f,0.5f,0)
        };

初始三角繪制資訊如下：

mesh.triangles = new int[] { 
            2, 1, 8,     2, 8, 0,     3, 2, 4,     2, 0, 4,
            4, 0, 6,     4, 6, 5,     6, 8, 7,     6, 0, 8,
            8, 1, 2,     0, 8, 2,     4, 2, 3,     4, 0, 2,
            6, 0, 4,     5, 6, 4,     7, 8, 6,     8, 0, 6
        };

然后去實作星星的粗細變化，要變化粗細也就變中間四個點的坐標就行，由于我直接將模型空間原點設定在星星的中心，也就是0號頂點的位置，所以要縮放這四個點也就直接讓其頂點在初始頂點位置的基礎上乘上一個縮放比就行了，（代碼在uv之后一起貼）
涉及到紋理渲染這些東西，mesh的uv自然還是要注意，因為頂點位置在動，所以為了防止uv出現意料外的拉扯，我決定讓頂點uv跟著一起動，于是我按照上圖將頂點坐標的xy值進行一定運算使其成為uv坐標下的uv，已知模型空間下xy的范圍都是[-1,1],要讓其變化到uv坐標下的[0,1]，就直接讓其先加一到[0,2],再讓其除以2就行了，于是mesh的繪制就這些內容，mesh的更新我封裝到了一個方法中，代碼如下：

private void Mesh_Update()
    {
        //mesh更新方法
        //克隆頂點基礎坐標
        Vector3[] pos = new Vector3[9];
        for(int i = 0;i<9;i++)
        {
            pos[i] = PosList[i];
        }
        //對部分頂點進行偏移
        pos[2] *= Mul_width;
        pos[4] *= Mul_width;
        pos[6] *= Mul_width;
        pos[8] *= Mul_width;
        mesh.vertices = pos;

        //uv計算
        Vector2[] uv = new Vector2[9];
        for (int i = 0; i < 9; i++)
        {
            //通過模型空間下的頂點坐標xy去計算uv坐標下的uv
            uv[i].x = (pos[i].x+1)/2;
            uv[i].y = (pos[i].y+1)/2;
        }
        mesh.uv = uv;
    }

然后是星星的shader怎么寫：

首先是想到去把這個彩色的描邊給做出來（注：這段只是說描邊那一層怎么渲染出彩色效果，但還不是描邊效果），早在之前淺學次世代渲染的時候就接觸了描邊相關的東西，有種比較拉跨的描邊方法，坐標外擴一圈然后染黑剔除前向渲染作為黑色描邊，在次世代渲染中不太好使，因為模型空間下的原點未必在正中央，但這個星星是我自己畫的，我就讓遠點在中央了，這也極大的方便了描邊的制作，所以反手外擴一圈，描邊就有了，然后要做一個彩色流光效果，我做了一張彩色的圖作為這個描邊的渲染紋理，再讓其uv隨這時間移動，就做成了彩色的流動效果，最后整體再與一個發光顏色疊底，調出喜歡的效果就行，使用到的紋理如下：
然后是把星星中間流動的星空效果做出來，我直接簡單粗暴的從網上拉了張星空圖下來，再ps上做了個鏡像處理，然后作為主紋理去渲染這部分，并讓其uv隨時間移動，然后再與一個發光顏色疊底調出喜歡的效果，用到的紋理如下：（垂直鏡像，也就是上下可以無縫對接）
敲重點了敲重點了：描邊那層做出來了，主體這層也做出來了，接下來就是描邊和主題混到一起，做成真正的流彩描邊效果了，最開始我想的簡單外擴描邊曾試試效果，結果因為我當初選擇的單層雙面繪制mesh的緣故，導致描邊層和星空層重疊再一起，不知道渲染誰，出現了問題，于是我又想的去再渲染描邊層的時候計算頂點與相機坐標間的差，取到一個相機指向當前頂點的向量，然后讓描邊層按照這個向量移動一點點，就在星空層后面了，但是事實做過之后，我發現當星星旋轉和移動坐標后，會出現描邊層飛出去的問題，（也可能我代碼寫的有問題），所以還是拋棄了這個做法，后來我有采用讓這倆部分pass塊的渲染佇列差1，仍然有最初的問題，最后決定采用深度測驗的方式去做這倆部分的順序渲染，這邊我是直接默認深度測驗條件和深度寫入開啟（也就是沒寫這部分代碼），然后讓星空層在剪裁空間下的pos.z加1（聽隔壁洮君講，這個z和深度是相反的，z越大深度越小，越靠近相機），所以z增大，星空層就越靠近相機，終于！到這里描邊效果終于沒有bug了，以下為完整shader代碼，

Shader "Custom/MyShader/Stars"
{
    Properties
    {
        _Minus ("Minus", Range(0,1)) = 0
        [HDR]_Color_Rainbow ("Color_Rainbow", Color) = (1,1,1,0)
        [HDR]_Color_BG ("Color_BG", Color) = (1,1,1,0)
        _MainTex ("MainTex", 2D) = "white" {}
        _RainbowTex ("RainbowTex", 2D) = "white" {}
    }
    SubShader
    {
        pass
        {
            Tags{"LightMode"="ForwardBase" }
            CGPROGRAM
            #pragma vertex ver_tex
            #pragma fragment Pixel
            #include "Lighting.cginc"

            struct vertexInput{
                float4 pos : POSITION;
                float4 uv : TEXCOORD0;
            };

            struct vertexOutput{
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };
            sampler2D _RainbowTex;
            fixed4 _Color_Rainbow;
            vertexOutput ver_tex(vertexInput v){
                vertexOutput r;
                //描邊外擴1.2倍
                v.pos*=1.2;
                
                //之后轉換到裁剪空間傳入下級
                r.pos =  UnityObjectToClipPos(v.pos);
                //uv流動
                r.uv = v.uv;
                r.uv.x += _Time.z*0.2;
                
                return r;
            }

            fixed4 Pixel(vertexOutput i):SV_TARGET{
                fixed3 col = tex2D(_RainbowTex,i.uv).xyz;
                return _Color_Rainbow*fixed4(col,1);
            }
            ENDCG
        }
        pass
        {
            Tags{"LightMode"="ForwardBase" }
            CGPROGRAM
            #pragma vertex ver_tex
            #pragma fragment Pixel
            #include "Lighting.cginc"

            struct vertexInput{

                float4 pos : POSITION;
                float4 uv : TEXCOORD0;
            };

            struct vertexOutput{

                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };
            sampler2D _MainTex;
            fixed4 _Color_BG;
            fixed _Minus;
            vertexOutput ver_tex(vertexInput v){
                vertexOutput r;
                r.pos =  UnityObjectToClipPos(v.pos);
                //uv流動
                r.uv = v.uv;
                r.uv.y+=_Time.z*0.15;
                //z增大深度減小
                r.pos.z+=1;
                return r;
            }

            fixed4 Pixel(vertexOutput i):SV_TARGET{
                fixed3 col1 = tex2D(_MainTex,i.uv).xyz;
                return _Color_BG*fixed4(col1,0);
            }
            ENDCG
        }
    }
    FallBack "Diffuse"
}

最后手搓發射器

星星經過測驗已經沒有任何問題了，于是開始手搓發射器，如之前所說，這個發射器我需要涉及到：在一定范圍內隨機的生成位置，一定范圍內隨機的生成角度，一定范圍內隨機的發射方向，一定范圍內隨機移動速度，一定范圍內隨機平轉速度，一定范圍內隨機生命周期等，（基本思路都大同小異），而這些內容我是打算讓發射器給生成一個隨機引數傳給發射的星星，再讓星星自己去用的，所以星星的代碼中我需要做到諸如定時銷毀，旋轉，移動之類的代碼功能，
這部分代碼中有注釋，而且都是c#基礎內容，我就不多贅述了，直接上代碼了，
星星代碼如下（實作mesh變化級動態功能）：

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

public class StarsMesh : MonoBehaviour
{
    Mesh mesh;
    public float Mul_width = 0;
    public float Rotation_Z_Speed = 0;
    public float Upper_Limit = 0.7f;
    public float Lower_Limit = 0.1f;
    public float Width_Speed = 0.1f;
    public Vector3 Move_Vector = new Vector3(0, 0, 0);
    public float Life_Cycle = 0;

    private float Width_A = 0;         //粗細變化的插值參照
    private bool Width_B = true;       //粗細變化的方向判斷
    private float Old_Mul_width = 0;
    private Vector3[] PosList;
    void Start()
    {
        //mesh初始化
        mesh = new Mesh();
        PosList = new Vector3[] {
            new Vector3(0,0,0),new Vector3(0,1,0),new Vector3(-0.5f,0.5f,0),
            new Vector3(-1,0,0),new Vector3(-0.5f,-0.5f,0),new Vector3(0,-1,0),
            new Vector3(0.5f,-0.5f,0),new Vector3(1,0,0),new Vector3(0.5f,0.5f,0)
        };
        Mesh_Update();
        //三角繪制，由于三角陣列固定，所以不需要放在mesh更新方法里，僅執行一次以節省性能
        mesh.triangles = new int[] { 
            2, 1, 8,     2, 8, 0,     3, 2, 4,     2, 0, 4,
            4, 0, 6,     4, 6, 5,     6, 8, 7,     6, 0, 8,
            8, 1, 2,     0, 8, 2,     4, 2, 3,     4, 0, 2,
            6, 0, 4,     5, 6, 4,     7, 8, 6,     8, 0, 6
        };
        GetComponent<MeshFilter>().mesh = mesh;
        //按照生命周期銷毀
        Destroy(this.gameObject, Life_Cycle);
    }
    private void Update()
    {

        #region 粗細變化
        if (Width_B)
        {
            Width_A += Time.deltaTime * Width_Speed;
            if(Width_A>=1)
            {
                Width_B = false;
            }
        }
        else
        {
            Width_A -= Time.deltaTime * Width_Speed;
            if (Width_A <= 0)
            {
                Width_B = true;
            }
        }
        Mul_width = Mathf.Lerp(Lower_Limit, Upper_Limit, Width_A);
        Mesh_Update();
        #endregion


        //旋轉
        transform.Rotate(new Vector3(0, 0, Rotation_Z_Speed));
        //移動
        transform.position += Move_Vector * Time.deltaTime;
    }
    private void Mesh_Update()
    {
        //mesh更新方法
        //克隆頂點基礎坐標
        Vector3[] pos = new Vector3[9];
        for(int i = 0;i<9;i++)
        {
            pos[i] = PosList[i];
        }
        //對部分頂點進行偏移
        pos[2] *= Mul_width;
        pos[4] *= Mul_width;
        pos[6] *= Mul_width;
        pos[8] *= Mul_width;
        mesh.vertices = pos;

        //uv計算
        Vector2[] uv = new Vector2[9];
        for (int i = 0; i < 9; i++)
        {
            //通過模型空間下的頂點坐標xy去計算uv坐標下的uv
            uv[i].x = (pos[i].x+1)/2;
            uv[i].y = (pos[i].y+1)/2;
        }
        mesh.uv = uv;
    }

}

發射器代碼：

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

public class Launcher : MonoBehaviour
{
    public GameObject Stars;

    //對星星的隨機引數界限設定
    public Vector3 StartPosMin;
    public Vector3 StartPosMax;
    public Vector3 StartRotMin;
    public Vector3 StartRotMax;
    public Vector3 StartMoveMin;
    public Vector3 StartMoveMax;
    public float Start_RotZ_Min;
    public float Start_RotZ_Max;
    public float Start_Width_Speed_Min;
    public float Start_Width_Speed_Max;
    public float Start_Life_Cycle_Min;
    public float Start_Life_Cycle_Max;
    public float Start_Scale_Min;
    public float Start_Scale_Max;

    public float MoveSpeed = 0;
    public float CreateSpeed = 0;
    public float Life_Cycle = 0;


    private float CreateTop = 1000;
    public float CreateNow = 0;
    // Start is called before the first frame update
    void Start()
    {
        Destroy(this.gameObject, Life_Cycle);
        CreateTop = 1000;
        CreateNow = 0;
    }

    // Update is called once per frame
    void Update()
    {
        CreateNow += CreateSpeed * Time.deltaTime;
        if (CreateNow >= CreateTop)
        {
            Creat_Stars();
            CreateNow = 0;
        }
    }
    private void Creat_Stars()
    {
        //生成隨機初始化引數
        //生成坐標
        Vector3 pos = new Vector3(Random.Range(StartPosMin.x, StartPosMax.x),
            Random.Range(StartPosMin.y, StartPosMax.y), Random.Range(StartPosMin.z, StartPosMax.z));
        //生成旋轉
        Vector3 rot = new Vector3(Random.Range(StartRotMin.x, StartRotMax.x),
            Random.Range(StartRotMin.y, StartRotMax.y), Random.Range(StartRotMin.z, StartRotMax.z));
        //移動向量
        Vector3 move = new Vector3(Random.Range(StartMoveMin.x, StartMoveMax.x),
            Random.Range(StartMoveMin.y, StartMoveMax.y), Random.Range(StartMoveMin.z, StartMoveMax.z));
        //平轉速度
        float rotZ = Random.Range(Start_RotZ_Min, Start_RotZ_Max);
        //寬度變化速度
        float width_speed = Random.Range(Start_Width_Speed_Min, Start_Width_Speed_Max);
        //生命周期
        float life_c = Random.Range(Start_Life_Cycle_Min, Start_Life_Cycle_Max);
        //整體縮放
        float scale = Random.Range(Start_Scale_Min, Start_Scale_Max);


        GameObject star = Instantiate(Stars, pos, Quaternion.Euler(rot));
        StarsMesh starsmesh = star.GetComponent<StarsMesh>();
        starsmesh.Move_Vector = move * MoveSpeed;
        starsmesh.Width_Speed = width_speed;
        starsmesh.Rotation_Z_Speed = rotZ;
        starsmesh.Life_Cycle = life_c;
        star.transform.localScale *= scale;
    }
}

結語

至此爆裂魔法中星星的制作就完全結束了，仍然存在部分問題如下：有些星星還帶月牙形的環，感覺好麻煩啊，不想做這個了，畢竟我是摸魚，有內味兒就行了，星星的彩色描邊由于比較亮，用同一個shader渲染很容易看出來完全一樣的流光，所以顯得比較劣質，雖然可以對每個星星在代碼中獨立生成材質來解決這個問題，但無疑很耗費性能，
我的爆裂魔法demo專案地址如下（目前僅做了星星和魔法陣，仍在制作中）：爆裂魔法demo
最后的最后，感謝閱讀嘿嘿

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/241928.html

標籤：其他

上一篇：g題卡片帶師

下一篇：廣度優先搜索演算法/寬度優先搜索演算法