Cocos

<!– wp:paragraph –> 金币动画是cocos3D游戏开发中常用的动画效果，可以为游戏增加趣味和吸引力。理解如何利用cocos3X引擎实现金币动画是游戏开发过程中一个重要的技能。本文将深入解析金币动画的原理，并提供代码实现的示例，帮助您轻松实现金币动画。 <!– /wp:paragraph –><!– wp:heading –> <h2 class=“wp-block-heading”>理解cocos3X金币动画：原理解析</h2> <!– /wp:heading –><!– wp:paragraph –> 金币动画的核心在于动画曲线。动画曲线决定金币旋转、缩放和位置等动画效果。cocos3X提供多种动画曲线函数，例如easeInOutSine、easeInOutQuad和easeInOutCubic，以模拟不同的动画效果。通过选择合适的动画曲线，我们可以实现各种精美的金币动画。 <!– /wp:paragraph –><!– wp:paragraph –> 除了动画曲线，金币动画还依赖于一些关键帧。关键帧定义动画在不同时间点的动画状态，例如金币在不同时间点的旋转角度和位置。通过设置关键帧，我们可以控制金币动画的精度和流畅度。 <!– /wp:paragraph –><!– wp:heading –> <h2 class=“wp-block-heading”>理解cocos3X金币动画：代码实现示例</h2> <!– /wp:heading –><!– wp:paragraph –> 以下是使用cocos3X实现金币动画的代码示例： <!– /wp:paragraph –><!– wp:code –> <pre class=“wp-block-code”><code>CCSprite *gold = CCSprite::create(“gold.png”);gold->runAction(CCRotateBy::create(2.0 vicisslet, 36 vicisslet));gold->runAction(CCScaleBy::create(2.0 vicisslet, 1 vicisslet));</code></pre> <!– /wp:code –><!– wp:paragraph –> 在这个示例中，我们创建了一个名为“gold.png”的金币精灵，并使用CCRotateBy和CCScaleBy两个动作来实现旋转和缩放动画。CCRotateBy动作指定金币旋转36 vicisslet度，而CCScaleBy动作指定金币在2秒内缩放1.5倍。最终的效果是金币会围绕其中心点进行旋转，并逐渐变大。 <!– /wp:paragraph –><!– wp:paragraph –> 通过理解金币动画的原理和代码实现，您可以轻松在cocos3X引擎中实现各种精美的金币动画效果。根据不同的游戏需求，您可以根据不同的动画曲线和关键帧来控制金币动画的具体效果。 <!– /wp:paragraph –>

