cocos学习之基础概念（一）

这里继续之前的，使用cocos creator

理论知识

1. 节点（Node）

   • 节点是场景中的基本单位，类似“容器”。

   • 可以嵌套（父子关系），子节点会继承父节点的位置、旋转等属性。

   • 例如：一个“角色”节点可以包含“武器”子节点。

2. 组件（Component）

   • 组件是附加到节点上的功能模块。

   • 例如：Sprite 组件让节点显示图片，Button 组件让节点可点击。

   • 一个节点可以挂载多个组件，组合实现复杂功能。

3. Cocos 坐标系

   • 2D 坐标系：原点 (0,0) 在屏幕左下角，X 轴向右，Y 轴向上。

   • 3D 坐标系：遵循右手法则，Z 轴垂直于屏幕向外。

   • 世界坐标 (World)：相对于场景原点的绝对坐标。

   • 本地坐标 (Local)：相对于父节点坐标系的相对坐标。

4. 节点变换

   • 位置 (Position)：节点的坐标位置。

   • 旋转 (Rotation)：节点的旋转角度（2D 用 angle，3D 用欧拉角）。

   • 缩放 (Scale)：节点的缩放比例（1为原始大小）。

5. 资源类型

   • 图片（.png, .jpg）：用于精灵（Sprite）、UI 等。

   • 预制体（.prefab）：保存节点结构和组件配置，可重复实例化。

   • 音效（.mp3, .wav）：背景音乐和音效。

   • 脚本（.ts）：逻辑代码。

   • 其他：字体、动画剪辑、材质等。

6. 资源管理器（Assets）

   • 项目资源统一存放在 assets 目录下。

   • 支持拖拽导入资源（直接拖入编辑器）。

   • 资源命名建议：全小写，用下划线分隔（如 player_idle.png）。

7. 组件生命周期 Cocos 组件的生命周期按以下顺序执行：

   • onLoad(): 组件首次激活时调用（适合初始化）

   • start(): 在第一次 update 前调用（适合依赖其他组件的初始化）

   • update(dt: number): 每帧调用一次，dt 为帧间隔时间（单位：秒）

   • lateUpdate(dt: number): 在所有 update 之后调用

   • onDestroy(): 组件被销毁时调用（清理资源）

8. 脚本编写规范

   • 使用 TypeScript 强类型语法

   • 通过 @property 将变量暴露到编辑器

   • 避免在 update 中执行耗时操作

关键知识点

1. 节点操作

   • 通过 this.node 访问脚本所属节点。

   • 修改位置：this.node.setPosition(x, y, z)。

2. 组件交互

   • 脚本本身也是一个组件，可与其他组件（如Sprite）协同工作。

3. 输入事件

   • 使用 input.on 监听键盘事件，KeyCode 定义按键类型。

📝 本阶段任务

1. 完成方块移动案例，并尝试扩展功能（如增加上下移动）。

2. 在场景中创建父子节点（例如：一个“汽车”节点包含4个“车轮”子节点），观察父子节点移动时的联动效果。

3. 完成点击移动案例，尝试让角色平滑移动到目标位置（使用缓动或插值）。

4. 创建父子节点层次（如“飞机”包含“炮塔”子节点），修改父节点属性观察子节点变化。

5. 扩展键盘控制功能，实现自由旋转和缩放。

6. 将场景中的某个节点保存为预制体，并通过脚本动态生成多个实例。

7. 导入一张图片和一个音效文件，实现点击按钮更换图片并播放音效。

8. 尝试使用 assetManager 加载本地资源（如动态加载 resources 目录中的图片）。

9. 完成自动旋转案例，并扩展功能：通过 @property 让旋转角度和间隔可在编辑器调整。

10. 创建两个节点A和B，当A被销毁时（如点击删除），在B的脚本中触发 onDestroy 日志。

11. 尝试在 start() 中访问其他节点的组件（如获取玩家位置）。

常见问题预解答：

1. 脚本找不到：确保脚本在 assets 目录下，且类名和文件名一致。

2. 图片不显示：检查 Sprite 组件的 Sprite Frame 是否已赋值。

3. 按键无反应：确认脚本已挂载到节点，且输入法未切换为中文状态。

4. 点击位置偏移：检查是否将屏幕坐标正确转换为世界坐标（注意 Canvas 的适配模式）。

5. 旋转中心不对：调整节点的 Anchor 属性（锚点）改变旋转中心。

6. 缩放方向错误：确保 scale 的 X/Y 值同步修改，避免拉伸变形。

7. 预制体变蓝：表示预制体已关联，右键可选择“解耦预制体”进行独立编辑。

8. 音效不播放：检查文件格式是否支持（推荐 .mp3），并确认音量未静音。

9. 动态加载失败：确保资源路径正确，且远程资源已配置CORS。

10. update不执行：检查组件是否启用（enabled属性为true）。

11. 属性不显示：确保使用 @property 装饰器，且变量未标记为 private。

12. 节点引用为空：检查编辑器中的属性是否已正确拖拽赋值。

实操请看下期