????之前在A站看到一個樹葉交互的游戲Demo，覺得很酷所以試著自己嘗試做一下樹葉交互。樹葉的整個藍圖的基礎(chǔ)框架是參考@SilenceMoon（感謝授權(quán)轉(zhuǎn)載）里的，我結(jié)合自己的需求進行簡化修改。希望大家多多提提意見。

????大致思路就是通過藍圖傳遞我們需要的屬性到Niagara中，我想著盡量具有可拓展性高，一般需求只用調(diào)較少的參數(shù)。直接進入正題吧。

????首先葉子的模型是在Blender生成的，貼圖直接用的是Bridge的，有現(xiàn)成的就不花時間自己做了。

????盡量保證葉子有一點彎曲，在引擎中看起來就會更加立體。

????

????粒子的模式肯定是GPU節(jié)省性能，我這里發(fā)射的是2000個粒子，給粒子初始的隨機旋轉(zhuǎn)以及一點點隨機速度。

????

????碰撞的模式用的距離場，需要在項目設(shè)置中啟動距離場。當時做的時候光線追蹤的碰撞剛出我也試了下，切換到MeshRender有問題，不知道是Bug還是我哪里出問題了，我的顯卡是2060應該支持的。這個問題先暫時跳過吧。簡單的設(shè)置一下碰撞，Bounce給的0.01，不要讓樹葉像皮球一樣彈起來。摩擦力這邊默認設(shè)置，因為是在平面上模擬我就忽略了。注意把Rest里的Enable Rest State勾選項去掉，樹葉需要一直接受物理模擬，我們不需要休眠。之后給樹葉GravityForce,CurlNoiseForce作為最基本的物理模擬。值得一提的是，官方在最近的一次更新中，更新了AreaDynamicDrag。這個就是專門用來模擬樹葉，紙張等受到的空氣阻力。里面對四元數(shù)的運用和很多運算操作還有Debug的方法都讓我學到很多，大家可以點進去看一下學習一下。GravityForce,AreaDynamicDrag大部分值都是默認的參數(shù)。做好樹葉的基礎(chǔ)材質(zhì)給上，這樣最基礎(chǔ)的部分就完成了。

???

?????然后需要解決葉子落到地面的朝向問題，我們需要粒子落在地面時它的朝向是朝上的。一開始我考慮了兩種方法。一種是粒子的速度為0時，他的朝向向上；還有一種是基于距離場判斷粒子距離附近表面的距離，當距離為0時粒子朝上。后來經(jīng)過測試，我選擇基于速度判斷。因為基于距離場，當葉子靠近墻這種接近90度的物體表面時，粒子朝向會改變趨于一致，造成Bug。這里根據(jù)速度，當速度不為0時，保持物體原有的旋轉(zhuǎn)，速度為0時讓葉子的朝向向上。圖中的FreezeInfluence暫時不用管，這是后面要提到的。在這里經(jīng)過Max的判斷，默認給出0，所以一般情況不會受到FreezeInfluence的影響。還有就是暫時沒有考慮葉子的朝向隨坡度的影響，這里我想其實可以參考官方示例中蟲子哪里，用Find Nearest Distance Field Surface GPU中拿出Vector To Nearest Surface找到葉子距離最近表面的點的法線方向，給到葉子朝向再與速度綁定就可以了，這里我暫時還沒有深入研究，給出一個大致的參考。最后模擬的結(jié)果，對于接近地面速度較大的葉子，模擬的結(jié)果還比較不錯；對于緩緩落下接近地面速度較小時，還是有方向突然改變的頓挫感，這里我暫時還沒有比較好的解決方法。不過由于數(shù)量多，現(xiàn)象也不是特別明顯就暫時放著了。

????

????出于美術(shù)的考慮，給葉子大小，色相賦予隨機值。那么葉子的準備工作就好了。

? ?需要在WorldSetting里，將GameModeOverride?換成自己新建的。

? ?

??

?

?????控制系統(tǒng)用的UE5新出的EnhancedInput，這個網(wǎng)上有很多相關(guān)的教程，我就不贅述了。其中還加了很多判斷來進行各種效果。比如當Attack為Flase才能對鏡頭進行上下左右的移動，否則當你攻擊選擇位置時鼠標移動，屏幕也會跟著晃動。

????由于不想讓文章變得過于冗雜，有很多細節(jié)我沒有提及,盡量多提及一些關(guān)鍵點。

