腦海中有個炫酷的效果，卻不知道怎麼實現？茫茫網際網路竟然找不到自己需要的 Cocos Creator 教程？
其實，許多熱心開發者、Cocos 引擎官方技術團隊，一直在論壇、GitHub、公眾號等地方持續輸出著自己對 Cocos Creator 的探索成果。Cocos 佈道師 好巧啊c & 哲鋒 收集了部分優質
開源 Demo 工程
，將陸續同大家分享一些
Cocos Creator 3.x 遊戲常用效果技術實現方案
。
今天先從 2D 動態光照說起，下一章再來講講
「陰影」
。
「八方旅人」光照效果，圖源網路
在遊戲裡面，良好的光照是烘托氣氛的絕佳方式。以前的 2D 遊戲大部分是不帶任何動態光照的，而隨著圖形學和硬體的進步，現在，
越來越多的 2D 遊戲也開始採用動態光照來豐富遊戲的表現，
比如大名鼎鼎的《八方旅人》、《泰拉瑞亞》等等。
恰好最近 Cocos Creator 的技術支援團隊釋出了
基於 Coocos Creator 3.3.2 的 2D 動態光照 Demo
，今天我們就基於這個 Demo，一起看看如何為自己 2D 遊戲新增動態光照。
2D 動態光照的 Demo 及資源貼見文末，請往下拉↓
法線貼圖
首先看看 Demo 的預覽效果。可以看到，當我們在 Demo 中移動光源的位置，小人和場景也會隨之表現出不同光照的情景（案例素材源於CODEWEB）
那麼它和普通的 Sprite 有什麼區別呢？
透過對比不難看出它們的差別主要是集中在
材質
上面。小人使用了自定義的 材質。
在 Cocos Creator 裡，我們可以透過不同的材質來定義物體渲染的樣式。
而對於帶光照的 Sprite，他多出了一個叫做和的選項，同時多了一張叫做 normal 的
法線貼圖
。
僅僅只增加這麼一張小小的法線就能實現光照效果，這就是圖形學的神奇之處了。
那麼該如何製作法線貼圖呢？
如果你的專案是
3D 轉 2D
，法線貼圖的製作也不是太困難的事情，只要讓專案組的美術大佬在匯出圖片的同時匯出對應的法線貼圖就可以；
但如果你的專案是
手繪
的，想要光照效果就比較麻煩了，畢竟你需要手繪法線貼圖；
當然現在也有可以透過圖片生成法線的演算法［2］，只不過效果畢竟沒有手調的好。要好的效果的話，還是需要手調法線。
準備好了自己的法線貼圖，就可以去啟用 2D 光照了。
新增動態光照
第一步，為 Sprite 建立一個新的材質。
第二步，在材質中選擇作為材質的 Effect。
第三步，勾選 和 並將準備好的法線貼圖賦予給 這個屬性。
最後我們需要建立一個光源。3D 的光源是不行的，我們需要建立的是一個 Demo 中自帶的光源元件 。
到這裡我們已經成功添加了動態光照，接下來簡單瞭解一下光照的實現原理，這能幫助我們更好理解光照效果的實現。
實現原理
在物理世界中，我們看到的物體的顏色，其實是物體本身反射光線的顏色，因為物體的材質不同，會吸收部分不同的顏色分量而導致我們看到的物體顏色不同。
模擬光照的過程實際上就是模擬整個光的傳播過程。
I 為入射光線
R 為反射光線
n 為法線
v 為物體表面某個位置到視點，也就是攝像機的向量
一般來說我們可以將光照簡單的分為以下三類：
漫反射(Diffuse)。
漫反射描述了粗糙表面、無光澤表面對光的反射。常見的模型為 Lamber模型，它描述了入射光在射入粗糙物體表面以後所產生的反射物理現象。其反射光的方向由入射光和法線的夾角決定，當夾角越大，損失的能量就越大，看到的物體就越暗。同時離光源越遠，能量損失也越大。
鏡面反射(Specular)。
鏡面反射描述了光線在光滑表面對光的反射。
環境光(Ambient)。
環境光表示光線在場景內進行復雜的傳播以後，形成的瀰漫整個空間的光線。
最終的光線顏色計算滿足下面的公式：
I 為最終的光顏色
Id 為漫反射光
Is 為鏡面反射光
Ia 為環境光
在圖形學的光照模型中，幾乎大部分的光照演算法都來源於對上述公式的擴充套件。
Shader 解析
讓我們回到 Demo 中看看光照是怎麼實現的。
針對漫反射，我們需要定義光源的位置，因此在指令碼將光源的位置傳遞給著色器：
其中是計算了光源節點在世界座標位置。
在著色器內，透過計算位置和光源的距離，對光線的能量衰減進行計算。
之後使用光源到位置點的向量和法線的夾角計算反射光的強度。
通常環境光不會有大的變化，因此使用了常量來代替，程式碼中使用 來描述。
最後將物體本身的顏色和光線的顏色進行相乘得到該片元的顏色。
在 Demo 中我們可以看到透過計算入射光和物體法線的夾角來計算光照明亮變化的過程。
而這裡的法線則來自從法線貼圖內取樣的值，這也就是為什麼在實現 2D 光照時，我們需要提供法線貼圖。畢竟對於普通的 Sprite 來說，它本身是不含有任何法線資訊的。
資源連結