Zelda Stylize Camp Fire 薩爾達風格營火特效

6月 29, 2019

主要由三組元件構成，依序是火星、營火本體、煙霧。
Here is three elemnts : Fire embers、Camp fire、Smoke。

環境Unity 2018.2.4 及使用 PostProcessing的Bloom。
Amplify shader editor 1.6.7製作Shader。
Substance designer 2018 製作貼圖。
Build in Unity 2018.2.4 with PostProcessing for bloom.
Amplify shader editor 1.6.7 for shader.
Substance designer 2018 for texture.

營火 Camp Fire

首先說明營火的製作方式，製作一張RGBA通道的貼圖，分別為 R=營火中心、G=營火外圍、BA=營火擾動的雜訊。
In the beginning, we need a texture for shader of camp fire. Included RGBA: R for the center of camp fir、G for the outside of fire、B and A for the distortion.

貼圖導入Unity中須設定成Clamp

The texture setting has to be clamp warp mode.

接著開始進行製作營火的Shader，下面這張圖是此Shader的全貌，基本上只做一件事情就是透過流動貼圖(Flow Map)的概念來實現營火擾動的效果，分為核心營火(R通道)擾動較小及外圍營火(G通道)擾動較大兩組，再將兩者相加來實現火焰的豐富性，最後就是基礎的顏色添加。
Here is the full graph of camp fire shader. The main point is to create the UV distortion within the flow map. I make it to be two value, one is the low distortion work for the center fire (R channel) , the other one is the high distortion work for the outside fire (G channel). To combine R and G channel, you will find a camp fire to be full of variety motion. In the end, fill the color.

利用位移雜訊貼圖加入到原始UV坐標系中作為G通道外圍營火的擾動動態
Quick demo for the UV distortion. Animate the noise texture from B channel and add by UV coordinate.

在中心營火的部分希望可以保持底部的形狀不受過多的擾動影響，所以乘上一組Y方向的漸層來進行數值的遞減，然後在乘上一組數值NoiseStrength控制擾動的強度。
In order to keep the bottom shape of fire, multiply by the V coordinate to decrease the value and "NoiseStrength" to control the value of distortion.

在外圍營火的部分為了使營火有隨著氣流消散而更破碎細散，所以需要給予相對於中心更強的擾動，這裡我將BA兩通道的雜訊進行相加，然後一樣透過NoiseStrength控制擾動的強度，但會致使整體形狀偏移過多，所以這裡我將NoiseStrength去除以2在減回去，因為擾動強度越大越需要更多偏移修正，因此透過關聯NoiseStrength來實現視覺上的理想性。
At the outside fire, I would like to make it dissipates with more detail and distortion due to the heat. So I create the second flow UV and add the two noise texture from B and A, and also multiply "NoiseStrength" to control the value of distortion. But due to the high value, the fire goes to be too much distortion leaving the position what I ask. So I have to subtract a value that is related to NoiseStrength, as the result divide by 2. It will be more offset when it is high distortion.

完成裡外兩部分的擾動後接著就是將其整合成一體，所以先看Opacity的部分就是直接將核心營火(R)與外圍營火(G)相加，在這裡我多加一次來自核心營火擾動結果的G除以2，這個部分是為了使外圍營火當擾動變強時依舊可以保留底部的效果，但又不希望加入過多的效果影響原本外圍營火末端的消散所以除以2，最後在掛上Clamp 0-1限制參數範圍即完成營火外輪廓的製作了。
After doing the distortion of center and outside fire, let`s merge together. And I also add by the value of G channel from the group of center distortion. In this way, supposed the value of distortion being higher, it will keep the bottom shape of outside fire. And divide by 2 for decrease the length of value, it will not increase distortion over at the top of outside fire. Finally, clamp the all value from 0 to 1 for opacity.

未加入核心營火G

Do not add the G from the group of center distortion.

加入後

Add a value of G channel from the group of center distortion.

最後就是利用核心營火來進行Lerp線性插值來完成填色，營火的部分就算完成了。
Center fire (R channel) lerp center and outside color. And the camp fire is done.

煙霧 Smoke

煙霧貼圖通道分別是：R=煙霧紋理、G=消散雜訊、B=擾動雜訊、A=遮罩。
這裡有個重點是煙霧紋理R與消散紋理G的關聯，根據紋理本身的體積感會由暗部開始往高光消散，所以消散紋理G是根據煙霧紋理R去延伸，並透過調整色階對比甚至可以稍微扭曲紋理來使消散更加靈活生動，如果使用了完全不同的紋理會使消散顯得較為零散不同步也就比較容易不自然。
The smoke texture included RGBA: R for diffuse、G for dissipates、B for UV distortion、A for mask.
Here is a tips. According to the smoke diffuse, it dissipates from dark to high. So modify the level of the texture from diffuse map and also be able to add some distort for the grayscale. It will be more vivid motion and natural look. If doing a texture different from R at all, it will lead to dissipate unnaturally or into over fragmented.

貼圖 texture

shader

煙霧Shader一樣是利用擾動貼圖的觀念製作，再搭配粒子系統中的Custom Data對Shader進行參數的動態控制，如此來實現更靈活的動態。
The smoke shader is also doing with UV distortion and control the dynamic parameter from custom data in particle system.
所以如下圖所示可以看到利用Texture Coordinates U與擾動強度相乘，在透過粒子CustomData面板中設置動態曲線，讓煙霧擾動的強度由弱至強。
You can find from the pic below, "FlowStrength" multiply by Texture Coordinates U ( custom data Y). Doing the curve at custom data to create the animation of smoke distortion, make it from low distort to high.

附帶說明Shader中與粒子CustomData的對應

The related of shader and custom data.

煙霧的消散透過G通道的紋理與CustomData進行動態參數的相加，然後相乘再乘以8拉大數值對比後再乘上A通道的遮罩，最後在Clamp限制參數於0~1間即完成消散整體Opacity動態。
For dissipate the smoke, the G channel add by custome data X, and then multiply by the result and multiply a constant and A channel for mask. As the relsuts, clamp it from 0 to 1. It is done for the motion of opacity.

這裡可以看一下在粒子中Custom Data的曲線設定

Here is the setting at custom data.

粒子設定

Particle setting

最終結果

The result.

火星 Fire embers

小火星的部分單純由Shader中的UV軸向相乘來實現，剩下就只是粒子中動態的設定。
The fire embers is made by created a simple shader used UV coordinate for the opacity. And then setting the motion at particle system.

Color須設定成HDR模式來產生Bloom效果

Color setting is HDR mode for bloom effect.