????

????技能的整個架構(gòu)參考SilenceMoon的GA，GE模板。這里的主要目標有兩個，1.首先創(chuàng)建一個GameAbility的類（在創(chuàng)建之前先檢查是否以及存在），并提升為CurrentAbility的變量。這樣可以根據(jù)鍵盤的1、2、3數(shù)字鍵切換攻擊的模式。我一共做了火、風、冰三種類型的攻擊模式。2.?每幀獲取鼠標的信息。

????

???

?????在GAS_Master的藍圖Actor里，首先構(gòu)建一個SpawnGE的函數(shù)，生成一個GameEffect的類。通過傳遞鼠標的信息包括位置，方向的基礎(chǔ)上，我還定義一個Vector向量需要傳遞進GE里。

????

????在GA的主模塊，主要設(shè)置一下鼠標UI的顯示等。

????在GE中，這塊地方是最重要的。初始化Niagara組件，并提升為變量。方便后面給不同的效果上不同的Niagara模塊。

????

????

????然后通過NiagaraParameterCollection傳遞信息到Niagara中，傳遞的值我用了5個，其中包括2個Float、1個Int、2個Vector的值。根據(jù)命名很好理解，我想傳遞力的位置、方向、大小和所影響的半徑。對于一般需求可以這么理解，但是對于比較特殊的效果，所傳遞的信息不一定是與命名一致的。至于Index是后面加上的，這個后面我會詳細講述的。

????首先就是火的部分了，這部分想試一下最基本的交互?；鹎虍a(chǎn)生，葉子被吸引；火球走一段時間后爆炸，周圍的葉子會被炸開。

? ????在鼠標左鍵按下與松開分別記錄此時鼠標的位置，并設(shè)置變量?。并使Niagara的起始位置比鼠標的位置高1米，然后把按下鼠標的位置也傳遞到GE里，并給一個新的Niagara系統(tǒng)。

?????這一部分是設(shè)置UI，一些簡單的運算以及防止Bug（鼠標按下以及松開的位置一樣等）的出現(xiàn)。?

???? ?定義一個新的變量FireSpawnTime這個時間是火球從生成到移動的時間，我設(shè)置為1S，并且傳遞到Niagara的User? Exposed?中

????通過傳遞進來的位置，松開鼠標的位置（即Actor的位置的這里只取X，Y值）來確定火球移動的方向。通過Lerp連接兩個位置，至于Alpha值通過曲線來控制；而后通過TimeLine控制Alpha的移動。注意在Niagara中勾選LocalSpace，否則不會移動的。

????然后再添加一個執(zhí)行接口的曲線，命名End，只需要保持橫坐標為結(jié)束時間的點即可，縱坐標再此處沒有意義。在結(jié)束后我再發(fā)射一個GE，設(shè)置好位置，作為最后的爆炸。

????

????最后設(shè)置力的相關(guān)屬性，力的持續(xù)時間是通過Delay實現(xiàn)的，延遲多長時間后參數(shù)歸0，意味著力的持續(xù)時間。Index的作用大家可以猜猜有什么用，這個是到后面出現(xiàn)問題后加上去的，我暫時先買個關(guān)子。

????這個Niagara系統(tǒng)沒有什么有趣的東西，就跳過了。

????現(xiàn)在來實現(xiàn)樹葉的部分。

??????傳遞過來的參數(shù)在這里。

????? 之前提到過首先需要把葉子吸起來，我一開始還是盡量使用系統(tǒng)自帶的模塊去做，在Update模塊里添加Point Attraction Force。

? ?將之前提到過的把力發(fā)生的位置，半徑，大小傳遞過來，在藍圖那邊調(diào)好參數(shù)。就實現(xiàn)了第一步的模擬。

? ??

????接下來是爆炸的時刻，這次想把周圍的葉子全部炸開。設(shè)置好參數(shù)后，出現(xiàn)Bug了。系統(tǒng)不知道何時只對點吸引力作反應，何時對點排斥力做反應。所以這個時候，我引入Index的變量。這個變量作為效果索引，比如Index1只想要吸引力的效果、Index2只想要排斥力的效果、Index3既想要排斥力又想要漩渦力。

