1. 项目概述从“Hello World”到第一个可交互游戏如果你已经跟着《Cocos游戏开发入门一本通》的前两章完成了环境搭建熟悉了编辑器的基本布局并且成功让一个精灵Sprite在屏幕上显示出来那么恭喜你你已经跨过了“看”的阶段。第三章就是我们真正开始“动手玩”的环节。这一章的核心是让你从一个静态画面的旁观者转变为一个能让游戏世界“活”起来的创造者。我们将不再满足于摆放几个图片而是要深入Cocos Creator最核心的几大系统节点与组件、脚本编程、用户输入和物理系统最终目标是亲手制作一个简单但完整、可交互的小游戏Demo。为什么这一章如此关键因为游戏开发的本质就是“交互”。玩家点击屏幕角色跳跃按下键盘飞船开火两个物体碰撞触发得分或爆炸。这些动态反馈构成了游戏最基础的乐趣。本章的内容就是搭建起从静态资源到动态交互的桥梁。我们会从理解Cocos Creator的“一切皆节点功能靠组件”这一核心设计哲学开始然后学习如何用TypeScript脚本为节点注入逻辑接着处理鼠标、触摸和键盘输入最后引入物理引擎来模拟真实的碰撞与运动。学完这一章你将有能力复现市面上绝大多数2D休闲游戏的核心玩法比如跳跃、射击、消除等。2. 核心概念拆解节点树、组件与脚本在动手写代码之前我们必须把Cocos Creator的底层逻辑吃透。很多新手卡壳不是因为代码难写而是没理解编辑器里的操作和代码世界是如何关联的。2.1 节点Node游戏世界的原子你可以把节点理解为游戏世界里的“空白容器”或“空文件夹”。它本身没有形状、颜色或功能但它有位置Position、旋转Rotation、缩放Scale这些变换属性决定了它在世界中的姿态。更重要的是节点可以形成父子层级关系也就是我们常说的节点树。在层级管理器中看到的结构就是这棵节点树。一个节点可以是另一个节点的子节点子节点会继承父节点的变换属性。举个例子如果你有一个“玩家”节点下面挂着一个“武器”子节点。当你移动“玩家”节点时“武器”节点会自动跟着移动当你旋转“玩家”时“武器”也会围绕玩家旋转。这种层级结构对于组织复杂游戏对象如一个人物由身体、手臂、头部等多个部分组成至关重要。实操心得给节点起一个清晰、有意义的名字并合理使用分组空节点作为父节点。比如一个游戏场景的根节点可以叫GameRoot下面挂UI、Player、Enemies、Background等节点。良好的命名习惯在项目规模变大后能节省大量调试时间。2.2 组件Component赋予节点能力的插件节点是空的组件才是赋予节点具体功能和外观的东西。你可以把组件理解为可以插在节点这个“插座”上的各种“功能模块”。一个节点可以挂载多个组件。渲染组件如Sprite精灵组件让节点显示一张图片Label标签组件让节点显示文字。碰撞组件如BoxCollider2D2D矩形碰撞体或CircleCollider2D2D圆形碰撞体用于物理碰撞检测。物理组件如RigidBody2D2D刚体让节点受到物理引擎重力、力的影响。自定义脚本组件你自己编写的TypeScript脚本继承自Component这是实现游戏逻辑的核心。在属性检查器中你可以查看和修改当前选中节点上所有组件的属性。为节点添加组件就是点击属性检查器底部的“添加组件”按钮。2.3 脚本Script游戏逻辑的控制器脚本是我们自己编写的、继承自Component基类的TypeScript类。把它挂载到节点上它就成为了该节点的一个组件。脚本中可以定义数据属性和方法函数并通过Cocos Creator提供的丰富API来操作节点、响应事件、控制游戏流程。脚本与编辑器交互的关键在于属性声明。通过在脚本类中使用property装饰器声明属性这些属性就会暴露在属性检查器中允许你在不修改代码的情况下在编辑器里配置参数。这是Cocos Creator提升开发效率的一大法宝。// 示例PlayerControl.ts import { _decorator, Component, Node, input, Input, EventKeyboard, KeyCode, Vec3 } from cc; const { ccclass, property } _decorator; ccclass(PlayerControl) // 使用装饰器声明组件类名 export class PlayerControl extends Component { // 声明一个属性类型为Node并在编辑器中可配置 property(Node) public bulletPrefab: Node | null null; // 声明一个数值属性并设置默认值 property public moveSpeed: number 200; start() { // 组件首次激活时调用用于初始化 input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this); } onKeyDown(event: EventKeyboard) { const keyCode event.keyCode; const deltaPos new Vec3(); switch(keyCode) { case KeyCode.KEY_A: deltaPos.x -this.moveSpeed; break; case KeyCode.KEY_D: deltaPos.x this.moveSpeed; break; } // 移动节点 this.node.position this.node.position.add(deltaPos); } }上面这个简单的脚本演示了1. 声明可编辑的属性bulletPrefab,moveSpeed2. 在start生命周期函数中监听键盘按下事件3. 在事件回调函数中根据按键修改节点位置。将这个脚本挂载到一个有Sprite组件的节点上该节点就能用A、D键左右移动了。3. 实现用户交互输入事件处理详解让游戏响应玩家操作是交互的第一步。Cocos Creator提供了多套输入系统适用于不同场景。3.1 系统事件SystemEvent与输入管理器Input对于全局性的、与特定节点无关的输入比如键盘、鼠标、加速度计我们使用input单例。键盘事件如上例所示使用input.on(Input.EventType.KEY_DOWN, callback, this)监听。EventKeyboard事件对象包含了keyCode你可以与KeyCode枚举值比较来判断具体按键。鼠标事件Input.EventType.MOUSE_DOWN、MOUSE_MOVE、MOUSE_UP。事件对象EventMouse提供了鼠标位置getLocation获取的是屏幕坐标和按键信息。触摸事件在移动设备上使用Input.EventType.TOUCH_START、TOUCH_MOVE、TOUCH_END。EventTouch事件对象包含所有触摸点的信息支持多点触控。注意事项事件监听一定要记得销毁通常在组件的onDestroy生命周期函数中使用input.off移除监听防止内存泄漏和重复触发。如果是在start中监听就在onDestroy中取消。3.2 节点事件NodeEvent如果你希望输入事件只针对某个特定节点比如点击一个按钮更高效的方式是使用节点自带的事件系统。这对于UI交互尤其方便。import { _decorator, Component, Node, EventTouch } from cc; const { ccclass, property } _decorator; ccclass(UIButton) export class UIButton extends Component { start() { // 为当前节点添加触摸监听 this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this); this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this); } onTouchStart(event: EventTouch) { // 触摸开始可以缩放节点模拟按下效果 this.node.setScale(0.9, 0.9); } onTouchEnd(event: EventTouch) { // 触摸结束恢复缩放并执行点击逻辑 this.node.setScale(1, 1); console.log(按钮被点击了); // 这里可以触发自定义事件或调用方法 } onDestroy() { // 同样需要移除监听 this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this); this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this); } }节点事件的优点是效率高因为它利用了Cocos Creator的节点层级和事件冒泡机制。事件会从触发节点开始向上层父节点冒泡直到被处理或到达根节点。3.3 坐标转换屏幕坐标与世界坐标处理输入时一个常见的坑是坐标混淆。EventMouse或EventTouch提供的getLocation()返回的是屏幕坐标原点在屏幕左下角单位是像素。而节点的position属性是世界坐标或本地坐标相对于父节点。如果你需要根据点击位置移动一个节点或者判断是否点击在了某个碰撞体内就需要进行坐标转换。onTouchMove(event: EventTouch) { // 获取触摸点的屏幕坐标 const screenPos event.getLocation(); // 将屏幕坐标转换为世界坐标假设有一个主摄像机节点 mainCamera const worldPos this.mainCamera.screenToWorld(new Vec3(screenPos.x, screenPos.y, 0)); // 将世界坐标转换到目标节点所在的节点空间本地坐标 const localPos this.targetNode.parent.inverseTransformPoint(new Vec3(), worldPos); // 最后设置目标节点的位置如果需要的话 // this.targetNode.position localPos; }对于简单的UI点击Cocos Creator的UITransform组件提供了convertToNodeSpaceAR等方法可以更方便地在UI坐标系内处理。4. 物理系统入门让游戏世界符合直觉没有物理的游戏物体运动显得虚假。Cocos Creator内置了基于Box2D的2D物理引擎让我们能轻松模拟重力、碰撞、弹跳等效果。4.1 物理组件核心三件套刚体RigidBody2D这是物理模拟的主体。它定义了物体的物理属性如类型静态Static、动态Dynamic、运动学Kinematic、质量、密度、摩擦力、弹性系数等。动态刚体会受到重力和力的影响。碰撞体Collider2D定义了物体的形状矩形、圆形、多边形等用于检测碰撞。一个刚体可以附带一个或多个碰撞体。重要物理碰撞检测只发生在都有碰撞体组件的节点之间。物理管理器PhysicsSystem2D在项目设置 - 功能裁剪 - 2D物理系统中启用。你还可以在这里设置重力加速度、调试绘制等全局参数。4.2 配置一个可下落的平台跳跃角色让我们一步步创建一个受重力控制、可以跳跃的角色创建角色节点在场景中创建一个Sprite节点命名为Player并赋予它一个角色图片。添加物理组件选中Player节点点击“添加组件” - “Physics 2D” - “RigidBody 2D”。在刚体组件属性中将Type设为Dynamic动态并根据需要调整Gravity Scale重力缩放1为正常重力。继续“添加组件” - “Physics 2D” - “Box Collider 2D”。调整Size和Offset使绿色线框匹配角色图片的大致形状。碰撞体形状不一定要完全贴合美术资源通常用一个简单的矩形或圆形即可这称为“简化碰撞体”能提升性能。创建地面同样创建一个Sprite节点作为地面添加RigidBody 2D但Type设为Static静态不受力影响然后添加一个Box Collider 2D匹配地面大小。编写跳跃控制脚本将以下脚本挂载到Player节点。import { _decorator, Component, input, Input, KeyCode, RigidBody2D, Vec2 } from cc; const { ccclass, property } _decorator; ccclass(PlayerJump) export class PlayerJump extends Component { property public jumpForce: number 300; // 跳跃力大小 private _rigidBody: RigidBody2D | null null; start() { // 获取刚体组件引用 this._rigidBody this.getComponent(RigidBody2D); input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this); } onKeyDown(event: EventKeyboard) { if (event.keyCode KeyCode.SPACE) { this.jump(); } } jump() { if (this._rigidBody) { // 施加一个向上的线性冲量 this._rigidBody.applyLinearImpulse(new Vec2(0, this.jumpForce), this._rigidBody.getWorldCenter(), true); } } onDestroy() { input.off(Input.EventType.KEY_DOWN, this.onKeyDown, this); } }运行游戏你会看到角色受重力下落站在静态的地面上。按下空格键角色会向上跳跃。4.3 碰撞检测与处理物理引擎不仅能模拟运动还能通知我们碰撞事件。这是实现得分、伤害、触发机关等功能的基础。在脚本中你可以通过实现特定的回调函数来接收碰撞信息import { _decorator, Component, IPhysics2DContact, Collider2D } from cc; const { ccclass } _decorator; ccclass(Coin) export class Coin extends Component { // 当另一个碰撞体进入本碰撞体时触发 onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) { // 判断碰撞的另一方是谁通过分组、标签或节点名 if (otherCollider.group 1) { // 假设玩家分组是1 console.log(吃到金币); this.node.destroy(); // 销毁金币节点 // 这里可以触发得分增加的事件 } } // 当另一个碰撞体离开本碰撞体时触发 onEndContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) { // ... } }避坑技巧物理回调函数onBeginContact等需要脚本所在的节点有Collider2D组件才会被调用。同时注意在项目设置 - 物理 - 碰撞矩阵中确保你希望发生碰撞的两个分组如玩家和金币是勾选状态否则它们会相互穿透。5. 实战构建一个“接水果”小游戏现在让我们综合运用以上所有知识创建一个简单的“接水果”游戏。玩家控制一个篮子左右移动接住下落的水果得分接到炸弹游戏结束。5.1 场景与预制体搭建场景布置创建Canvas节点作为UI根节点。创建Game节点作为游戏内容根节点。在Game节点下创建Basket篮子节点添加Sprite和BoxCollider2D刚体类型设为Kinematic运动学我们通过代码控制其移动不受重力影响但能参与碰撞。创建Ground地面节点放在屏幕底部稍下的位置作为水果的销毁边界。添加Sprite可选用于视觉参考、BoxCollider2D和Static刚体。创建预制体Prefab创建Fruit节点添加Sprite水果图、CircleCollider2D和Dynamic刚体。将其从层级管理器拖拽到资源管理器中生成一个预制体。同理创建Bomb炸弹预制体。预制体的好处是可以在代码中动态生成实例化多个相同的物体。5.2 核心逻辑脚本1. 篮子控制脚本 (BasketController.ts)import { _decorator, Component, input, Input, EventTouch, Vec3, UITransform } from cc; const { ccclass } _decorator; ccclass(BasketController) export class BasketController extends Component { private _uiTransform: UITransform | null null; start() { this._uiTransform this.getComponent(UITransform); // 监听触摸移动事件 input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this); } onTouchMove(event: EventTouch) { if (!this._uiTransform) return; // 获取触摸增量更平滑 const delta event.getDelta(); const currentPos this.node.position; // 计算新的X轴位置并限制在屏幕范围内 let newX currentPos.x delta.x; const halfWidth this._uiTransform.width / 2; const canvas this.node.parent.getComponent(UITransform); if (canvas) { const maxX canvas.width / 2 - halfWidth; newX Math.max(-maxX, Math.min(maxX, newX)); } // 只更新X轴位置 this.node.setPosition(newX, currentPos.y, currentPos.z); } onDestroy() { input.off(Input.EventType.TOUCH_MOVE, this.onTouchMove, this); } }2. 水果/炸弹生成器脚本 (Spawner.ts)import { _decorator, Component, Node, Prefab, instantiate, randomRangeInt, math, game } from cc; const { ccclass, property } _decorator; ccclass(Spawner) export class Spawner extends Component { property(Prefab) public fruitPrefab: Prefab | null null; property(Prefab) public bombPrefab: Prefab | null null; property public spawnInterval: number 1.0; // 生成间隔秒 property public bombChance: number 0.2; // 生成炸弹的几率20% private _timer: number 0; update(deltaTime: number) { this._timer deltaTime; if (this._timer this.spawnInterval) { this.spawnItem(); this._timer 0; } } spawnItem() { let prefabToSpawn this.fruitPrefab; if (Math.random() this.bombChance) { prefabToSpawn this.bombPrefab; } if (!prefabToSpawn) return; const item instantiate(prefabToSpawn); this.node.addChild(item); // 在屏幕上方随机X位置生成 const canvasUITransform this.node.getComponent(UITransform); if (canvasUITransform) { const x randomRangeInt(-canvasUITransform.width / 2, canvasUITransform.width / 2); item.setPosition(x, canvasUITransform.height / 2, 0); } } }将此脚本挂载到Game节点并将fruitPrefab和bombPrefab拖拽赋值。3. 水果/炸弹逻辑脚本 (Fruit.ts/Bomb.ts) 这两个脚本类似挂载在各自的预制体根节点上。以Fruit.ts为例import { _decorator, Component, Collider2D, IPhysics2DContact, RigidBody2D } from cc; const { ccclass } _decorator; ccclass(Fruit) export class Fruit extends Component { start() { // 可选给刚体一个随机的初始水平速度让下落轨迹更自然 const rb this.getComponent(RigidBody2D); if (rb) { rb.linearVelocity new math.Vec2((Math.random() - 0.5) * 50, 0); } } onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D) { // 如果碰到地面销毁自己 if (otherCollider.node.name Ground) { this.node.destroy(); } // 如果碰到篮子假设篮子分组为1 if (otherCollider.group 1) { console.log(接到水果10分); // 这里应该触发一个全局事件通知游戏管理器加分 // director.getScene().emit(add-score, 10); this.node.destroy(); } } }Bomb.ts的逻辑类似只是在碰到篮子时触发游戏结束事件。4. 游戏管理器脚本 (GameManager.ts) 这是一个单例或全局节点上的脚本负责管理游戏状态分数、生命值、监听事件加分、游戏结束并更新UI。import { _decorator, Component, Label, director } from cc; const { ccclass, property } _decorator; ccclass(GameManager) export class GameManager extends Component { property(Label) public scoreLabel: Label | null null; private _score: number 0; start() { // 监听加分事件 director.getScene().on(add-score, this.addScore, this); // 监听游戏结束事件 director.getScene().on(game-over, this.gameOver, this); this.updateScoreLabel(); } addScore(points: number) { this._score points; this.updateScoreLabel(); } updateScoreLabel() { if (this.scoreLabel) { this.scoreLabel.string Score: ${this._score}; } } gameOver() { console.log(游戏结束最终得分, this._score); // 停止生成器禁止玩家控制等 director.pause(); // 可以显示“重新开始”按钮 } onDestroy() { director.getScene().off(add-score, this.addScore, this); director.getScene().off(game-over, this.gameOver, this); } }5.3 整合与运行将GameManager脚本挂载到一个常驻节点如Canvas并将UI中的Score Label拖拽赋值。在Fruit.ts和Bomb.ts的碰撞回调中分别触发add-score和game-over事件。运行游戏你将能用手指拖动篮子左右移动接住不断下落的水果并得分同时要避开炸弹。一个具备完整交互、物理和游戏逻辑的小项目就完成了。6. 常见问题与调试技巧实录在实际操作中你几乎一定会遇到下面这些问题。这里记录了我的踩坑经验和解决方案。问题1节点明明在屏幕上却点击不到/触摸没反应排查思路检查节点层级确认触摸事件监听是加在目标节点上而不是被其父节点或子节点“拦截”。事件会从触发点最上层的节点开始派发。检查节点尺寸和位置节点的UITransform组件的ContentSize是否不为零节点是否在摄像机可见范围内位置是否有异常值如NaN检查节点属性节点的active属性是否为truelayer是否与摄像机visibility匹配检查事件监听代码确认on方法调用正确回调函数绑定第三个参数this没有丢失导致回调函数中的this指向错误。问题2物理碰撞检测不生效物体直接穿透排查清单物理系统是否开启项目设置 - 功能裁剪 - 2D物理系统必须勾选。碰撞体组件双方节点都必须有Collider2D组件如BoxCollider2D。碰撞分组矩阵项目设置 - 物理 - 碰撞矩阵。确保发生碰撞的两个分组如“Default”和“Player”对应的复选框是勾选状态。这是最容易被忽略的一点刚体类型至少一方是Dynamic或Kinematic刚体另一方可以是Dynamic、Kinematic或Static。两个Static刚体之间不会产生碰撞回调。碰撞体形状和位置在场景编辑器中勾选“物理调试绘制”可以看到碰撞体的线框。确认线框与实际精灵图像匹配且没有因为缩放、锚点导致位置偏移。问题3property声明的属性在编辑器里不显示或无法赋值可能原因脚本编译错误检查控制台是否有TypeScript编译错误。只要有错误所有脚本的属性面板都可能显示不正常。装饰器使用错误确保正确导入了_decorator并使用const { ccclass, property } _decorator;解构。property装饰器必须紧跟在属性声明之前。类型引用问题如果property的类型是自定义类或其他脚本中定义的枚举需要确保该脚本也被正确编译和引用。有时重启编辑器可以解决临时性的引用问题。属性名冲突避免使用与Component基类中已有的属性如name,active相同的名称。问题4动态实例化instantiate的预制体位置不对关键点instantiate生成的节点其位置、旋转、缩放是预制体资源中保存的默认值。当你将其添加到场景中时parent.addChild(node)它的变换矩阵会相对于新的父节点进行计算。正确做法在addChild之后再设置它的世界坐标或本地坐标。const newNode instantiate(prefab); parentNode.addChild(newNode); newNode.setWorldPosition(desiredWorldPos); // 或者 setPosition另一种方法instantiate方法可以传入一个Node作为父节点参数但这样实例化后节点的位置仍然是预制体的本地位置。所以通常还是需要后续设置。问题5游戏在移动设备上运行卡顿性能优化思路Draw Call优化使用自动图集Auto Atlas功能将大量小图打包成一张大图减少渲染状态切换。在Cocos Creator的“项目 - 项目设置 - 功能裁剪”中可配置。物理性能减少动态刚体的数量。对于静止的物体务必使用Static刚体。简化碰撞体形状避免使用过于复杂的多边形碰撞体。节点数量避免在运行时创建和销毁大量节点使用对象池Object Pool技术来复用节点特别是子弹、特效这类频繁生成销毁的对象。脚本效率在update函数中避免进行复杂的计算或频繁的查找操作如find。将需要频繁访问的组件引用在start或onLoad中缓存起来。纹理尺寸确保图片资源的尺寸是2的幂次方如128, 256, 512并且不要使用远大于显示需求的尺寸。掌握这些核心概念、实践步骤和排错技巧你就已经掌握了Cocos Creator游戏开发最基础的“动力系统”。从静态到动态从观察到交互这一步的跨越让你真正拥有了创造游戏世界的能力。接下来你就可以在此基础上去探索更复杂的动画系统、UI系统、音频管理和数据持久化将你的游戏创意一步步变为现实。记住多动手、多调试、多查阅官方文档和社区论坛是解决所有问题的最佳路径。
Cocos Creator游戏开发入门：从节点组件到物理交互的实战指南
发布时间：2026/7/14 16:38:48
1. 项目概述从“Hello World”到第一个可交互游戏如果你已经跟着《Cocos游戏开发入门一本通》的前两章完成了环境搭建熟悉了编辑器的基本布局并且成功让一个精灵Sprite在屏幕上显示出来那么恭喜你你已经跨过了“看”的阶段。第三章就是我们真正开始“动手玩”的环节。这一章的核心是让你从一个静态画面的旁观者转变为一个能让游戏世界“活”起来的创造者。我们将不再满足于摆放几个图片而是要深入Cocos Creator最核心的几大系统节点与组件、脚本编程、用户输入和物理系统最终目标是亲手制作一个简单但完整、可交互的小游戏Demo。为什么这一章如此关键因为游戏开发的本质就是“交互”。玩家点击屏幕角色跳跃按下键盘飞船开火两个物体碰撞触发得分或爆炸。这些动态反馈构成了游戏最基础的乐趣。本章的内容就是搭建起从静态资源到动态交互的桥梁。我们会从理解Cocos Creator的“一切皆节点功能靠组件”这一核心设计哲学开始然后学习如何用TypeScript脚本为节点注入逻辑接着处理鼠标、触摸和键盘输入最后引入物理引擎来模拟真实的碰撞与运动。学完这一章你将有能力复现市面上绝大多数2D休闲游戏的核心玩法比如跳跃、射击、消除等。2. 核心概念拆解节点树、组件与脚本在动手写代码之前我们必须把Cocos Creator的底层逻辑吃透。很多新手卡壳不是因为代码难写而是没理解编辑器里的操作和代码世界是如何关联的。2.1 节点Node游戏世界的原子你可以把节点理解为游戏世界里的“空白容器”或“空文件夹”。它本身没有形状、颜色或功能但它有位置Position、旋转Rotation、缩放Scale这些变换属性决定了它在世界中的姿态。更重要的是节点可以形成父子层级关系也就是我们常说的节点树。在层级管理器中看到的结构就是这棵节点树。一个节点可以是另一个节点的子节点子节点会继承父节点的变换属性。举个例子如果你有一个“玩家”节点下面挂着一个“武器”子节点。当你移动“玩家”节点时“武器”节点会自动跟着移动当你旋转“玩家”时“武器”也会围绕玩家旋转。这种层级结构对于组织复杂游戏对象如一个人物由身体、手臂、头部等多个部分组成至关重要。实操心得给节点起一个清晰、有意义的名字并合理使用分组空节点作为父节点。比如一个游戏场景的根节点可以叫GameRoot下面挂UI、Player、Enemies、Background等节点。良好的命名习惯在项目规模变大后能节省大量调试时间。2.2 组件Component赋予节点能力的插件节点是空的组件才是赋予节点具体功能和外观的东西。你可以把组件理解为可以插在节点这个“插座”上的各种“功能模块”。一个节点可以挂载多个组件。渲染组件如Sprite精灵组件让节点显示一张图片Label标签组件让节点显示文字。碰撞组件如BoxCollider2D2D矩形碰撞体或CircleCollider2D2D圆形碰撞体用于物理碰撞检测。物理组件如RigidBody2D2D刚体让节点受到物理引擎重力、力的影响。自定义脚本组件你自己编写的TypeScript脚本继承自Component这是实现游戏逻辑的核心。在属性检查器中你可以查看和修改当前选中节点上所有组件的属性。为节点添加组件就是点击属性检查器底部的“添加组件”按钮。2.3 脚本Script游戏逻辑的控制器脚本是我们自己编写的、继承自Component基类的TypeScript类。把它挂载到节点上它就成为了该节点的一个组件。脚本中可以定义数据属性和方法函数并通过Cocos Creator提供的丰富API来操作节点、响应事件、控制游戏流程。脚本与编辑器交互的关键在于属性声明。通过在脚本类中使用property装饰器声明属性这些属性就会暴露在属性检查器中允许你在不修改代码的情况下在编辑器里配置参数。这是Cocos Creator提升开发效率的一大法宝。// 示例PlayerControl.ts import { _decorator, Component, Node, input, Input, EventKeyboard, KeyCode, Vec3 } from cc; const { ccclass, property } _decorator; ccclass(PlayerControl) // 使用装饰器声明组件类名 export class PlayerControl extends Component { // 声明一个属性类型为Node并在编辑器中可配置 property(Node) public bulletPrefab: Node | null null; // 声明一个数值属性并设置默认值 property public moveSpeed: number 200; start() { // 组件首次激活时调用用于初始化 input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this); } onKeyDown(event: EventKeyboard) { const keyCode event.keyCode; const deltaPos new Vec3(); switch(keyCode) { case KeyCode.KEY_A: deltaPos.x -this.moveSpeed; break; case KeyCode.KEY_D: deltaPos.x this.moveSpeed; break; } // 移动节点 this.node.position this.node.position.add(deltaPos); } }上面这个简单的脚本演示了1. 声明可编辑的属性bulletPrefab,moveSpeed2. 在start生命周期函数中监听键盘按下事件3. 在事件回调函数中根据按键修改节点位置。将这个脚本挂载到一个有Sprite组件的节点上该节点就能用A、D键左右移动了。3. 实现用户交互输入事件处理详解让游戏响应玩家操作是交互的第一步。Cocos Creator提供了多套输入系统适用于不同场景。3.1 系统事件SystemEvent与输入管理器Input对于全局性的、与特定节点无关的输入比如键盘、鼠标、加速度计我们使用input单例。键盘事件如上例所示使用input.on(Input.EventType.KEY_DOWN, callback, this)监听。EventKeyboard事件对象包含了keyCode你可以与KeyCode枚举值比较来判断具体按键。鼠标事件Input.EventType.MOUSE_DOWN、MOUSE_MOVE、MOUSE_UP。事件对象EventMouse提供了鼠标位置getLocation获取的是屏幕坐标和按键信息。触摸事件在移动设备上使用Input.EventType.TOUCH_START、TOUCH_MOVE、TOUCH_END。EventTouch事件对象包含所有触摸点的信息支持多点触控。注意事项事件监听一定要记得销毁通常在组件的onDestroy生命周期函数中使用input.off移除监听防止内存泄漏和重复触发。如果是在start中监听就在onDestroy中取消。3.2 节点事件NodeEvent如果你希望输入事件只针对某个特定节点比如点击一个按钮更高效的方式是使用节点自带的事件系统。这对于UI交互尤其方便。import { _decorator, Component, Node, EventTouch } from cc; const { ccclass, property } _decorator; ccclass(UIButton) export class UIButton extends Component { start() { // 为当前节点添加触摸监听 this.node.on(Node.EventType.TOUCH_START, this.onTouchStart, this); this.node.on(Node.EventType.TOUCH_END, this.onTouchEnd, this); } onTouchStart(event: EventTouch) { // 触摸开始可以缩放节点模拟按下效果 this.node.setScale(0.9, 0.9); } onTouchEnd(event: EventTouch) { // 触摸结束恢复缩放并执行点击逻辑 this.node.setScale(1, 1); console.log(按钮被点击了); // 这里可以触发自定义事件或调用方法 } onDestroy() { // 同样需要移除监听 this.node.off(Node.EventType.TOUCH_START, this.onTouchStart, this); this.node.off(Node.EventType.TOUCH_END, this.onTouchEnd, this); } }节点事件的优点是效率高因为它利用了Cocos Creator的节点层级和事件冒泡机制。事件会从触发节点开始向上层父节点冒泡直到被处理或到达根节点。3.3 坐标转换屏幕坐标与世界坐标处理输入时一个常见的坑是坐标混淆。EventMouse或EventTouch提供的getLocation()返回的是屏幕坐标原点在屏幕左下角单位是像素。而节点的position属性是世界坐标或本地坐标相对于父节点。如果你需要根据点击位置移动一个节点或者判断是否点击在了某个碰撞体内就需要进行坐标转换。onTouchMove(event: EventTouch) { // 获取触摸点的屏幕坐标 const screenPos event.getLocation(); // 将屏幕坐标转换为世界坐标假设有一个主摄像机节点 mainCamera const worldPos this.mainCamera.screenToWorld(new Vec3(screenPos.x, screenPos.y, 0)); // 将世界坐标转换到目标节点所在的节点空间本地坐标 const localPos this.targetNode.parent.inverseTransformPoint(new Vec3(), worldPos); // 最后设置目标节点的位置如果需要的话 // this.targetNode.position localPos; }对于简单的UI点击Cocos Creator的UITransform组件提供了convertToNodeSpaceAR等方法可以更方便地在UI坐标系内处理。4. 物理系统入门让游戏世界符合直觉没有物理的游戏物体运动显得虚假。Cocos Creator内置了基于Box2D的2D物理引擎让我们能轻松模拟重力、碰撞、弹跳等效果。4.1 物理组件核心三件套刚体RigidBody2D这是物理模拟的主体。它定义了物体的物理属性如类型静态Static、动态Dynamic、运动学Kinematic、质量、密度、摩擦力、弹性系数等。动态刚体会受到重力和力的影响。碰撞体Collider2D定义了物体的形状矩形、圆形、多边形等用于检测碰撞。一个刚体可以附带一个或多个碰撞体。重要物理碰撞检测只发生在都有碰撞体组件的节点之间。物理管理器PhysicsSystem2D在项目设置 - 功能裁剪 - 2D物理系统中启用。你还可以在这里设置重力加速度、调试绘制等全局参数。4.2 配置一个可下落的平台跳跃角色让我们一步步创建一个受重力控制、可以跳跃的角色创建角色节点在场景中创建一个Sprite节点命名为Player并赋予它一个角色图片。添加物理组件选中Player节点点击“添加组件” - “Physics 2D” - “RigidBody 2D”。在刚体组件属性中将Type设为Dynamic动态并根据需要调整Gravity Scale重力缩放1为正常重力。继续“添加组件” - “Physics 2D” - “Box Collider 2D”。调整Size和Offset使绿色线框匹配角色图片的大致形状。碰撞体形状不一定要完全贴合美术资源通常用一个简单的矩形或圆形即可这称为“简化碰撞体”能提升性能。创建地面同样创建一个Sprite节点作为地面添加RigidBody 2D但Type设为Static静态不受力影响然后添加一个Box Collider 2D匹配地面大小。编写跳跃控制脚本将以下脚本挂载到Player节点。import { _decorator, Component, input, Input, KeyCode, RigidBody2D, Vec2 } from cc; const { ccclass, property } _decorator; ccclass(PlayerJump) export class PlayerJump extends Component { property public jumpForce: number 300; // 跳跃力大小 private _rigidBody: RigidBody2D | null null; start() { // 获取刚体组件引用 this._rigidBody this.getComponent(RigidBody2D); input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this); } onKeyDown(event: EventKeyboard) { if (event.keyCode KeyCode.SPACE) { this.jump(); } } jump() { if (this._rigidBody) { // 施加一个向上的线性冲量 this._rigidBody.applyLinearImpulse(new Vec2(0, this.jumpForce), this._rigidBody.getWorldCenter(), true); } } onDestroy() { input.off(Input.EventType.KEY_DOWN, this.onKeyDown, this); } }运行游戏你会看到角色受重力下落站在静态的地面上。按下空格键角色会向上跳跃。4.3 碰撞检测与处理物理引擎不仅能模拟运动还能通知我们碰撞事件。这是实现得分、伤害、触发机关等功能的基础。在脚本中你可以通过实现特定的回调函数来接收碰撞信息import { _decorator, Component, IPhysics2DContact, Collider2D } from cc; const { ccclass } _decorator; ccclass(Coin) export class Coin extends Component { // 当另一个碰撞体进入本碰撞体时触发 onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) { // 判断碰撞的另一方是谁通过分组、标签或节点名 if (otherCollider.group 1) { // 假设玩家分组是1 console.log(吃到金币); this.node.destroy(); // 销毁金币节点 // 这里可以触发得分增加的事件 } } // 当另一个碰撞体离开本碰撞体时触发 onEndContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) { // ... } }避坑技巧物理回调函数onBeginContact等需要脚本所在的节点有Collider2D组件才会被调用。同时注意在项目设置 - 物理 - 碰撞矩阵中确保你希望发生碰撞的两个分组如玩家和金币是勾选状态否则它们会相互穿透。5. 实战构建一个“接水果”小游戏现在让我们综合运用以上所有知识创建一个简单的“接水果”游戏。玩家控制一个篮子左右移动接住下落的水果得分接到炸弹游戏结束。5.1 场景与预制体搭建场景布置创建Canvas节点作为UI根节点。创建Game节点作为游戏内容根节点。在Game节点下创建Basket篮子节点添加Sprite和BoxCollider2D刚体类型设为Kinematic运动学我们通过代码控制其移动不受重力影响但能参与碰撞。创建Ground地面节点放在屏幕底部稍下的位置作为水果的销毁边界。添加Sprite可选用于视觉参考、BoxCollider2D和Static刚体。创建预制体Prefab创建Fruit节点添加Sprite水果图、CircleCollider2D和Dynamic刚体。将其从层级管理器拖拽到资源管理器中生成一个预制体。同理创建Bomb炸弹预制体。预制体的好处是可以在代码中动态生成实例化多个相同的物体。5.2 核心逻辑脚本1. 篮子控制脚本 (BasketController.ts)import { _decorator, Component, input, Input, EventTouch, Vec3, UITransform } from cc; const { ccclass } _decorator; ccclass(BasketController) export class BasketController extends Component { private _uiTransform: UITransform | null null; start() { this._uiTransform this.getComponent(UITransform); // 监听触摸移动事件 input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this); } onTouchMove(event: EventTouch) { if (!this._uiTransform) return; // 获取触摸增量更平滑 const delta event.getDelta(); const currentPos this.node.position; // 计算新的X轴位置并限制在屏幕范围内 let newX currentPos.x delta.x; const halfWidth this._uiTransform.width / 2; const canvas this.node.parent.getComponent(UITransform); if (canvas) { const maxX canvas.width / 2 - halfWidth; newX Math.max(-maxX, Math.min(maxX, newX)); } // 只更新X轴位置 this.node.setPosition(newX, currentPos.y, currentPos.z); } onDestroy() { input.off(Input.EventType.TOUCH_MOVE, this.onTouchMove, this); } }2. 水果/炸弹生成器脚本 (Spawner.ts)import { _decorator, Component, Node, Prefab, instantiate, randomRangeInt, math, game } from cc; const { ccclass, property } _decorator; ccclass(Spawner) export class Spawner extends Component { property(Prefab) public fruitPrefab: Prefab | null null; property(Prefab) public bombPrefab: Prefab | null null; property public spawnInterval: number 1.0; // 生成间隔秒 property public bombChance: number 0.2; // 生成炸弹的几率20% private _timer: number 0; update(deltaTime: number) { this._timer deltaTime; if (this._timer this.spawnInterval) { this.spawnItem(); this._timer 0; } } spawnItem() { let prefabToSpawn this.fruitPrefab; if (Math.random() this.bombChance) { prefabToSpawn this.bombPrefab; } if (!prefabToSpawn) return; const item instantiate(prefabToSpawn); this.node.addChild(item); // 在屏幕上方随机X位置生成 const canvasUITransform this.node.getComponent(UITransform); if (canvasUITransform) { const x randomRangeInt(-canvasUITransform.width / 2, canvasUITransform.width / 2); item.setPosition(x, canvasUITransform.height / 2, 0); } } }将此脚本挂载到Game节点并将fruitPrefab和bombPrefab拖拽赋值。3. 水果/炸弹逻辑脚本 (Fruit.ts/Bomb.ts) 这两个脚本类似挂载在各自的预制体根节点上。以Fruit.ts为例import { _decorator, Component, Collider2D, IPhysics2DContact, RigidBody2D } from cc; const { ccclass } _decorator; ccclass(Fruit) export class Fruit extends Component { start() { // 可选给刚体一个随机的初始水平速度让下落轨迹更自然 const rb this.getComponent(RigidBody2D); if (rb) { rb.linearVelocity new math.Vec2((Math.random() - 0.5) * 50, 0); } } onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D) { // 如果碰到地面销毁自己 if (otherCollider.node.name Ground) { this.node.destroy(); } // 如果碰到篮子假设篮子分组为1 if (otherCollider.group 1) { console.log(接到水果10分); // 这里应该触发一个全局事件通知游戏管理器加分 // director.getScene().emit(add-score, 10); this.node.destroy(); } } }Bomb.ts的逻辑类似只是在碰到篮子时触发游戏结束事件。4. 游戏管理器脚本 (GameManager.ts) 这是一个单例或全局节点上的脚本负责管理游戏状态分数、生命值、监听事件加分、游戏结束并更新UI。import { _decorator, Component, Label, director } from cc; const { ccclass, property } _decorator; ccclass(GameManager) export class GameManager extends Component { property(Label) public scoreLabel: Label | null null; private _score: number 0; start() { // 监听加分事件 director.getScene().on(add-score, this.addScore, this); // 监听游戏结束事件 director.getScene().on(game-over, this.gameOver, this); this.updateScoreLabel(); } addScore(points: number) { this._score points; this.updateScoreLabel(); } updateScoreLabel() { if (this.scoreLabel) { this.scoreLabel.string Score: ${this._score}; } } gameOver() { console.log(游戏结束最终得分, this._score); // 停止生成器禁止玩家控制等 director.pause(); // 可以显示“重新开始”按钮 } onDestroy() { director.getScene().off(add-score, this.addScore, this); director.getScene().off(game-over, this.gameOver, this); } }5.3 整合与运行将GameManager脚本挂载到一个常驻节点如Canvas并将UI中的Score Label拖拽赋值。在Fruit.ts和Bomb.ts的碰撞回调中分别触发add-score和game-over事件。运行游戏你将能用手指拖动篮子左右移动接住不断下落的水果并得分同时要避开炸弹。一个具备完整交互、物理和游戏逻辑的小项目就完成了。6. 常见问题与调试技巧实录在实际操作中你几乎一定会遇到下面这些问题。这里记录了我的踩坑经验和解决方案。问题1节点明明在屏幕上却点击不到/触摸没反应排查思路检查节点层级确认触摸事件监听是加在目标节点上而不是被其父节点或子节点“拦截”。事件会从触发点最上层的节点开始派发。检查节点尺寸和位置节点的UITransform组件的ContentSize是否不为零节点是否在摄像机可见范围内位置是否有异常值如NaN检查节点属性节点的active属性是否为truelayer是否与摄像机visibility匹配检查事件监听代码确认on方法调用正确回调函数绑定第三个参数this没有丢失导致回调函数中的this指向错误。问题2物理碰撞检测不生效物体直接穿透排查清单物理系统是否开启项目设置 - 功能裁剪 - 2D物理系统必须勾选。碰撞体组件双方节点都必须有Collider2D组件如BoxCollider2D。碰撞分组矩阵项目设置 - 物理 - 碰撞矩阵。确保发生碰撞的两个分组如“Default”和“Player”对应的复选框是勾选状态。这是最容易被忽略的一点刚体类型至少一方是Dynamic或Kinematic刚体另一方可以是Dynamic、Kinematic或Static。两个Static刚体之间不会产生碰撞回调。碰撞体形状和位置在场景编辑器中勾选“物理调试绘制”可以看到碰撞体的线框。确认线框与实际精灵图像匹配且没有因为缩放、锚点导致位置偏移。问题3property声明的属性在编辑器里不显示或无法赋值可能原因脚本编译错误检查控制台是否有TypeScript编译错误。只要有错误所有脚本的属性面板都可能显示不正常。装饰器使用错误确保正确导入了_decorator并使用const { ccclass, property } _decorator;解构。property装饰器必须紧跟在属性声明之前。类型引用问题如果property的类型是自定义类或其他脚本中定义的枚举需要确保该脚本也被正确编译和引用。有时重启编辑器可以解决临时性的引用问题。属性名冲突避免使用与Component基类中已有的属性如name,active相同的名称。问题4动态实例化instantiate的预制体位置不对关键点instantiate生成的节点其位置、旋转、缩放是预制体资源中保存的默认值。当你将其添加到场景中时parent.addChild(node)它的变换矩阵会相对于新的父节点进行计算。正确做法在addChild之后再设置它的世界坐标或本地坐标。const newNode instantiate(prefab); parentNode.addChild(newNode); newNode.setWorldPosition(desiredWorldPos); // 或者 setPosition另一种方法instantiate方法可以传入一个Node作为父节点参数但这样实例化后节点的位置仍然是预制体的本地位置。所以通常还是需要后续设置。问题5游戏在移动设备上运行卡顿性能优化思路Draw Call优化使用自动图集Auto Atlas功能将大量小图打包成一张大图减少渲染状态切换。在Cocos Creator的“项目 - 项目设置 - 功能裁剪”中可配置。物理性能减少动态刚体的数量。对于静止的物体务必使用Static刚体。简化碰撞体形状避免使用过于复杂的多边形碰撞体。节点数量避免在运行时创建和销毁大量节点使用对象池Object Pool技术来复用节点特别是子弹、特效这类频繁生成销毁的对象。脚本效率在update函数中避免进行复杂的计算或频繁的查找操作如find。将需要频繁访问的组件引用在start或onLoad中缓存起来。纹理尺寸确保图片资源的尺寸是2的幂次方如128, 256, 512并且不要使用远大于显示需求的尺寸。掌握这些核心概念、实践步骤和排错技巧你就已经掌握了Cocos Creator游戏开发最基础的“动力系统”。从静态到动态从观察到交互这一步的跨越让你真正拥有了创造游戏世界的能力。接下来你就可以在此基础上去探索更复杂的动画系统、UI系统、音频管理和数据持久化将你的游戏创意一步步变为现实。记住多动手、多调试、多查阅官方文档和社区论坛是解决所有问题的最佳路径。
)
)
)