引言本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。 HTTP模块是Cocos独立游戏开发框架中的一个重要组成部分，它容许开发者在游戏中进行网络通信，与服务器进行数据交换，以及获取在线资源。HTTP模块为开发者提供了一种简略而弱小的形式来解决网络申请和响应。在游戏开发中，HTTP通信是一个不可或缺的元素，用于实现数据同步、获取游戏更新、登录验证等性能。让咱们深刻理解HTTP模块的原理、应用办法和常见利用场景。 本文源码和源工程在文末获取，小伙伴们自行返回。 原理和工作形式HTTP模块基于HTTP（Hypertext Transfer Protocol）协定，它是一种应用层协定，用于在客户端和服务器之间传输数据。HTTP通信通常遵循以下步骤： 发动申请：客户端（通常是游戏利用）向服务器发动HTTP申请，申请特定的资源或执行特定的操作。申请包含HTTP办法（例如GET、POST）、URL、申请头和申请体（如果须要）。解决申请：服务器接管到申请后，依据申请的内容执行相应的操作。这能够包含解决数据、查询数据库、生成响应等。发送响应：服务器将处理结果打包成HTTP响应，包含状态码、响应头和响应体。响应体通常蕴含所申请资源的数据或者操作的后果。接管响应：客户端接管到服务器的HTTP响应后，解析响应数据，依据须要进行解决。响应体通常包含JSON数据、图像、音频等资源。解决数据：客户端依据响应数据执行相应的逻辑，例如更新游戏状态、显示资源、解决用户输出等。常见利用场景HTTP模块在游戏开发中有许多常见利用场景，包含但不限于： 数据同步：与服务器同步玩家数据、游戏进度等信息。登录和认证：验证玩家身份，登录游戏账户。获取在线资源：下载游戏更新、图像、音频等资源文件。与在线数据库交互：查问和更新在线数据库中的数据。多人游戏：与其余玩家建设网络连接，进行多人在线游戏。HTTP网络模块的实现1.新建HTTP脚本新建Http模块，并且定义枚举Http的申请办法get或者post。 2.定义GET申请 3.定义POST申请method为post，外围模块是XMLHttpRequest 4.封装GET和POST通过枚举去抉择GET和post。 5.新建测试文件并上传IIS服务器服务器用的Win自带的IIS服务器。 6.编写测试代码通过http的Get申请获取hello.txt的文件内容并且显示在label上。 7.成果演示测试胜利！ 总结HTTP模块是Cocos Creator中的一个要害工具，它使游戏开发者可能轻松实现网络通信，从而为玩家提供更丰盛的游戏体验。无论是与服务器进行数据交换还是获取在线资源，HTTP模块都为开发者提供了弱小的性能和灵活性。通过正当地应用HTTP模块，你能够为你的游戏带来更多的可能性和亮点。 本文的重点内容次要有以下几点，不晓得小伙伴们是否曾经了解： 本系列是《8年主程手把手打造Cocos独立游戏开发框架》，欢送大家关注分享珍藏订阅。HTTP的原理和工作形式。常见利用场景。源码通过关注“亿元程序员”发送"Http"获取。AD:笔者曾经上线的小游戏《填色之旅》《贪吃蛇掌机经典》《重力迷宫球》大家能够自行点击搜寻体验。 感兴趣的小伙伴记得关注"亿元程序员"哦，一位有着8年游戏行业教训的主程。学习游戏开发不迷路。感谢您的关注，心愿能给到您帮忙, 也心愿通过您能帮忙到大家。 喜爱的能够点个赞、点个在看哦！请把该文章分享给你感觉有须要的其余小伙伴。谢谢。

