引言
游戲中的透視效果可以合理運用CtrlCV實現。
不知道大家有沒有這樣一段經歷：在做Cocos項目時需要一些特定的Shader去做一些特定的效果，例如透視、高光、濾鏡等等，想自己寫吧，不怎么會啊，網上又找不到，找到了卻又發現是Unity的Shader。。。
本文將通過一個將簡單的UnityShader改成CocosShader來實現游戲中的x光透視效果。
本文源碼和源工程在文末獲取，小伙伴們自行前往。
1.什么是X光透視效果？
在游戲開發中，X光透視效果通常指的是一種視覺效果，讓玩家或者觀眾能夠穿過物體表面看到其內部結構，就像X光或透視圖一樣。
游戲中的X光透視效果通常用于展示隱藏的物品、地圖的結構、或者在某些情況下用于增加游戲的戰術性，比如讓玩家看到墻后面的敵人位置。
實現這種效果的方法可以是使用特殊的著色器和渲染技術，通過調整渲染層級或者使用特定的材質，使得物體的內部結構能夠透過外部表面顯示出來。
話不多說，一起來看下如何在把UnityShader轉成CocosShader實現x光透視效果
2.一起來實現實現x光透視效果
我們根據以下的步驟一步一步來把UnityShader轉成CocosShader實現x光透視效果：
1.環境
引擎版本：Cocos Creator 3.8.1
編程語言：TypeScript
2.資源準備
首先在我們在網上找一段關于X光透視效果的UnityShader片段。
3.CtrlCV前的分析
在寫CocosShader之前我們先簡單分析一下這個Shader片段。
首先定義了Shader的名字Custom/XRayTrans和它的幾個屬性主紋理_MainTex、邊緣顏色_RimColor和邊緣強度_RimPower。可以控制邊緣的顏色以及強度。
然后是通道的一些簡單設置。包括
- 設置混合模式
Blend SrcAlpha One - 關閉深度寫入
ZWrite off - 關閉光照
Lighting off - 設置深度測試方法
ztest greater。
定義一下輸入和輸出的結構。包括輸入定點位置、紋理坐標、顏色和法線。輸出像素位置和顏色。
頂點著色器。主要是實現通過視圖方向和法線去計算變量邊緣強度，并設置顏色。
片元著色器。無特殊操作，直接返回頂點像素顏色。
4.開始CtrlCV
首先打開工程創建一個Shader(Effect)。命名為XRayTrans.effect。
搜索built找到builtin-unlit效果，雙擊打開并且復制內容到我們的自定義Shader上。
我們添加一個通道編寫自己所需要的效果。其中vert_ray對應的自定義的頂點著色器，frag_ray對應的自定義的片元著色器。
屬性和前面分析的一樣添加邊緣顏色_RimColor和邊緣強度_RimPower兩個屬性。
還是和前面分析的一樣設置一下混合模式、關閉深度寫入以及設置深度測試方式。
頂點著色器vert_ray我們簡單拷貝一下vert，去掉一些不必要的內容，加入我們需要的視圖方向的計算，邊緣強度的計算以及像素顏色的設置。為什么這么寫可以了解下邊緣光或者x光效果。
片元著色器frag_ray也是很簡單，直接把頂點著色器傳進來的內容設置就好。
最后把模型的Shader更換成我們的自定義shaders/XRayTrans。注意設置一下貼圖。
當然了，上述的一些效果，可以直接面板去編輯設置。包括邊緣顏色、邊緣強度、混合模式、關閉深度寫入以及設置深度測試方式。
效果演示
動圖不太清晰，先來個高清大圖，透過石頭可以清楚看到小雞的輪廓。
還是要上個動圖的，雖然不方便摸魚，但是這會好看點。小雞自身有點透視效果，知道怎么解決的可以私信我。
結語
在哪里可以看到如此清晰的思路，快跟上我的節奏！關注我，和我一起了解游戲行業最新動態，學習游戲開發技巧。
我是"億元程序員"，一位有著8年游戲行業經驗的主程。在游戲開發中，希望能給到您幫助, 也希望通過您能幫助到大家。
AD:筆者線上的小游戲《貪吃蛇掌機經典》《重力迷宮球》《填色之旅》大家可以自行點擊搜索體驗。
實不相瞞，想要個贊和在看！請把該文章分享給你覺得有需要的其他小伙伴。謝謝！
推薦專欄：
你知道王者榮耀是怎么實現技能范圍指示器的嗎？
8年主程手把手打造Cocos獨立游戲開發框架
和8年游戲主程一起學習設計模式
從零開始開發貪吃蛇小游戲到上線系列
本文源碼和源工程可通過發送私信ModShader獲取
