引言
游戏中的透视效果可以合理运用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:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。
实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐专栏：
本文源码和源工程可通过发送私信ModShader获取
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。