引言

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