Cocos学习之基础概念（二）

案例1：创建会移动的方块

目标：创建一个方块，按键盘方向键控制移动。

步骤：

1. 新建场景节点

   • 在层级管理器右键 → 创建 → 选择 “Node”，重命名为 Player。
   • 选中 Player 节点 → 在属性检查器点击 添加组件 → 选择 “Sprite 组件”。
   • 在 Sprite 组件的 Sprite Frame 属性中拖入一张图片（从资源管理器拖拽）。

2. 添加移动脚本

   • 在资源管理器右键 → 创建 → 选择 TypeScript，命名为 PlayerController。

   • 双击打开脚本，修改代码如下：

     import { _decorator, Component, Node, Vec3, input, Input, KeyCode } from 'cc';
     const { ccclass, property } = _decorator;
     
     @ccclass('PlayerController')
     export class PlayerController extends Component {
         // 移动速度
         speed: number = 100;
     
         onLoad() {
             // 启用键盘输入监听
             input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this);
         }
     
         onKeyDown(event: any) {
             const pos = this.node.position;
             switch(event.keyCode) {
                 case KeyCode.KEY_A: // 左移
                     this.node.setPosition(pos.x - this.speed, pos.y, pos.z);
                     break;
                 case KeyCode.KEY_D: // 右移
                     this.node.setPosition(pos.x + this.speed, pos.y, pos.z);
                     break;
             }
         }
     }
   

   • 挂载脚本到节点

     • 选中 Player 节点 → 属性检查器 → 点击 添加组件 → 选择 “PlayerController”（刚创建的脚本）。

   • 运行测试

     • 点击运行按钮，按键盘 A/D 键，观察方块是否左右移动。

案例2：点击移动角色

目标：点击屏幕任意位置，角色移动到该位置。

步骤：

1. 准备节点

   • 在场景中创建一个 Sprite 节点（命名为 Player），并赋予图片。

2. 编写点击移动脚本

   • 创建脚本 TouchMove.ts，代码如下：

     import { _decorator, Component, Node, Vec3, input, Input, EventTouch, view } from 'cc';
     const { ccclass, property } = _decorator;
     
     @ccclass('TouchMove')
     export class TouchMove extends Component {
         onLoad() {
             // 监听触摸事件
             input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
         }
     
         onTouchStart(event: EventTouch) {
             // 获取触摸点的世界坐标
             const touchPos = event.getLocation();
             // 将屏幕坐标转换为世界坐标（适配2D）
             const worldPos = new Vec3(touchPos.x, touchPos.y, 0);
             // 设置节点位置
             this.node.setPosition(worldPos);
         }
     }
   

3. 挂载脚本并测试

   • 将脚本挂载到 Player 节点，运行后点击屏幕，观察角色是否移动。

案例3：父子节点与坐标继承

目标：创建父子节点，观察子节点如何继承父节点的变换。

步骤：

1. 创建父子结构

   • 创建一个空节点 Parent，再创建子节点 Child（挂载 Sprite 组件）。
   • 调整 Parent 的位置和旋转，观察 Child 的变换。

2. 脚本验证本地坐标

   • 在 Parent 节点挂载以下脚本：

     import { _decorator, Component, Vec3 } from 'cc';
     const { ccclass, property } = _decorator;
     
     @ccclass('ParentController')
     export class ParentController extends Component {
         start() {
             // 获取子节点的本地坐标
             const childLocalPos = this.node.children[0].position;
             console.log("子节点本地坐标：", childLocalPos);
         }
     }
     

案例4：旋转与缩放控制

目标：用键盘控制节点的旋转和缩放。
代码片段：

// 在 PlayerController 脚本中添加以下逻辑
	   onKeyDown(event: any) {
	       const rotation = this.node.angle; // 2D 旋转用 angle
	       const scale = this.node.scale;
	   
	       switch(event.keyCode) {
	           case KeyCode.KEY_Q: // 逆时针旋转
	               this.node.angle += 10;
	               break;
	           case KeyCode.KEY_E: // 顺时针旋转
	               this.node.angle -= 10;
	               break;
	           case KeyCode.KEY_Z: // 放大
	               this.node.scale = new Vec3(scale.x + 0.1, scale.y + 0.1, 1);
	               break;
	           case KeyCode.KEY_X: // 缩小
	               this.node.scale = new Vec3(scale.x - 0.1, scale.y - 0.1, 1);
	               break;
	       }
	   }

案例5：创建并使用预制体（Prefab）

目标：将角色保存为预制体，并通过脚本动态生成。

步骤：

1. 创建预制体

   • 在场景中设计一个角色节点（例如包含 Sprite + 动画组件）。
   • 将节点从层级管理器拖拽到资源管理器的 assets/prefabs 文件夹 → 自动生成 .prefab 文件。

2. 动态生成预制体

   • 创建脚本 SpawnPlayer.ts：

     import { _decorator, Component, Node, Prefab, instantiate } from 'cc';
     const { ccclass, property } = _decorator;
     
     @ccclass('SpawnPlayer')
     export class SpawnPlayer extends Component {
         @property({ type: Prefab })  // 声明预制体属性
         playerPrefab: Prefab | null = null;
     
         start() {
             if (this.playerPrefab) {
                 // 实例化预制体
                 const player = instantiate(this.playerPrefab);
                 player.setPosition(0, 0, 0);
                 this.node.addChild(player);  // 添加到场景
             }
         }
     }
     

3. 关联预制体

   • 在层级管理器选中挂载脚本的节点 → 属性检查器中拖入预制体到 Player Prefab 属性。

4. 运行测试

   • 运行时将动态生成角色实例。