引言
游戏中的透视效果可以合理运用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获取