Unreal Engine 4 系列教程 Part 3：材質教程

原文：Unreal Engine 4 Materials Tutorial
做者：Tommy Tran
譯者：Shuchang Liu

經過這篇教程，你將學會如何在材質編輯器裏修改貼圖，建立材質實例，以及在遊戲中修改更新材質實例。

一如現實世界，遊戲世界也有各類各樣的物體，各自擁有獨特的外觀。在Unreal引擎裏，材質決定了物體的外觀。物體的顏色？它的光澤度？是否透明？一切都定義在材質裏。

在Unreal引擎中，材質被應用在基本全部可視元素裏。你能夠對網格、粒子、UI元素應用材質。

在本篇教程裏，你將學會：

• 操做材質修改亮度和顏色
• 使用材質實例來快速生成變體
• 使用動態材質實例來在遊戲收集道具過程當中修改模型的顏色

在本篇教程裏，你會接觸到材質和藍圖編輯器。若是你還不是很熟悉，請閱讀入門教程和藍圖教程教程。

注意：本篇教程只是Unreal Engine 4系列教程的其中一篇：

• Part 1：入門
• Part 2：藍圖
• Part 3：材質
• Part 4：UI
• Part 5：製做簡單遊戲
• Part 6：動畫
• Part 7：音頻
• Part 8：粒子系統
• Part 9：AI
• Part 10：製做簡單FPS遊戲

起步入門

下載示例項目並解壓。進入項目文件夾，雙擊BananaCollector.uproject打開項目。

注意：若是你看到了項目是由較早的引擎版本建立的提示，這很正常（由於引擎常常更新版本）。你能夠選擇以拷貝副本的形式打開，也能夠直接轉換項目版本打開。

咱們能夠看到有塊鋪滿香蕉的區域。按下Play，使用W，A，S和D鍵控制紅色方塊。你能夠經過移動方塊方塊香蕉。

首先，咱們須要修改香蕉材質來改變其亮度。Content Browser進入Materials文件夾雙擊M_Banana，打開材質編輯器。

爲了調整香蕉的亮度，咱們須要修改貼圖。

修改貼圖

貼圖本質就是一張圖片，而圖片是像素點的集合。一張彩色圖片，它的像素點顏色是由紅（R），綠（G）和藍（B）三個通道值所肯定的。

下面是一張2x2像素的圖片，每一個像素點的RGB值如文本所示。

注意：在Unreal引擎中，RGB各通道值的範圍爲0.0～1.0。然而，在不少其餘應用中，RGB各通道值爲0～255。這僅僅是兩種不一樣的表示方式，並不表明Unreal引擎的顏色範圍更小。

咱們能夠經過對貼圖的每一個像素值作數值操做從而修改貼圖。這種操做能夠是簡單的增長每一個像素點通道值。

下面的例子是將各通道值的範圍調整成0.4～1.0。這樣各通道的最小值不小於0.4，就使得圖片看起來更亮了。

咱們能夠以下圖同樣在材質編輯器完成上述操做：

接着，咱們會使用Multiply（乘法）節點來調整貼圖的亮度。

Multiply節點

顧名思義，Multiply節點對兩個數值輸入作乘法操做。

使用乘法，咱們能夠在不影響色相和飽和度狀況下，改變像素亮度。下面的例子裏，經過對每一個像素點通道值乘以0.5，將圖片的亮度減半。

經過給每一個像素作上述操做，就能夠改變整個貼圖的亮度。

雖然下面所說並不是教程重點，但咱們也能夠經過使用Multiply節點鏈接一張遮罩貼圖。使用了遮罩貼圖，原貼圖的某些區域看起來就會更暗了。下面是使用瓷磚紋理來遮罩石頭紋理的例子：

其遮罩原理是像素點的灰度範圍在0（黑色）到1（白色）之間。

白色像素區域的原圖亮度最高，由於其像素點通道值乘以了1，灰色區域的亮度暗淡些，由於通道值乘以了小於1的數值，黑色區域徹底無亮度，由於通道值乘以了0。

如今，讓咱們試試Multiply節點吧。

調整貼圖亮度

首先咱們須要去掉Texture Sample和Base Color引腳之間的連線。咱們能夠經過右鍵點擊引腳或者連線去掉鏈接。一樣的，按住Alt鍵，鼠標左鍵點擊連線也可去掉鏈接。