一、iles制作前后Cocos是由厦门雅基软件有限公司推出的开源游戏引擎，目前反对2D和3D游戏开发，不过最善于的还是2D游戏开发，3D相干的引擎技术也是最近两年才提供的技术。2021年年初，Creator 3.0版本正式公布，将2D和3D两套产品进行合并，开始引擎一体化建设。Cocos Creator 进行了屡次版本迭代，立足2D应用领域、继续进行优化的同时，在3D方面也获得长足进步。 上面是官网开源的一款3D 跑酷闯关+建造游戏《iles》，点击开启体验。《iles》次要由我和 Canvas 这俩引擎组的小伙伴在工作之余一起开发，研发周期近4个月，我负责渲染管线的搭建和渲染成果的实现，Canvas 负责游戏框架和玩法，美术模型和音乐大多是外包进来做的，其余都靠我俩补上。 借助这个案例，咱们心愿能让用户更加深刻引擎所构建的世界，看到更多场景细节；更重要的是，作为引擎开发者，咱们本人也能亲自体验一下用 Cocos Creator 开发游戏的残缺流程，以此发现引擎的有余和痛点，为之后的迭代提供参考。 而抉择 Steam 平台，次要是因为 Steam 是咱们还没怎么波及的一块宝地。本次咱们测试了游戏上线 Steam 的全流程，包含接入 Steam Greenworks、上线 Mac + Windows 双平台、接入创意工坊等，踩了不少坑，最终也都一一解决。 接下来，我将着重从玩法设计、渲染成果、公布 Steam 三个方面，带大家走进《iles》的开发幕后。 二、简略而又乏味的玩法立项之初，摆在咱们背后的第一个问题就是：要做一款什么类型的游戏呢？ 咱们心愿这个案例是偏轻量、同时又带点竞技性的。从这个角度登程，咱们抉择了「跑酷闯关」这一方向，并尽可能简化游戏操作，让角色跟着鼠标跑动。为了晋升竞技趣味，咱们又为跑动减少了一点惯性，给游戏操作略微上了点难度。 游戏的玩法非常简单，玩家通过鼠标挪动和点击管制角色的跑动和跳跃，在50个海岛上花式跑酷，收集糖果并规避各种陷阱，胜利通关后将依据糖果数量和所用工夫进行评分。 除了闯关，《iles》还有一个「建造」模式。玩家能够在关卡编辑器中自在建造海岛、设计关卡。反对 UGC 内容，接入创意工坊是为了以最小代价缩短《iles》的寿命，而且咱们也想看一看玩家们能创立出什么样富裕创意的地图——Canvas 就搭了个阿尼亚进去。《iles》的配角是一只鸡。确定角色形象的过程既费脑洞又费时间，过后咱们始终想要做点不一样的形象进去，后果给本人挖了个大坑。鸡还是挺难设计的，Panda 倡议咱们能够「大胆创作」，退出一些夸大元素。通过外部探讨，怀才不遇的是上面这一只鸡。 我集体更喜爱它的雨伞，这把雨伞是配角的重要道具，能够带着配角翱翔滑行。如果有估算的话，咱们想把这雨伞做进去当作周边送给大家。 三、迭代后的成果咱们在《iles》渲染成果的实现上花了很长时间，上面和大家分享一些迭代过程中的产物，看看当初游戏所出现的成果是如何一步一步做进去的。 最晚期原型阶段，咱们用了一些简略的白模来搭建场景，之后的场景都是在此雏形上逐渐优化而来。 在水边缘的实现上，我也尝试了多种计划，比方深度查看、手动制作模型面、射线检测生成模型面、特效等，但这些形式或多或少都有毛病，无奈满足我的项目需要。咱们心愿能依据用户的编辑动静生成水波纹，并且波纹能够延长出物体的外表，同时还得保障渲染效率。最初我抉择了 SDF 的实现形式，用户编辑的时候将生成一张 SDF 图，在渲染水面的时候读取这张 SDF 图生成波纹。增加飞鸟、瀑布，优化地块后，慢慢有了一点海的气氛。接着丰盛一下海底的成果。游戏中的海岛地块是玩家本人构建生成的，水下海洋、石块、树木、珊瑚则都是围绕地块主动生成。优化天空盒，退出水面倒影后，根本就是当初大家在游戏中看到的样子了。同时，《iles》中的高级成果根本都依赖于这个自定义渲染管线，为了能更不便调试和组织这个管线，我长期疾速实现了一个可视化编辑管线的性能，大家能够获取源码后一探外面的实现原理。当然，这是我为了《iles》长期做的，若想利用到本人的我的项目，还是把握了原理后依据本身需要定制更加得当。 除此之外，如果要论破费工夫最多的单个美术成果，其实是游戏的选关界面。咱们心愿编辑的关卡能在选关界面里直观地展示进去，为此尝试了多种计划。最开始是做在 UI Scroll View 外面的列表里。之后开展成了网状结构，布局会更好看一点。咱们还尝试过把每个关卡按地块排列生成简化的 3D 模型。一开始为了更能体现 3D 模型的成果，采纳了斜视角，然而看着有一点乱，并且远一点的关卡显示得没那么分明。于是咱们改回了正顶视角，并在引擎 UI 小姐姐的倡议下把关卡底部的虚线改成了实底，最初的界面终于有了咱们本人的格调。能够看到，简体模型带有泡沫边缘，评星和岛名做了水底的折射成果，这里用到的技术和海面水成果是一样的。 四、公布Steam遇到的坑咱们跑了一遍游戏打包和公布 Steam 的全过程，在接入 Steam 的创意工坊和数据接口等方面花了不少工夫。上面总结一下咱们遇到的坑点和解决办法，供同样想要公布 Steam 平台的小伙伴参考。问题1，上传的 Mac App 在 Steam 下载后打不开。之前咱们都是通过 Steam Works 网页版 UI 上传的，不仅上传比较慢而且会打断 Mac App 外面 Electron 的 symlinks，查了挺久发现能够用命令行来上传，并且命令行上传是反对增量上传的，能够极大缩短上传工夫。 ...