????我把吸收效果作為Index1，炸開效果作為Index2。接下來就需要在Niagara中判斷了。怎么寫這個邏輯了，說實話這個卡住我一段時間，我想要這個具有可拓展性，以后再想要什么一般效果直接再原基礎(chǔ)上進行很小的修改，甚至不用修改。

????

????最后，我直接用最為暴力的判斷加上邏輯或。首先判斷傳遞進來的Index值，然后傳遞到對應力的邏輯或上，有就觸發(fā)輸出真。說實話，盡管之前我不怎么在乎性能上的考慮。但這個讓我極為難受，葉子在大多數(shù)情況下都不會受到技能力的影響。卻在每幀執(zhí)行幾個判斷以及邏輯或，隨著Index3、4出現(xiàn)上面也會更冗雜。之后，無意間發(fā)現(xiàn)一個思路。首先對Index進行一次判斷（判斷是否為0），若不為零，進行下一步。在力的邏輯上可以用數(shù)組進行查找，若Index在此數(shù)組內(nèi)，則輸出真。文章說這個比或的邏輯要更省。這里給出一個參考（希望大家多多提提意見），我的重心暫時還是在美術(shù)上，就不花時間深入了。這里暫時還是這樣先用著，秉著能用就行。

????

????最后在需要的力的模塊與力的強度相乘即可，這樣彼此的效果就不會相互影響了。一開始我還加了一點漩渦力，來讓葉子具有更多動感。但是時間太短，效果也不是特別好，而且官方的VortexForce沒有半徑我就沒加。（雖然后面還是跑不掉）。

????

????爆炸產(chǎn)生的貼花參考了Lyra的工程，直接在Niagara中實現(xiàn)。

????材質(zhì)里的UV需要通過WorldPositionBehindTranslucency這個節(jié)點與ParticlePosition相減再通過一些計算得到。透明度可以根據(jù)世界法線的一些運算，讓貼花從水平到垂直方向上依次減淡，直至消失。

????

????火球的火焰效果是通過Embergen做的循環(huán)序列幀圖完成的，真的很好用推薦一波。如果熟練的話十分鐘就可以得到想要的序列幀圖。

????接下來就是風的技能，這個最簡單的設(shè)想就是兩個龍卷風合成一個更大的龍卷風。途中經(jīng)過的樹葉會被吹起來。

????風的GA模塊沒有什么大的改變，鼠標松開時發(fā)射兩個GE對應兩個龍卷風。

????

????之前火的釋放位置是鼠標松開的位置有點不符合玩家的預想，也不好操作。這次做了修改改成釋放的位置為鼠標按下的位置。首先獲得Actor所在的位置，與鼠標松開的位置是一致的，作為ReleasePosition，PressPosition通過Vector to GE傳遞進來。

????風的路線首先通過鼠標的按下與松開確定風的前進方向，前進的距離在通過剛才確定的方向歸一化后相乘即可，為了方便美術(shù)調(diào)整用變量ExplosionDistance確定。至于風的偏轉(zhuǎn)，用叉乘Cross來計算。叉乘最簡單的幾何意義就是得到兩個不重合的直線所組成的平面的垂線。所以我想偏轉(zhuǎn)的方向就是風前進的方向與Z軸組成平面的垂線，另一個GE龍卷風只需要改變一下叉乘的方向就行了。用Lerp來驅(qū)動起點和終點，在此基礎(chǔ)上加上剛才所求的垂線的偏轉(zhuǎn)量就行了。

????然后用TimeLine做一個Vector的曲線，用Vector的X軸代表時間，Y軸代表軌跡的偏移程度。

????最后輸出的FXPosition提升為變量，由于這個值需要每幀改變。所以通過Tick來傳遞到Niagara中。這里由于這個風的特殊性，需要同時傳遞兩個位置到Niagara中。一個龍卷風通過ForceDirection傳遞位置，另一個龍卷風通過ForcePosition傳遞。

? ?另一個GE沒有什么大的改變，就是在結(jié)束后放一個更大的龍卷風GE，且最后一個GE龍卷風不產(chǎn)生力的交互。還需要注意的就是上面提到的傳遞的值不一樣，Cross叉乘的方向不一樣。

? ?回到Niagara樹葉中。?

????這一部分比較復雜，連線也不好看，可讀性不強，這時候用HLSL寫可能還更易讀一些。龍卷風的力我打算用線吸引力和漩渦力組合實現(xiàn)，由于有兩個龍卷風所以要寫兩個。這些其實都是點開官方自帶的LineAttractionForce和VortexForce簡化而來的。