接着建立Multiply和Constant節點。你能夠經過長按M鍵（Multiply節點）或者1鍵（Constant節點）並左鍵點擊空白區域，快捷建立對應節點。隨後以下圖同樣連線：

這樣貼圖的每一個像素值都會與Constant節點值相乘。最後，將修改後的貼圖做爲Base Color輸出。

如今，貼圖看起來應該是黑色的，由於乘數爲0（Multiply節點默認值爲0）。爲了修改乘數，選中Constant節點，在Details面板將Value改成5。

點擊Apply並返回主編輯器。能夠看到香蕉顏色變得更亮了。

咱們還能夠經過添加一些不一樣顏色的香蕉來豐富畫面效果。雖然咱們能夠新增不一樣顏色的材質，建立材質實例是一種更爲簡便的方法。

關於材質實例

材質實例是材質的一種副本。對於原材質的任何修改都會在連帶影響材質實例。

材質實例的好處在於不用從新編譯而使得修改生效。你可能注意到了，每次咱們修改了材質並點擊Apply按鈕，面板都會提示shader編譯信息。

一般來講這個過程只會持續數秒時間。然而，隨着材質變得複雜，編譯時間會急劇增長。

下面兩種場景很適合使用材質實例：

• 材質很是複雜，並且你但願能夠快速進行修改
• 但願根據原材質建立材質變體，好比但願修改顏色，亮度甚至貼圖。

如下場景全部物體都使用了材質實例來修改顯示顏色，其實這些實例都共用了同一個材質。

在使用材質實例前，你須要爲原材質建立參數。這樣材質實例纔會顯示一樣的參數，使得咱們能夠調整材質的參數。

建立材質參數

回到主編輯器，並確保仍然處於編輯M_Banana材質的狀態。

首先，咱們須要一個節點來修改貼圖的色相。HueShift節點就能夠勝任。添加節點，並以下圖進行連線：

• 按住Alt鍵並左鍵點擊連線斷開Multiply節點與M_Banana節點的鏈接。
• 右鍵點擊 Blueprint面板，搜索HueShift節點並選中。
• 如上圖所示進行連線。

接着，咱們須要建立Scalar Parameter節點。這個節點有一個可編輯的字段值。咱們能夠經過按住S鍵並左鍵點擊空白區域快速建立，而後鏈接HueShift節點的Hue Shift Percentage(S)引腳。

這裏咱們最好從新命名這個參數。選擇Scalar Parameter節點，並在Details面板將變量名改成HueShiftPercentage。

咱們也能夠將Constant節點轉換爲Scalar Parameters節點。右鍵點擊剛纔建立的Constant節點，選擇Convert to Parameter選項，而後將變量名改成Brightness。

如今材質參數就算設置好了。點擊Apply並關閉材質編輯器。

接着，咱們要建立一個材質實例。

建立材質實例

將Content Browser切換到Materials文件夾。右鍵點擊M_Banana，並在彈出菜單中選擇Create Material Instance。將新資源重命名爲MI_Banana_Green。

雙擊MI_Banana_Green打開材質實例編輯器。

編輯器由三個主要面板組成：

1. Details：展現設置參數及其餘通用參數。
2. Instance Parents：展現當前實例的父類材質列表。在這個例子裏，父類只有M_Banana。
3. Viewport：展現當前材質實例的預覽球形網格。經過長按左鍵移動鼠標旋轉預覽網格，滑動滾輪縮放界面。

爲了改爲預覽香蕉網格，能夠在Details面板的Previewing部分，左鍵點擊Preview Mesh下拉框，選擇SM_Banana。如今就能夠看到預覽網格變成了香蕉。

接着，咱們須要編輯參數將香蕉顏色改爲綠色。爲了編輯參數，要先勾選每一個參數的勾選框。

將Brightness改成0.5，HueShiftPercentage改成0.2。你會看到以下圖的效果：

如今你已經建立好了材質實例，是時候應用在遊戲的香蕉上了。關閉材質實例編輯器，回到主編輯器。

應用材質實例

咱們能夠單獨編輯放入場景的每一個角色。意思是咱們能夠修改一個香蕉的材質而不影響其餘香蕉。咱們能夠經過這點將某些香蕉改爲綠色的。

