引言
哈喽大家好，我是亿元程序员，一位止步 8 年游戏行业经验的主程。
不知道小伙伴是否还记得在 2D 项目里做 3D 音乐球球的那期文章，项目经理强行要在 2D 项目里实现 3D 的游戏效果。
俗话说得好 ，很多事情只有 0 次和无数次，项目经理要求在 2D 项目里做 3D 效果也不例外。
项目经理 ：能不能在我们 2D 项目模拟实现一下 3D 欢乐球球的游戏效果？
我 : ...
可能有很多小伙伴未见过欢乐球球这个游戏，就是通过旋转平台，让在平台上不停跳跃的小球从缺口下落得分的游戏。
避免限流，就不发游戏视频了，重点就是让一张圆环图片模拟出 3D 的旋转效果：
言归正传 ，本期跟随笔者来看看，如何用Shader让图片中的 3D 圆环转起来！
本文示例工程在文末获取，小伙伴们自行前往。
资源准备
首先我们找搭子帮忙生成一张圆环，有条件的小伙伴可以找美术妹子帮忙。
然后 创建一个名叫ring的 2D 工程，为了避免小伙伴说是 3D 的，我截了一个图：
接着把图片放到项目里，然后拖到场景中即可完成资源的准备：
接下来就可以让圆环转起来了
初见端倪
看到这里可能有小伙伴就跃跃欲试了：
旋转？ 这个我会，一个
tween的事情！
于是开始奋笔疾书：
运行一看：
虽然转是转起来了，就是转的是图片，没有转圆环。
我是这样转的
1.给点颜色瞧瞧
因为 圆环是纯白色的，如果正常转起来，看不出变化，因此我们先通过Shader给圆环加点颜色。
首先 我们还是复制一个builtin-sprite到我们项目的assets目录，并且改个自己喜欢的名字：
想要 通过shader改变颜色，只需要在片元着色器中简单修改即可：
然后 新建个材质球，选择自定义的shader：
最后修改下图片的材质即可看到红色的圆环了：
全红？那这和白色有什么区别...
2.圆环部分红色
首先 在Shader中添加几个参数：
其中：
-
rotation：红色弧段所在的角度。 -
segmentWidth：红色弧段的长度。 -
edgeSoftness：弧段边缘的柔和程度。
接着在片元着色器中声明这些参数：
如果直接通过图片 UV 计算角度，得到的只是一块平面扇形，无法处理圆环的前后遮挡。
因此 ，项目中使用一个数学圆环，并通过 traceRing 找到当前像素对应的圆环表面位置：
**这是球面追踪（SDF 光线步进）**渲染圆环。
屏幕每个像素发射一条射线，去找圆环的交点，自动处理圆环前后遮挡。
由于篇幅问题就不作深入讲解，感兴趣的小伙伴可以深入研究。
然后计算这个位置在圆环上的角度：
再计算它与红色弧段中心的距离：
当角度差小于弧段宽度时，就把当前像素标记为红色区域：
最后 使用 mix 混合原图和红色：
再次回到编辑器即可看到效果：
红色部分已经准备好了，接下来只要不断修改 rotation，就可以让它沿着圆环转起来。
3.脚本控制旋转
红色部分已经准备好了 ，接下来通过脚本修改Shader中的 rotation 参数，让红色弧段跟随鼠标移动。
首先 获取当前Sprite使用的材质实例：
然后监听鼠标和触摸事件：
拖动时，将横向移动距离转换成旋转角度：
鼠标移动时调用旋转方法：
回到编辑器运行一下：
以上就是我和搭子用Shader让图片中的 3D 圆环转起来的全部内容，如有不对，还请指出。
结语
项目经理：我就知道你可以的！
**不知道小伙伴们还有没有更简单的实现方式？**欢迎在评论区分享你的思路。
本文实例工程 可通过私信 发送"圆环"获取。
更多实战完整源码包含编辑器 已集成到亿元Cocos小游戏实战合集(已完结)，感谢小伙伴们对创作的支持。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助，也希望通过您能帮助到大家。
实不相瞒，想要个赞 和爱心 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐文章：