Skip to main content

CocosCreator3.x学习记录

· 7 min read
LIU

CocosCreator 是一个功能强大的游戏开发引擎，它提供了完整的 3D 和 2D 游戏开发解决方案。本文记录我在学习 CocosCreator 过程中的重要知识点和相关实践。

1. 环境搭建与项目创建​

开发环境要求​

  • Node.js 16.0 或更高版本
  • Visual Studio Code 或其他支持 TypeScript 的 IDE
  • Git 版本控制工具
  • CocosCreator 3.8 编辑器

项目创建步骤​

  1. 下载并安装 CocosCreator 3.8
  2. 启动编辑器，创建新项目
  3. 选择项目模板（3D/2D）
  4. 配置项目基本信息
  5. 选择开发语言（TypeScript/JavaScript）

2. 核心概念​

场景与节点​

CocosCreator 使用场景（Scene）和节点（Node）来组织游戏内容：

// 创建节点
const node = new Node("MyNode");

// 设置节点属性
node.setPosition(0, 0, 0);
node.setRotation(0, 0, 0);
node.setScale(1, 1, 1);

// 添加组件
const sprite = node.addComponent(Sprite);

组件系统​

组件是 CocosCreator 中最重要的概念之一，用于扩展节点的功能：

// 自定义组件
@ccclass("PlayerController")
export class PlayerController extends Component {
  @property
  public moveSpeed: number = 5;

  @property(Node)
  public camera: Node = null;

  start() {
    // 组件初始化
  }

  update(deltaTime: number) {
    // 每帧更新
    this.handleMovement(deltaTime);
  }

  private handleMovement(deltaTime: number) {
    // 处理移动逻辑
  }
}

3. 资源管理​

资源加载​

// 动态加载资源
resources.load("prefabs/player", Prefab, (err, prefab) => {
  if (err) {
    console.error("加载资源失败:", err);
    return;
  }

  // 实例化预制体
  const player = instantiate(prefab);
  this.node.addChild(player);
});

资源预加载​

// 预加载资源
async preloadResources() {
    try {
        await new Promise((resolve, reject) => {
            resources.preloadDir('textures', (err) => {
                if (err) reject(err);
                else resolve(null);
            });
        });
        console.log('资源预加载完成');
    } catch (err) {
        console.error('资源预加载失败:', err);
    }
}

4. 3D 功能​

相机控制​

@ccclass("CameraController")
export class CameraController extends Component {
  @property
  public rotateSpeed: number = 1.0;

  @property
  public moveSpeed: number = 1.0;

  private _target: Node = null;

  start() {
    // 初始化相机
  }

  update(deltaTime: number) {
    if (!this._target) return;

    // 相机跟随逻辑
    this.updateCameraPosition(deltaTime);
  }

  private updateCameraPosition(deltaTime: number) {
    // 实现相机跟随逻辑
  }
}

光照系统​

// 设置场景光照
const light = new Node("DirectionalLight");
const lightComp = light.addComponent(DirectionalLight);
lightComp.color = new Color(255, 255, 255);
lightComp.intensity = 30000;

5. 物理系统​

碰撞检测​

@ccclass("CollisionHandler")
export class CollisionHandler extends Component {
  onCollisionEnter(other: Collider, self: Collider) {
    console.log("碰撞开始:", other.node.name);
  }

  onCollisionStay(other: Collider, self: Collider) {
    // 碰撞持续中
  }

  onCollisionExit(other: Collider, self: Collider) {
    console.log("碰撞结束:", other.node.name);
  }
}

物理组件​

// 添加刚体组件
const rigidBody = node.addComponent(RigidBody);
rigidBody.type = RigidBodyType.DYNAMIC;
rigidBody.mass = 1.0;

// 添加碰撞器
const collider = node.addComponent(BoxCollider);
collider.size = new Vec3(1, 1, 1);

6. 动画系统​

骨骼动画​

// 加载骨骼动画
const animator = node.getComponent(Animation);
animator.play("walk");

// 动画事件监听
animator.on(Animation.EventType.FINISHED, () => {
  console.log("动画播放完成");
});

动画状态机​

@ccclass("CharacterAnimation")
export class CharacterAnimation extends Component {
  @property(Animation)
  public animator: Animation = null;

  private _currentState: string = "idle";

  playAnimation(state: string) {
    if (this._currentState === state) return;

    this.animator.play(state);
    this._currentState = state;
  }
}

7. UI 系统​

UI 组件​

@ccclass("UIManager")
export class UIManager extends Component {
  @property(Label)
  public scoreLabel: Label = null;

  @property(Button)
  public startButton: Button = null;

  start() {
    // 注册按钮事件
    this.startButton.node.on(Button.EventType.CLICK, this.onStartClick, this);
  }

  updateScore(score: number) {
    this.scoreLabel.string = `分数: ${score}`;
  }

  private onStartClick() {
    // 处理开始按钮点击
  }
}

UI 动画​

// 创建 UI 动画
const anim = new Tween(this.node)
  .to(0.5, { scale: new Vec3(1.2, 1.2, 1.2) })
  .to(0.5, { scale: new Vec3(1, 1, 1) })
  .start();

8. 性能优化​

对象池​

@ccclass("ObjectPool")
export class ObjectPool extends Component {
  private _pool: Node[] = [];
  private _prefab: Prefab = null;

  init(prefab: Prefab, size: number) {
    this._prefab = prefab;
    for (let i = 0; i < size; i++) {
      this._pool.push(this.createNewObject());
    }
  }

  get(): Node {
    const obj = this._pool.pop() || this.createNewObject();
    obj.active = true;
    return obj;
  }

  put(obj: Node) {
    obj.active = false;
    this._pool.push(obj);
  }

  private createNewObject(): Node {
    return instantiate(this._prefab);
  }
}

内存管理​

// 资源释放
resources.release("textures/background");
resources.releaseDir("prefabs");

// 节点销毁
node.destroy();

9. 调试技巧​

性能分析​

// 性能监控
const profiler = new Profiler();
profiler.enable();

// 记录性能数据
profiler.begin("update");
// 执行需要监控的代码
profiler.end("update");

调试工具​

  • 使用 CocosCreator 内置的调试器
  • 使用 Chrome DevTools 进行远程调试
  • 使用性能分析工具监控游戏性能

10. 发布与部署​

构建配置​

  1. 选择目标平台（Web/Android/iOS）
  2. 配置构建参数
  3. 设置资源压缩选项
  4. 配置代码混淆选项

发布流程​

  1. 执行构建
  2. 检查构建结果
  3. 测试发布版本
  4. 部署到目标平台

11. 最佳实践​

代码组织​

  • 使用 TypeScript 进行开发
  • 遵循组件化开发原则
  • 使用设计模式优化代码结构
  • 保持代码整洁和可维护性

项目结构​

assets/
  ├── scenes/        // 场景文件
  ├── scripts/       // 脚本文件
  ├── resources/     // 动态加载资源
  ├── textures/      // 纹理资源
  ├── models/        // 模型资源
  └── prefabs/       // 预制体

12. 总结​

CocosCreator 3.8 是一个功能强大的游戏开发引擎，通过合理使用其提供的功能，我们可以开发出高质量的游戏。在开发过程中，要注意性能优化、代码组织和资源管理，这些都是保证游戏质量的重要因素。