選擇任意香蕉並在Details面板的組件列表中選中StaticMesh組件。

Details面板會顯示出StaticMesh組件的參數，將材質參數改爲MI_Banana_Green。

重複如上操做，讓場景不一樣顏色的香蕉分佈得更加隨機。看你能不能本身建立一個材質實例來製做一些紫色的香蕉吧！

動態變化材質

材質的做用也不只限於美化畫面；咱們也能夠利用材質來作一些遊戲設計。接着，你會學習如何利用材質，伴隨方塊收集了愈來愈多的香蕉，動態地將方塊顏色由白改爲紅色。

在咱們建立材質實例前，咱們須要先設置好方塊的材質。

在Materials文件夾雙擊M_Cube打開材質編輯器。

首先須要建立顏色。你能看到Constant3Vector節點鏈接了Base Color引腳。這個節點很是適合用於設置顏色，由於它有RGB通道。

既然已經有了紅色，那還須要建立白色。咱們經過按住數字鍵3，左鍵點擊空白處快捷建立Constant3Vector節點。

經過雙擊Constant3Vector節點打開Color picker。

經過滑動條或者在R，G，B通道輸入1.0將顏色設爲白色，而後點擊OK按鈕。

爲了平滑地將顏色從白色改成紅色，最簡便的方法就是使用線性插值。

什麼是線性插值？

線性插值是一種得到[A，B]範圍內某個數值的方法。好比，咱們能夠經過線性插值查找100和200之間的中間值。

經過控制Alpha值，線性插值的做用就顯現出來了。你能夠將Alpha當成A到B點的百分比。Alpha爲0時返回A，Alpha爲1時返回B。

好比，你能夠隨時間增長Alpha，來將一個物體從A點移動到B點。

在本篇教程中，你將經過收集香蕉數量來逐步增長透明度。

使用LinearInterpolate節點

首先，經過長按L鍵左鍵點擊空白處快捷添加LinearInterpolate節點。

接着，建立Scalar Parameter節點並將其命名爲ColorAlpha。隨後以下圖進行連線：

小結：LinearInterpolate節點會輸出A值。由於Alpha值爲0。Alpha值越接近1，輸出越接近B值。

材質現已製做好了。後續還有不少東西須要作，但咱們能夠看看如今的進度，點擊Apply並關閉材質編輯器。若是你點擊Play，應該能夠看到方塊如今是白色而不是紅色的。

爲了讓方塊改變顏色，你須要編輯ColorAlpha參數。然而還有一個問題，你不能在遊戲運行中修改材質實例參數。解決方案是使用動態材質實例。

關於動態材質實例

不一樣於其餘實例，你能夠在遊戲中經過藍圖或C++編輯動態材質實例。

你可使用動態實例實現不少功能，好比一點點修改物體不透明度直至徹底不可見。或者，你能夠在物體沾溼時增長物體高光。

還有一個好處是使用動態材質實例，意味着你能夠單獨修改每一個物體。

下面例子是使用動態修改每一個材質實例，實現了物體漸隱。

建立動態材質實例

你只能在遊戲中經過藍圖或C++建立動態材質實例。

Content Browser窗口雙擊進入Blueprints文件夾，雙擊BP_Player打開藍圖編輯器。

首先要作的就是建立動態材質實例，並將其應用在方塊上。在Unreal生成角色的時機，也就是Event BeginPlay節點觸發時，作這件事比較合適。

確保在Event Graph上添加了Event BeginPlay節點。

如今，添加 Create Dynamic Material Instance (StaticMesh)節點。這個節點會同步建立並給方塊應用動態材質實例。

接着，你須要指定方塊應用哪一個材質。點擊Source Material下拉框選擇M_Cube。

爲了方便後續引用材質，最好用變量表示這個材質。最簡單的方法是在節點的Return Value引腳右鍵點擊，隨後點擊彈出菜單的Promote to Variable。

觀察My Blueprint頁籤，能夠看到出現了新變量。按下F2鍵將其快捷重命名爲CubeMaterial。

最後，鏈接Event BeginPlay與Create Dynamic Material Instance節點。

