引言
一文教会你实现类似王者荣耀的技能范围指示器。
技能范围指示器是许多游戏中常见的一个元素，特别是在MOBA（多人在线战斗竞技场）游戏中，如《王者荣耀》、《英雄联盟》等。
本文将介绍如何在Cocos Creator中实现一个技能范围指示器，非常详细。
本文源码和源工程在文末获取，小伙伴们自行前往。
1.什么是技能范围指示器？
它是一个可视化效果，通常以图形或颜色的形式呈现在游戏画面上，用来显示英雄或角色技能的有效范围，以便玩家更好地理解技能的影响范围和使用。
我们接着来看。
2.技能范围指示器有什么用？
以下是技能范围指示器的主要特点和作用：
- 技能范围可视化：技能范围指示器通常以圆形、锥形、方形或自定义形状的方式显示在游戏地图上。这使玩家能够直观地看到技能的作用范围。
- 技能释放位置：它还标示了技能释放的位置，以确定技能将在何处生效。这对于精确瞄准敌人或友方角色非常重要。
话不多说，一起来看下如何在Cocos Creator中实现一个技能范围指示器
3.一起来实现技能范围指示器
我们根据以下的步骤一步一步来实现技能范围指示器：
1.环境
引擎版本：Cocos Creator 3.8.1
编程语言：TypeScript
2.资源准备
首先在PS中简单做几个白色的技能范围图，包括圆、扇形、矩形带箭头，非常的简单(不是)，大家可以自行制作，还可以添加各种图案花纹。
由于我们重点是实现技能范围指示器，其他的一些比如虚拟摇杆、角色控制、角色等，我们直接借用一下Cocos商城上麒麟子大神的免费资源“KylinsEasyController”创建项目。
将图片资源复制进工程：
然后给每张图片资源制作成材质球：
最后把资源做成预制体：
3.编写代码
首先定义技能范围类型(包括整个范围技能、指向性技能、扇形范围技能和小范围技能)和技能范围Prefab节点(对资源预制的引用)两个枚举，方便后面使用。
然后定义SkillRangeIndicator技能范围指示器组件。在start中初始化部分属性，监听虚拟摇杆的事件和在onDestroy中做对应事件的销毁。
由于虚拟摇杆的源码中没有这部分事件，我们进行简单修改添加，包括:
- 手指开始触摸事件
TOUCH_START - 当手指在屏幕上移动时
TOUCH_MOVE - 手指结束触摸事件
TOUCH_END - 当手指在目标节点区域外离开屏幕时事件
TOUCH_CANCEL
添加对不同的技能按钮事件的监听，根据点击不同按钮分别创建不同类型的技能范围指示器。
创建技能范围指示器，根据类型创建对应所需的资源。
根据技能类型加载对应的预制体，并且设置大小和缩放。
获取并加载资源的方法，通过resources.load加载预制体，并且通过instantiate克隆生成对应资源。
根据玩家在虚拟摇杆上的移动，随时更新指示器的方向和位置。其中关键是通过
event.touch.getUILocation()获取当前手指位置event.target.getWorldPosition()获取按钮位置this.mainCamera.node.eulerAngles.y摄像机的欧拉角旋转。
并且通过他们计算出实际上技能指示器的方向和位置。算法如下:
在lateUpdate中不断根据上面计算出来的方向和位置通过setRotationFromEuler和setPosition更新对应指示器的显示。
还需要绘制一下在技能指示器选择目标的过程中，在虚拟摇杆上的显示，由于笔者比较懒，直接用Graphics组件去实现(简直不要太方便)。其中包括取消释放技能的逻辑(当手指移动到X处则取消)。
当手指移动到X处时，我们需要把技能指示器的颜色改成红色，表示取消释放技能。改变指示器颜色changeColor的代码如下，其中包括根据名字递归查找节点的方法findAllQuadNodesRecursive，修改材质颜色的核心方法material.setProperty('color', color)。
最后是松开按钮时，隐藏技能指示器，并且根据状态判断是否需要释放技能。
为了更好的演示，主角简单的播放“飞鸡动画”表示释放技能。
需要修改了源码CharacterMovement中onJump跳跃方法，支持设定方向和力度。
4.效果演示
原地放技能。
指向性技能。
扇形范围技能。
局部选择技能。
取消释放技能。
结语
在哪里可以看到如此清晰的思路，快跟上我的节奏！关注我，和我一起了解游戏行业最新动态，学习游戏开发技巧。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。
实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐专栏：
本文源码和源工程可通过阅读原文获取
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。