cocos-creator-dev

name

cocos-creator-dev

description

Comprehensive Cocos Creator 3.x development guide covering TypeScript scripting, component system, node hierarchy, scene management, resource loading, and event handling. Use this skill when: (1) Writing or debugging Cocos Creator 3.x TypeScript scripts, (2) Creating and managing components and their lifecycle, (3) Working with nodes, hierarchy, and scene organization, (4) Loading and managing game resources, (5) Implementing event systems and input handling, (6) Optimizing performance and memory in Cocos Creator projects, (7) Migrating from 2.x to 3.x versions Use when this capability is needed.

Cocos Creator 3.x Development Guide

Guide for Cocos Creator 3.x game development using TypeScript.

Quick Start

Basic Component Template

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

@ccclass('MyComponent')
export class MyComponent extends Component {
    @property(Node)
    targetNode: Node = null;

    @property
    speed: number = 10;

    onLoad() {
        // Initialization
    }

    start() {
        // First frame update
    }

    update(deltaTime: number) {
        // Per-frame update
    }
}

Common Operations

Add component dynamically:

this.node.addComponent(MyComponent);

Get component:

const comp = this.node.getComponent(MyComponent);

Load scene:

director.loadScene('SceneName');

Load resource:

resources.load('textures/sprite', SpriteFrame, (err, asset) => {
    this.node.getComponent(Sprite).spriteFrame = asset;
});

Reference Documentation

For detailed information on specific topics, consult these reference files:

• Script Basics: references/script-basics.md - TypeScript setup, decorators, class definitions, property declarations
• Component System: references/component-system.md - Lifecycle methods, component management, execution order
• Node & Hierarchy: references/node-hierarchy.md - Node creation, traversal, transformations, coordinate systems
• Scene Management: references/scene-management.md - Scene loading, persist nodes, preloading
• Resource Management: references/resource-management.md - Asset loading, releasing, Asset Bundles, memory management
• Event System: references/event-system.md - Input handling, custom events, node events

Development Guidelines

Version Check

Always confirm the user is working with Cocos Creator 3.x, not 2.x. APIs and workflows differ significantly.

Code Style

• Use TypeScript exclusively (JavaScript not supported in 3.x)
• Follow decorator pattern: @ccclass, @property
• Use type annotations for all properties
• Prefer this.node for current node access

Performance Best Practices

• Release unused resources with assetManager.releaseAsset()
• Use object pooling for frequently created/destroyed nodes
• Cache component references instead of repeated getComponent() calls
• Use scheduleOnce instead of timers for one-time delays

Common Pitfalls

• Lifecycle order: onLoad → start → update. Don't access other components in onLoad if they might not be ready.
• Resource leaks: Always release dynamically loaded assets
• Node activation: Check node.active before accessing components
• Scene switching: Use persist nodes for data that needs to survive scene changes

Key APIs Reference

Node Operations

• this.node - Current node
• this.node.parent - Parent node
• this.node.children - Child nodes array
• this.node.addChild(child) - Add child node
• this.node.removeFromParent() - Remove from parent
• this.node.destroy() - Destroy node
• this.node.setPosition(x, y, z) - Set position
• this.node.setRotation(x, y, z) - Set rotation
• this.node.setScale(x, y, z) - Set scale

Component Operations

• this.node.addComponent(T) - Add component
• this.node.getComponent(T) - Get component
• this.getComponentInChildren(T) - Get component in children
• this.getComponentsInChildren(T) - Get all components in children

Scene Operations

• director.loadScene(name) - Load scene
• director.preloadScene(name) - Preload scene
• director.getScene() - Get current scene
• game.addPersistRoot(node) - Add persist node
• game.removePersistRoot(node) - Remove persist node

Resource Operations

• resources.load(path, type, callback) - Load resource
• assetManager.loadRemote(url, type, callback) - Load remote resource
• assetManager.releaseAsset(asset) - Release resource
• resources.loadDir(path, type, callback) - Load directory

Event Operations

• this.node.on(type, callback, target) - Register event
• this.node.off(type, callback, target) - Unregister event
• this.node.emit(type, detail) - Emit event
• input.on(type, callback, target) - Register input event

External Resources

• Official Manual: https://docs.cocos.com/creator/3.8/manual/zh/
• API Reference: https://docs.cocos.com/creator/3.8/api/zh/
• Example Projects: https://github.com/cocos/cocos-example-projects

Troubleshooting

Component Not Found

• Verify component is attached in editor
• Check node is active: if (this.node.active)
• Use getComponentInChildren() for nested components

Scene Not Loading

• Check scene name in Build Settings
• Verify scene is added to build
• Use preloadScene() for large scenes

Memory Leaks

• Release assets after use
• Destroy unused nodes
• Remove event listeners in onDestroy
• Use Asset Bundles for modular loading

Performance Issues

• Profile with Chrome DevTools
• Reduce draw calls with batching
• Use object pooling
• Optimize sprite atlases
• Check script execution time in updates

When to Read References

Read specific reference files when:

• script-basics.md: Creating new components, defining properties, configuring TypeScript
• component-system.md: Implementing lifecycle callbacks, managing component dependencies
• node-hierarchy.md: Creating/destroying nodes, building scene hierarchy, coordinate transformations
• scene-management.md: Loading scenes, passing data between scenes, managing game flow
• resource-management.md: Loading assets, managing memory, using Asset Bundles
• event-system.md: Handling user input, implementing custom events, component communication

Decision Guide

Multiple valid approaches? Use high freedom - provide options and let context guide choice.

Standard pattern exists? Use medium freedom - provide template code with parameters.

Error-prone operation? Use low freedom - provide specific, validated code pattern.

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.