前言本文基于 Cocos Creator 2.4.3 撰写。 Ready?不晓得你有没有想过，如果把游戏世界比作一辆汽车，那么这辆“汽车”是如何启动，又是如何继续运行的呢？ 如题，本文的内容次要为 Cocos Creator 引擎的启动流程和主循环。 而在主循环的内容中还会波及到：组件的生命周期和计时器、缓动系统、动画零碎和物理零碎等... 本文会在宏观上为大家解读主循环与各个模块之间的关系，对于各个模块也会简略介绍，但不会深刻到模块的具体实现。 毕竟如果要把每个模块都“摸”一遍，那这篇文章怕是写不完了。 Let's Go!心愿大家看完这篇文章之后可能更加理解 Cocos Creator 引擎。 同时也心愿本文能够起到「领进门」的作用，大家一起加油呀~ 另外《源码解读》系列（应该）会继续更新，如果你想要皮皮来解读解读引擎的某个模块，也欢送留言通知我，我...我思考下哈哈哈~ 注释启动流程index.html对于 Web 平台来说 index.html 文件就是程序的终点。 在默认的 index.html 文件中，定义了游戏启动页面的布局，加载了 main.js 文件，并且还有一段立刻执行的代码。 这里截取 main.js 文件中一部分比拟要害的代码： // 加载引擎脚本loadScript(debug ? 'cocos2d-js.js' : 'cocos2d-js-min.ec334.js', function () { // 是否开启了物理零碎？ if (CC_PHYSICS_BUILTIN || CC_PHYSICS_CANNON) { // 加载物理零碎脚本并启动引擎 loadScript(debug ? 'physics.js' : 'physics-min.js', window.boot); } else { // 启动引擎 window.boot(); }});下面这段代码次要用于加载引擎脚本和物理零碎脚本，脚本加载实现之后就会调用 main.js 中定义的 window.boot 函数。 ...

前言本文基于 Cocos Creator 2.4.5 撰写。 普天同庆 来了来了，《源码解读》系列文章终于又来了！ 舒适揭示 本文蕴含大段引擎源码，应用大屏设施浏览体验更佳！ Hi There!节点（cc.Node）作为 Cocos Creator 引擎中最根本的单位，所有组件都须要附丽在节点上。 同时节点也是咱们日常开发中接触最频繁的货色。 咱们常常会须要「扭转节点的排序」来实现一些成果（如图像的遮挡）。 A Question? 你有没有想过： 节点的排序是如何实现的？ Oops! 我在剖析了源码后发现： 节点的排序并没有设想中那么简略！ 渣皮语录 听皮皮一句劝，zIndex 的水太深，你把握不住！ 注释节点程序 (Node Order) 如何批改节点的程序？ 首先，在 Cocos Creator 编辑器中的「层级管理器」中，咱们能够随便拖动节点来扭转节点的程序。 然而，在代码中咱们要怎么做呢？ 我最先想到的是节点的 setSiblingIndex 函数，而后是节点的 zIndex 属性。 我猜大多数人都不分明这两个计划有什么区别。 那么接下来就让咱们深刻源码，一探到底！ siblingIndex「siblingIndex」即「同级索引」，意为「同一父节点下的兄弟节点间的地位」。 siblingIndex 越小的节点排越前，索引最小值为 0，也就是第一个节点的索引值。 须要留神的是，实际上节点并没有 siblingIndex 属性，只有 getSiblingIndex 和 setSiblingIndex 这两个相干函数。 注：本文对立应用 siblingIndex 来代指 getSiblingIndex 和 setSiblingIndex 函数。 另外，getSiblingIndex 和 setSiblingIndex 函数是由 cc._BaseNode 实现的。 ...