小結：一旦Unreal生成BP_Player，就會建立動態材質實例並將其應用到StaticMesh組件上，該實例會儲存成變量CubeMaterial。

下一步就該建立計數器用於統計香蕉收集數量了。

建立香蕉計數器

若是把面板往下拖，你能看到以下的節點鏈接。咱們會利用這部分節點來更新香蕉計數器和材質。

On Component Begin Overlap節點會在方塊接觸其餘角色時觸發執行。接着，Cast to BP_Banana節點會檢查觸碰角色是否是香蕉，若是是，則DestroyActor節點會將其銷燬並移出遊戲。

如今咱們要作的第一件事是建立變量存儲已蒐集香蕉數量。隨後咱們要在每次方塊觸碰香蕉時累加該變量。

建立Float變量並將其命名爲BananaCounter。將變量拖拽至Event Graph並從彈出菜單中選擇Get。

爲了讓計數器每次自增長一，添加IncrementFloat節點，而後鏈接BananaCounter節點。

接着，鏈接DestroyActor節點與IncrementFloat節點。

如今，玩家每收集一個香蕉，BananaCounter變量就會自增長一。

若是你直接使用BananaCounter做爲alpha值使用，並不會獲得預期結果。由於LinearInterpolation節點的alpha值範圍是[0,1]。你能夠經過歸一化將計數轉化爲[0,1]之間的值。

咱們使用BananaCounter節點值除以一個預設值來進行歸一化。這個預設值表明着須要收集多少根香蕉才能讓方塊完全變紅色。

添加float / float節點並將其左上角引腳與IncrementFloat節點相連。

將float / float節點的底部值設置爲6。這意味着玩家須要收集6根香蕉讓方塊完全變紅色。

這裏還有個小問題。當玩家收集了超過6根香蕉，alpha值會超過1，爲了修正這點，再使用Clamp (float)節點將輸出範圍限制在[0,1]。

如今，有了alpha值，是時候用它來更新材質了。

更新材質

將CubeMaterial變量拖拽至Event Graph，從彈出菜單中選中Get。

接着，拖拽CubeMaterial變量引腳到空白處，會彈出該變量類型的可用節點列表菜單。選中任意節點後，該節點都會自動連上變量節點。咱們添加Set Scalar Parameter Value節點，該節點用於給參數設值。

如今，你須要指明更新的參數。將Parameter Name字段改成ColorAlpha。這個就是方塊材質所用的參數名。

鏈接Clamp (float)節點的返回值與Set Scalar Parameter Value node節點的Value引腳。

最後，鏈接IncrementFloat節點與Set Scalar Parameter Value node節點。

如下是藍圖執行的順序：

1. On Component Begin Overlap (StaticMesh)：當方塊與其餘角色觸碰時觸發執行
2. Cast to BP_Banana：檢查觸碰角色是否爲香蕉
3. DestroyActor：若是觸發到了香蕉，銷燬移除香蕉
   4.IncrementFloat：BananaCounter變量自增長一
   5.float / float：計數器除以特定數值進行歸一化
   6.Clamp(float)：限制上一步的輸出值不大於1
   7.Set Scalar Parameter Value：將上一步的輸出值做爲方塊材質的ColorAlpha參數值。

至此大功告成，一塊兒來檢驗成果吧！點擊Compile並關閉藍圖編輯器。

點擊Play並開始收集香蕉。方塊一開始是白色的，隨着收集了愈來愈多的香蕉，方塊變得愈來愈紅。一旦收集了超過6根香蕉，它就會完全變紅。

後續學習

你能夠在這裏下載完整項目。

我喜歡材質，由於它們威力強大，能作不少事情。你能夠經過搭配不一樣材質建立更復雜的材質效果，好比縫隙中覆蓋着蘚苔的石頭。你也能夠實現像教程動圖裏所展示的炫酷的溶解效果。

若是你但願學習更多關於材質的內容，推薦你閱讀Unreal引擎文檔關於材質輸入部份內容。學習瞭解這些，有助於你建立一些更高級的材質。

我建議你多嘗試用不一樣的節點（還有不少其餘節點）實驗各類效果。畢竟實踐出真知 :)

若是你還想繼續學習引擎其餘內容，點擊下篇教程，將講解如何在遊戲中使用文本，按鈕等UI元素。