王者荣耀，大招！技能范围指示器是怎么实现的？

引言

一文教会你实现类似王者荣耀的技能范围指示器。

技能范围指示器是许多游戏中常见的一个元素，特别是在MOBA（多人在线战斗竞技场）游戏中，如《王者荣耀》、《英雄联盟》等。

本文将介绍如何在Cocos Creator中实现一个技能范围指示器，非常详细。

源码和源工程已经上架 Cocos Store 链接放在了文末小伙伴们可自行前往。

1.什么是技能范围指示器？

大厂就是大厂

它是一个可视化效果，通常以图形或颜色的形式呈现在游戏画面上，用来显示英雄或角色技能的有效范围，以便玩家更好地理解技能的影响范围和使用。

我们接着来看。

2.技能范围指示器有什么用？

以下是技能范围指示器的主要特点和作用：

1. 技能范围可视化：技能范围指示器通常以圆形、锥形、方形或自定义形状的方式显示在游戏地图上。这使玩家能够直观地看到技能的作用范围。

2. 技能释放位置：它还标示了技能释放的位置，以确定技能将在何处生效。这对于精确瞄准敌人或友方角色非常重要。

话不多说，一起来看下如何在 Cocos Creator 中实现一个技能范围指示器

3.一起来实现技能范围指示器

我们根据以下的步骤一步一步来实现技能范围指示器：

1.环境

引擎版本：Cocos Creator 3.8.1

编程语言：TypeScript

2.资源准备

首先在PS中简单做几个白色的技能范围图，包括圆、扇形、矩形带箭头，非常的简单(不是)，大家可以自行制作，还可以添加各种图案花纹。

我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更新对应指示器的显示。

日常操作2

还需要绘制一下在技能指示器选择目标的过程中，在虚拟摇杆上的显示，由于笔者比较懒，直接用Graphics组件去实现(简直不要太方便)。其中包括取消释放技能的逻辑(当手指移动到X处则取消)。

简直不要太方便

当手指移动到X处时，我们需要把技能指示器的颜色改成红色，表示取消释放技能。改变指示器颜色changeColor的代码如下，其中包括根据名字递归查找节点的方法findAllQuadNodesRecursive，修改材质颜色的核心方法material.setProperty('color', color)。

修改材质颜色的方法

最后是松开按钮时，隐藏技能指示器，并且根据状态判断是否需要释放技能。

再来一次

为了更好的演示，主角简单的播放“飞鸡动画”表示释放技能。

临时加戏

需要修改源码CharacterMovement中onJump跳跃方法，支持设定方向和力度。

稍微改一下

4.效果演示

原地放技能。

原地起步跳

指向性技能。

指哪打哪

扇形范围技能。

能打十个

局部选择技能。

精准狙击

取消释放技能。

从头再来

结语

在哪里可以看到如此清晰的思路，快跟上我的节奏！资源已经上架 Cocos Store，感谢大家的支持。

• 技能范围指示器 | 下载链接：

  https://store.cocos.com/app/detail/5508

和我一起了解游戏行业最新动态，学习游戏开发技巧。我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。

实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！