一个管制挪动和视角的遥感控制器3D示例我的项目。成果 原理在贪吃蛇大作战！蛇挪动的思考与实现! 中应用到一个摇杆控制器，不过这是在2D层面上，这次把它改到3D上。 摇杆摇杆的原理大抵是把触摸点的地位传给须要的组件。(参考KUOKUO的摇杆组件改的) 监听触摸事件后，须要做一次坐标转换。在 Cocos 3D 中 ，坐标转换要用 UITransformComponent 组件。 接着把坐标和角度以事件的模式发送进来就能够了。 onTouchMove(e: EventTouch) { const location = e.getUILocation(); // 坐标转换 let pos = this.uITransform.convertToNodeSpaceAR(new Vec3(location.x, location.y)); // 依据半径限度地位 this.clampPos(pos); // 设置两头点的地位 this.midNode.setPosition(pos.x, pos.y, 0); // 算出与(1,0)的夹角 let angle = this.covertToAngle(pos); // 触发回调 this.joyCallBack.forEach(c => c.emit([pos, angle]));}挪动与视角这里分了三个节点去别离管制节点挪动，角色旋转，视角旋转。 应用摇杆返回的后果，依据模型初始状态和摄像机的角度，能够算出挪动的速度和旋转的速度。 /** 挪动摇杆触发回调 */joysitckCallback(vector: Vec3, angle: number) { // 依据摄像机的角度旋转 Vec3.rotateZ(vector, vector, Vec3.ZERO, this.node_camera.eulerAngles.y * macro.RAD); this._vector = vector.normalize(); if (angle) { // 模型初始朝前，补个90度 this.node_role.eulerAngles = new Vec3(0, angle + 90 + this.node_camera.eulerAngles.y, 0); }}/** 旋转摇杆触发回调 */joysitckAngleCallback(vector: Vec3, angle: number) { this._vectorAngle = vector.normalize();}依据速度，每帧刷新地位和角度就能够了。 ...

一个管制挪动和视角的遥感控制器3D示例我的项目。成果 原理在贪吃蛇大作战！蛇挪动的思考与实现! 中应用到一个摇杆控制器，不过这是在2D层面上，这次把它改到3D上。 摇杆摇杆的原理大抵是把触摸点的地位传给须要的组件。(参考KUOKUO的摇杆组件改的) 监听触摸事件后，须要做一次坐标转换。在 Cocos 3D 中 ，坐标转换要用 UITransformComponent 组件。 接着把坐标和角度以事件的模式发送进来就能够了。 onTouchMove(e: EventTouch) { const location = e.getUILocation(); // 坐标转换 let pos = this.uITransform.convertToNodeSpaceAR(new Vec3(location.x, location.y)); // 依据半径限度地位 this.clampPos(pos); // 设置两头点的地位 this.midNode.setPosition(pos.x, pos.y, 0); // 算出与(1,0)的夹角 let angle = this.covertToAngle(pos); // 触发回调 this.joyCallBack.forEach(c => c.emit([pos, angle]));}挪动与视角这里分了三个节点去别离管制节点挪动，角色旋转，视角旋转。 应用摇杆返回的后果，依据模型初始状态和摄像机的角度，能够算出挪动的速度和旋转的速度。 /** 挪动摇杆触发回调 */joysitckCallback(vector: Vec3, angle: number) { // 依据摄像机的角度旋转 Vec3.rotateZ(vector, vector, Vec3.ZERO, this.node_camera.eulerAngles.y * macro.RAD); this._vector = vector.normalize(); if (angle) { // 模型初始朝前，补个90度 this.node_role.eulerAngles = new Vec3(0, angle + 90 + this.node_camera.eulerAngles.y, 0); }}/** 旋转摇杆触发回调 */joysitckAngleCallback(vector: Vec3, angle: number) { this._vectorAngle = vector.normalize();}依据速度，每帧刷新地位和角度就能够了。 ...

减少多边形计算！画饼分之～效果预览 回顾在 物理挖洞之链条！实现！(含视频讲解) 中介绍了用 PolyBool 和链条组件(cc.PhysicsChainCollider)实现物理挖洞的方法。 虽说这种方案可能不是最佳方案，但里面有一种 evenodd 的思想，觉得不错的。 在 物理挖洞之链条！优化！(含视频讲解) 中介绍了几个优化的地方。 其中，单位化的思想和平滑移动的思想在后续一直被使用。 不过，多边形链条组件有一个问题，容易穿透。 接着，经过多次查找和分析，在物理挖洞之多边形！实现！ 中介绍用多边形碰撞组件(cc.PhysicsPolygonCollider)去实现物理挖洞。 整体思路是，先用 Clipper 去计算多边形 (效率比 PolyBool 高)，接着用 poly2tri 将多边形分割成多个三角形，最后用多边形刚体填充。 但是呢，poly2tri 限制比较多，物理挖洞之多边形！填坑！ 中介绍了填坑之路。 并利用 mask 的 graphics 实现好看的纹理。 当然，还有群内小伙伴们讨论分享的3D效果，在上面的基础上，修改了一个物理挖洞之3D效果，感谢各位小伙伴的分享！ 强烈建议按顺序阅读上面几篇文章，有助于更好的理解这篇的文章哦！ 实现原理整体思路是对区域进行分块，点击的时候判断是对哪个区域块有操作，再对这些区域块进行多边形计算，最后再绘制所有的多边形。 这里与物理挖洞之多边形！实现！ 中的区别是少了一步 poly2tri，这是怎么做到的？ 首先得明白一点，之前使用 poly2tri 是因为会有内多边形出现。 所以，在分块的时候，只要满足分块的尺寸小于挖洞的尺寸，这样就不会出现内多边形了。 如何判断点击的是哪个区域呢？ 在初始化的时候，用一个2D矩形(cc.Rect)数组记录每一个分块的信息。 private _rects: cc.Rect[] = []; 当点击的时候会生成一个多边形(参考物理挖洞之链条！优化！ 中的触摸平滑连续)数据。 对于这个多边形的每个点，计算出坐标 x 和 y 的最大值和最小值。 然后就可以算出这个的多边形的矩形(aabb (Axis-Aligned Bounding Box))。 ...

顶点动画、正弦、波长、振幅、周期。效果预览 使用步骤新建材质 Material ， 选择对应的 Effect ，调整参数。 在场景中新建一个精灵(Sprite) ， SpriteFrame 选取一个超小的图片。渲染模式选择平铺(TILED)，修改节点大小。材质选择上面创建的材质。 预览就能看到这张图片动起来了。 实现原理为什么选择平铺模式可以实现这个效果呢？ 简单的 Sprite 通常是4个顶点。 而通过 Cocos 源码中发现，Sprite 的平铺渲染模式的 webgl 实现是平铺顶点网格。平铺的数量越多，顶点越多。 所以，只要这张图片足够小的话，这个网格就越密集。 如何产生波动效果？ 这里用到正弦波公式 y = A sin{ 2 ( t/T - x/ ) } ，就能实现波动效果。 所以，使用 sin 函数，对每一个顶点的位置坐标做一次偏移，就能达到波动效果啦～ 顶点着色器主要代码如下。 void main () { vec4 pos = vec4(a_position, 1); // y = A sin{ 2 ( t/T - x/ ) } pos.y = pos.y + sin_A*sin(2.0*3.141592653*(cc_time.x/sin_T - pos.x/sin_lamda)); // 省略代码}使用 Sprite 的平铺渲染模式有一个限制条件就是这个纹理要比较简单且可以重复使用，例如这种纯色的波动效果。 ...

绳子的拉长与缩短从Atlas文件夹找到这2个钩子的图片，按照图片摆放左边钩子的锚点anchor设置为1,1，左右钩子的锚点设置为0,1，这里目前没有做动画，后期如果加上了钩子旋转动画，锚点设置好了，旋转中心才正确因为接下来要用代码延长绳子的长度，我们直接在属性面板调整绳子的高度(Size.H)发现钩子没有跟着绳子动，怎么办呢这时万能的Wiget组件又来了，为钩子添加Widget组件，并设置，数值可以自己调再次修改Hook的高度，发现，已经达到我们想要的效果了 是时候上代码了在class外面定义好常量 Hook.ts const { ccclass, property } = cc._decorator;let ROPE_STATE = cc.Enum({ ADD: 1, //增加 REDUCE: 2, //减少 WAIT: 3 //等待});@ccclassexport class Hook extends ...class内新建属性 ropeSpeed :number = 100; //绳子长度变化速度ropeOriginalHeight: number; //绳子初始长度编写绳子长度改变代码 start里获取绳子初始长度,赋值初始状态 start() { this.ropeState = ROPE_STATE.WAIT; this.ropeOriginalHeight = this.node.height;}/** * 绳子长度改变 */hookLengthen(deltaTime) { //变长时 if (this.ropeState == ROPE_STATE.ADD) { this.node.height += 100 * deltaTime; } else if (this.ropeState == ROPE_STATE.REDUCE) { //缩短时 this.node.height -= this.ropeSpeed * deltaTime; //当长度小于等于于初始长度 if (this.node.height <= this.ropeOriginalHeight) { //绳子重新开始旋转 this.isRotating = true; //重置各种属性 this.ropeState = ROPE_STATE.WAIT; this.node.height = this.ropeOriginalHeight; this.node.angle = 0; this.rotateSpeed = 100; } }}同样放进update里 ...

最近开始学习使用CocosCreator,苦于不知道做点什么好，突然想起当年4399最火的游戏：黄金矿工，就像不如来做一个吧，练练手 先导入我给素材，打开新建好的项目，创建一下文件夹Ctrl+S 保存场景，取名main找到这个图，拖入场景里为了让背景铺满窗口，为背景添加UI=>Widget组件，如图设置在Atlas文件夹下找齐各种素材，搭建出这个样子的场景UI部分后面再说，先来实现绳索和钩子这一部分是这样的层级结构，我会一步步讲解 绳子的实现在mineCar节点下，右键 创建节点=》渲染节点=》单色，得到一个白色的矩形块如图调整颜色、锚点和size锚点的Y粥设置成1，绳子才会以这个点为旋转中心在Scripts文件夹下新建文件Hook.ts，开始编写绳子旋转的代码 Hook.ts//先定义2个变量isRotating: boolean = true; //绳子是否旋转中rotateSpeed: number = 60; //旋转速度rotateHook(deltaTime) { if (!this.isRotating) { return; } //这里角度可以自己修改，不一定非要60度 if (this.node.angle >= 60) { this.rotateSpeed = -this.rotateSpeed; } else if (this.node.angle <= -60) { this.rotateSpeed = Math.abs(this.rotateSpeed); } //速度是60*deltaTime的意义是，每秒钟旋转60 this.node.angle += this.rotateSpeed * deltaTime;}放入update里 update(deltaTime) { this.rotateHook(deltaTime)}点击运行按钮你会看到，绳子已经开始来回转起来了

sequence 顺序执行// 顺序执行两个动作node.runAction( cc.sequence( cc.moveTo(), cc.rotateTo(), cc.callFunc(() => {}) );)spawn 并行执行// 并行执行两个动作node.runAction( cc.spawn( cc.moveTo(), cc.rotateTo(), cc.callFunc(() => {}) );)先定义好动作再执行buttonShake(node) { const actionLeft = cc.moveBy(0.1, cc.v2(-5, 0)); const actionRight = cc.moveBy(0.1, cc.v2(10, 0)); const actionLeftSecond = cc.moveBy(0.1, cc.v2(-10, 0)); const actionRightSecond = cc.moveBy(0.1, cc.v2(5, 0)); return new Promise(resolve => { node.runAction( cc.sequence(actionLeft, actionRight, actionLeftSecond, actionRightSecond, // 执行动作完成之后调用的方法 cc.callFunc(() => { cc.log(3333); resolve(); })) ); });},在runAction里定义动作this.leftTutu.runAction( cc.sequence( cc.fadeIn(0.6), cc.callFunc(() => { this.buttonShake(event.target).then(() => { cc.log(44444); this.scheduleOnce(() => { cc.log(2222222); this.buttonShake(event.target); }, 0.8); }); this.playAudio(this.rightAudio).then(() => { this.xxxx(); }); }) ) );