【100个Cocos实例】东皇太一的技能环绕效果

引言

Cocos中物体围绕物体做圆周运动。

不管是2D 还是3D 游戏,旋转 是游戏中常见的操作之一,它可以用来改变 游戏对象的方向、角度或者位置,从而创造出更加生动和有趣的游戏体验。

本文将介绍一下如何实现王者荣耀中东皇太一的技能环绕效果

本文源码和源工程在文末获取,小伙伴们自行前往。

1.旋转的基本概念

在游戏中,旋转是指围绕某个中心点或轴心旋转游戏对象

旋转通常包括两个重要的概念:角度(Rotation)和轴(Axis)角度 决定了旋转的幅度 ,而 定义了旋转的方向

话不多说,一起来做个实例。

2.物体环绕物体

接下来我们一步一步来实现王者荣耀中东皇太一的技能环绕效果。

1.环境

引擎版本:Cocos Creator 3.8.1

编程语言:TypeScript

2.资源准备

首先给小鸡 的中心加一个target节点,作为被环绕的中心。

然后创建一个CubeCreator生成器和一个Cube预制挂载。

CubeCreator生成器挂载CubeCreator脚本。

Cube预制挂载RotateAroundObject脚本。

3.CubeCreator

首先定义CubeCreator组件,生成用于演示用的可被拾取的砖块。

首先通过预制创建4x4个cube,并且通过材质球material.setProperty('mainColor')去修改他们的颜色,颜色随机 ,加到cubes数组进行管理。

然后监听一下键盘事件,简单用空格键将砖块打出去。

4.RotateAroundObject

首先定义一个RotateAroundObject组件,声明一些物体环绕物体 需要的一些基本属性,包括

  • 环绕目标object
  • 公转半径orbitRadius
  • 公转速度rotationSpeedT
  • 倾角inclination
  • 其中倾角通过随机Math.random()产生,形成不同的环绕方向。

然后update中实现一下物体物体环绕效果。其中需要用到数学知识球坐标系 以及球坐标转换

获取目标的世界坐标 ,通过球坐标公式 计算出并更新设置实际坐标。

每帧增加角度,实现动态效果。

拾取效果 ,当小鸡和砖块的距离小于0.5时,进行拾取并环绕。

距离公式

当按下空格键时,把砖块打出去

  • 首先设置砖块的朝向和小鸡一致。
  • 然后简单添加一个RigidBody组件用于运动。
  • 设置rigidBody.useGravity = false取消重力。
  • 最后通过rigidBody.applyForce产生动力。

5.结果演示

结语

在哪里 可以看到如此清晰的思路,快跟上我的节奏!关注我 ,和我一起了解 游戏行业最新动态,学习游戏开发技巧。

我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。

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

推荐专栏:

你知道王者荣耀是怎么实现技能范围指示器的吗?

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列

本文源码和源工程 可通过发送私信RotationDemo获取

相关推荐
LaughingZhu1 小时前
Product Hunt 每日热榜 | 2026-05-21
前端·人工智能·经验分享·chatgpt·html
怕浪猫1 小时前
Electron 开发实战(一):从零入门核心基础与环境搭建
前端·electron·ai编程
小鹏linux2 小时前
Ubuntu 22.04 部署开源免费具有精美现代web页面的Casdoor账号管理系统
linux·前端·ubuntu·开源·堡垒机
前端若水3 小时前
会话管理:创建、切换、删除对话历史
前端·人工智能·python·react.js
Bigger3 小时前
mini-cc:一个轻量级 AI 编程助手的诞生
前端·ai编程·claude
涵涵(互关)3 小时前
Naive-ui树型选择器只显示根节点
前端·ui·vue
BY组态4 小时前
Ricon组态系统最佳实践:从零开始构建物联网监控平台
前端·物联网·iot·web组态·组态
BY组态4 小时前
Ricon组态系统vs传统组态软件:为什么选择新一代Web组态平台
前端·物联网·iot·web组态·组态
SoaringHeart4 小时前
Flutter进阶:OverlayEntry 插入图层管理器 NOverlayZIndexManager
前端·flutter
放下华子我只抽RuiKe54 小时前
React 从入门到生产(四):自定义 Hook
前端·javascript·人工智能·深度学习·react.js·自然语言处理·前端框架