????首先判斷龍卷風的Index值（我設(shè)置的為3），以確定是否產(chǎn)生龍卷風的力。然后通過傳遞過來的值設(shè)置線吸引力的兩個點的位置以及影響的區(qū)域大小，最后加到PhysicsForce上。漩渦力也是差不多的思路。

????最后設(shè)置好值就行了。

????

????在風的Niagara中，設(shè)置了一個隨機值來使得極少數(shù)的風的軌跡有著高亮的顏色以增加隨機性與美術(shù)效果。

????

???

?????這個是為了保證模型的初始朝向面向龍卷風的中心，加一點點偏轉(zhuǎn)賦予隨機性。其他的都是基礎(chǔ)的東西了。

????最后就是冰的技能了，我想要的就是冰爆炸時樹葉會結(jié)冰凍住的感覺。

冰的GA最為簡單了，鼠標松開時生成一個GE。

????在GE里，還是通過NiagaraParameterCollection向Niagara傳值。在延遲0.5S后，發(fā)生爆炸。結(jié)冰的效果主要通過Radius的值來實現(xiàn)。通過從0增長到我們所需要的爆炸半徑在回歸到0。注意還要確定GE的方向，這樣好確定大冰花爆炸的朝向。

????爆炸的半徑通過TimeLine來實現(xiàn)動態(tài)變化，半徑確定為550，整個過程的持續(xù)時間是3S。

????回到樹葉里面。

????首先將傳遞過來的ForcePosition的正上方220的方向作為爆炸的中心，然后計算Particle到爆炸中心的距離與剛剛提到的Radius作比較，將得到的值賦予新建的Particle屬性FreezeInfluence。

????葉子結(jié)冰時，將其受到的GravityForce與CurlNoiseForce的值變?yōu)?即可。就好像葉子受到冰凍效果凍結(jié)在空中的感覺。將FreezeInfluence與強度值相乘即可。

????在這里會出現(xiàn)一個Bug，還記得之前當葉子的速度為0時，葉子的朝向會趨于一致向上。所以當葉子冰凍時，它的朝向也會趨于一致。

????這里需要將FreezeInfluence，1-x處理一下再與速度進行取最大值。這樣的目的是使得葉子在結(jié)冰時這里輸出的值任為1。不考慮結(jié)冰時輸出的值為0，即只受速度影響。

????

????最后我想實現(xiàn)的效果是，在初始葉子升起的時候，中心的葉子所受的力大，邊緣的葉子所受的力較小。注意這里也用Index值進行了判斷。

????到此為止，葉子的處理已經(jīng)完成了。

????在雪花的Nigara中

??

??

????雪花升起的運動就是簡單設(shè)置起點（發(fā)射器的位置）與終點（比起點高點）然后通過Lerp實現(xiàn)的。最后為了美術(shù)效果用曲線調(diào)了下節(jié)奏。

????

????出于美術(shù)效果的考量，我想要小的粒子升起時，靠近中心的初速度大些，靠近邊緣時初速度小些。通過算出粒子與發(fā)射器位置的距離，歸一化后用Lerp節(jié)點設(shè)置粒子的最大速度與最小速度，然后再此的基礎(chǔ)上再賦予一點隨機速度，使其結(jié)構(gòu)看起來不過于規(guī)整死板。

????

????然后再生成粒子的位置事件，用其他的發(fā)射器接受事件發(fā)射Ribbon與Sparks增加美術(shù)效果，前面風的軌跡也是用了相同的做法。

????

????

????爆炸的大冰晶是通過采樣模型得到的。采樣模型的三角形，給予一個很大的隨機值保證模型的每個三角形都能被采樣到。然后獲取位置信息給到Particle.Position，UV信息通過DynamicMaterialParameter傳遞到材質(zhì)中進行采樣。貼圖是通過FlamePainter軟件的一個筆刷得到的。然后對Scale即大小進行曲線K值得到所需的節(jié)奏。

????對于性能的優(yōu)化其實還有一些改進的地方的，比如可以在攻擊時才進行每幀采樣等等。也有很多細節(jié)由于篇幅原因無法寫出來，不過重要的我都寫出來了，這樣就基本完成了。整個過程無論美術(shù)還是程序邏輯上都還有很多改進的，希望大家多多提提意見。