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