【Cocos Creator 3.x】篇——第二章入门

[1 编辑器界面介绍](#1 编辑器界面介绍)

[1.1 主界面布局](#1.1 主界面布局)

[1.2 面板说明](#1.2 面板说明)

层级管理器 (Hierarchy)

场景编辑器 (Scene)

属性检查器 (Inspector)

资源管理器 (Assets)

[2 基础概念](#2 基础概念)

[2.1 场景 (Scene)](#2.1 场景 (Scene))

[2.2 节点 (Node)](#2.2 节点 (Node))

[2.3 组件 (Component)](#2.3 组件 (Component))

[3 项目资源管理](#3 项目资源管理)

[3.1 资源类型](#3.1 资源类型)

[3.2 资源导入](#3.2 资源导入)

导入图片

导入音频

[3.3 资源使用](#3.3 资源使用)

[4 坐标系与变换](#4 坐标系与变换)

[4.1 坐标系](#4.1 坐标系)

[4.2 节点变换](#4.2 节点变换)

[4.3 锚点 (Anchor)](#4.3 锚点 (Anchor))

[5 事件系统](#5 事件系统)

[5.1 触摸事件](#5.1 触摸事件)

[5.2 键盘事件](#5.2 键盘事件)

[5.3 自定义事件](#5.3 自定义事件)

[6 物理系统](#6 物理系统)

[6.1 物理组件](#6.1 物理组件)

碰撞体组件

[6.2 碰撞检测](#6.2 碰撞检测)

[7 场景加载](#7 场景加载)

[7.1 同步加载](#7.1 同步加载)

[7.2 异步加载](#7.2 异步加载)

[7.3 预加载](#7.3 预加载)

[8 总结](#8 总结)

本文介绍了Cocos Creator 3.x游戏开发引擎的核心功能模块，主要内容包括：

编辑器界面布局（层级管理器、场景编辑器等面板）
基础概念（场景、节点、组件的关系与使用）
资源管理系统（导入/使用图片、音频等资源）
坐标系与节点变换（位置、旋转、缩放等操作）
事件系统（触摸、键盘及自定义事件处理）
物理系统（碰撞检测与物理模拟）
场景加载方式（同步/异步加载及预加载）文章通过代码示例详细说明了各功能的实现方法，为开发者提供了基础到进阶的系统性指导。

1 编辑器界面介绍

1.1 主界面布局

Cocos Creator 3.x 的编辑器界面主要分为以下几个区域：

复制代码

1.2 面板说明

层级管理器 (Hierarchy)

显示场景中的所有节点及其层级关系。

场景编辑器 (Scene)

可视化编辑场景，支持3D视角和2D视角切换。

属性检查器 (Inspector)

显示选中节点或资源的属性信息，可以在这里修改属性值。

资源管理器 (Assets)

管理项目中的所有资源文件。

2 基础概念

2.1 场景 (Scene)

场景是游戏的基本组成单位，每个场景包含一系列节点。

复制代码

// 加载场景
import { _decorator, Component, Node, director } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SceneLoader')
export class SceneLoader extends Component {
    loadScene() {
        // 加载名为"Game"的场景
        director.loadScene('Game');
    }
}

2.2 节点 (Node)

节点是场景中的基本元素，可以包含子节点，形成树形结构。

复制代码

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('NodeExample')
export class NodeExample extends Component {
    start() {
        // 获取节点名称
        console.log(this.node.name);
        
        // 获取节点位置
        console.log(this.node.position);
        
        // 获取子节点
        const child = this.node.getChildByName('ChildNode');
        
        // 设置节点位置
        this.node.setPosition(100, 200, 0);
    }
}

2.3 组件 (Component)

组件是附加到节点上的功能模块，为节点提供各种能力。

复制代码

import { _decorator, Component, Node, Sprite } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ComponentExample')
export class ComponentExample extends Component {
    start() {
        // 获取Sprite组件
        const sprite = this.node.getComponent(Sprite);
        
        if (sprite) {
            console.log('Sprite组件存在');
        }
        
        // 添加组件
        const newSprite = this.node.addComponent(Sprite);
    }
}

3 项目资源管理

3.1 资源类型

Cocos Creator 3.x支持多种资源类型：

纹理 (Texture)：图片资源
音频 (Audio)：声音文件
模型 (Model)：3D模型
材质 (Material)：材质资源
预制体 (Prefab)：可复用的节点模板

3.2 资源导入

导入图片

将图片文件拖拽到资源管理器中
在属性检查器中设置纹理属性

导入音频

将音频文件拖拽到资源管理器中
设置加载模式和压缩格式

3.3 资源使用

复制代码

import { _decorator, Component, Node, SpriteFrame, AudioClip, resources } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('ResourceExample')
export class ResourceExample extends Component {
    // 通过属性面板设置资源
    @property({ type: SpriteFrame })
    public spriteFrame: SpriteFrame = null!;
    
    @property({ type: AudioClip })
    public audioClip: AudioClip = null!;

    start() {
        // 使用预设的资源
        const sprite = this.node.getComponent(Sprite);
        sprite.spriteFrame = this.spriteFrame;
        
        // 动态加载资源
        resources.load('textures/player', SpriteFrame, (err, asset) => {
            if (err) {
                console.error(err);
                return;
            }
            sprite.spriteFrame = asset;
        });
    }
}

4 坐标系与变换

4.1 坐标系

Cocos Creator 3.x使用左手坐标系：

X轴：向右为正方向
Y轴：向上为正方向
Z轴：指向观察者为正方向

4.2 节点变换

每个节点都有变换属性：位置(position)、旋转(rotation)、缩放(scale)。

复制代码

import { _decorator, Component, Node, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('TransformExample')
export class TransformExample extends Component {
    start() {
        // 获取位置
        const pos = this.node.position;
        console.log(`Position: (${pos.x}, ${pos.y}, ${pos.z})`);
        
        // 设置位置
        this.node.setPosition(new Vec3(100, 200, 0));
        
        // 获取旋转（四元数）
        const rot = this.node.rotation;
        console.log(`Rotation: (${rot.x}, ${rot.y}, ${rot.z}, ${rot.w})`);
        
        // 设置欧拉角旋转
        this.node.setRotationFromEuler(0, 90, 0);
        
        // 获取缩放
        const scale = this.node.scale;
        console.log(`Scale: (${scale.x}, ${scale.y}, ${scale.z})`);
        
        // 设置缩放
        this.node.setScale(2, 2, 1);
    }
}

4.3 锚点 (Anchor)

锚点决定了节点变换的参考点。

复制代码

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('AnchorExample')
export class AnchorExample extends Component {
    start() {
        // 设置锚点为中心
        this.node.anchor.set(0.5, 0.5);
        
        // 设置锚点为左上角
        this.node.anchor.set(0, 1);
    }
}

5 事件系统

5.1 触摸事件

复制代码

import { _decorator, Component, Node, Input, EventTouch } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('TouchExample')
export class TouchExample extends Component {
    onLoad() {
        // 注册触摸事件
        Input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
        Input.on(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
        Input.on(Input.EventType.TOUCH_END, this.onTouchEnd, this);
    }

    onDestroy() {
        // 取消注册
        Input.off(Input.EventType.TOUCH_START, this.onTouchStart, this);
        Input.off(Input.EventType.TOUCH_MOVE, this.onTouchMove, this);
        Input.off(Input.EventType.TOUCH_END, this.onTouchEnd, this);
    }

    onTouchStart(event: EventTouch) {
        console.log('触摸开始');
        const touch = event.touch;
        console.log(`触摸位置: (${touch.getLocation().x}, ${touch.getLocation().y})`);
    }

    onTouchMove(event: EventTouch) {
        console.log('触摸移动');
    }

    onTouchEnd(event: EventTouch) {
        console.log('触摸结束');
    }
}

5.2 键盘事件

复制代码

import { _decorator, Component, Node, Input, EventKeyboard } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('KeyboardExample')
export class KeyboardExample extends Component {
    onLoad() {
        // 注册键盘事件
        Input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this);
        Input.on(Input.EventType.KEY_UP, this.onKeyUp, this);
    }

    onDestroy() {
        Input.off(Input.EventType.KEY_DOWN, this.onKeyDown, this);
        Input.off(Input.EventType.KEY_UP, this.onKeyUp, this);
    }

    onKeyDown(event: EventKeyboard) {
        console.log(`按键按下: ${event.keyCode}`);
        
        // 判断具体按键
        if (event.keyCode === 32) { // 空格键
            console.log('跳跃!');
        }
    }

    onKeyUp(event: EventKeyboard) {
        console.log(`按键释放: ${event.keyCode}`);
    }
}

5.3 自定义事件

复制代码

import { _decorator, Component, Node, EventCustom } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CustomEventExample')
export class CustomEventExample extends Component {
    onLoad() {
        // 监听自定义事件
        this.node.on('gameOver', this.onGameOver, this);
    }

    start() {
        // 延迟3秒后触发游戏结束事件
        setTimeout(() => {
            this.node.emit('gameOver', { score: 100 });
        }, 3000);
    }

    onGameOver(event: EventCustom) {
        const data = event.detail as { score: number };
        console.log(`游戏结束! 得分: ${data.score}`);
    }
}

6 物理系统

6.1 物理组件

Cocos Creator 3.x内置了物理引擎，支持碰撞检测和物理模拟。

碰撞体组件

复制代码

import { _decorator, Component, Node, Collider2D, RigidBody2D } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('PhysicsExample')
export class PhysicsExample extends Component {
    start() {
        // 获取碰撞体组件
        const collider = this.node.getComponent(Collider2D);
        
        // 获取刚体组件
        const rigidBody = this.node.getComponent(RigidBody2D);
        
        if (rigidBody) {
            // 设置重力
            rigidBody.gravityScale = 1;
            
            // 设置速度
            rigidBody.linearVelocity = new Vec2(0, -100);
        }
    }
}

6.2 碰撞检测

复制代码

import { _decorator, Component, Node, Collider2D, Contact2DType } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CollisionExample')
export class CollisionExample extends Component {
    onLoad() {
        const collider = this.node.getComponent(Collider2D);
        
        if (collider) {
            // 监听碰撞事件
            collider.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this);
            collider.on(Contact2DType.END_CONTACT, this.onEndContact, this);
            collider.on(Contact2DType.PRE_SOLVE, this.onPreSolve, this);
            collider.on(Contact2DType.POST_SOLVE, this.onPostSolve, this);
        }
    }

    onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D) {
        console.log(`开始碰撞: ${otherCollider.node.name}`);
    }

    onEndContact(selfCollider: Collider2D, otherCollider: Collider2D) {
        console.log(`结束碰撞: ${otherCollider.node.name}`);
    }

    onPreSolve(selfCollider: Collider2D, otherCollider: Collider2D) {
        console.log('碰撞前处理');
    }

    onPostSolve(selfCollider: Collider2D, otherCollider: Collider2D) {
        console.log('碰撞后处理');
    }
}

7 场景加载

7.1 同步加载

复制代码

import { _decorator, Component, Node, director } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('SceneManager')
export class SceneManager extends Component {
    loadSceneSync() {
        // 同步加载场景
        director.loadScene('Game');
    }
}

7.2 异步加载

复制代码

import { _decorator, Component, Node, director, LoadingItems } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('AsyncSceneLoader')
export class AsyncSceneLoader extends Component {
    async loadSceneAsync() {
        try {
            // 异步加载场景并显示加载进度
            await director.loadScene('Game', (completedCount: number, totalCount: number, item: LoadingItems) => {
                const progress = (completedCount / totalCount) * 100;
                console.log(`加载进度: ${progress}%`);
            });
            console.log('场景加载完成!');
        } catch (error) {
            console.error('场景加载失败:', error);
        }
    }
}

7.3 预加载

复制代码

import { _decorator, Component, Node, director } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('PreloadManager')
export class PreloadManager extends Component {
    preloadScene() {
        // 预加载场景
        director.preloadScene('Game', (error) => {
            if (error) {
                console.error('预加载失败:', error);
                return;
            }
            console.log('预加载完成');
        });
    }
}

8 总结

通过本章的学习，你应该掌握了：

编辑器界面的基本布局
场景、节点、组件的概念
资源管理的基本方法
坐标系和变换操作
事件系统的使用
物理系统的基本操作
场景加载的多种方式

在下一章中，我们将深入学习脚本编程。

【Cocos Creator 3.x】篇——第二章 入门

1 编辑器界面介绍

1.1 主界面布局

1.2 面板说明

层级管理器 (Hierarchy)

场景编辑器 (Scene)

属性检查器 (Inspector)

资源管理器 (Assets)

2 基础概念

2.1 场景 (Scene)

2.2 节点 (Node)

2.3 组件 (Component)

3 项目资源管理

3.1 资源类型

3.2 资源导入

导入图片

导入音频

3.3 资源使用

4 坐标系与变换

4.1 坐标系

4.2 节点变换

4.3 锚点 (Anchor)

5 事件系统

5.1 触摸事件

5.2 键盘事件

5.3 自定义事件

6 物理系统

6.1 物理组件

碰撞体组件

6.2 碰撞检测

7 场景加载

7.1 同步加载

7.2 异步加载

7.3 预加载

8 总结

【Cocos Creator 3.x】篇——第二章入门