Cocos游戏生态技术栈

重要通知

。

基本概况

官网：https://www.cocos.com/open in new window
账户中心: https://account.cocos.com/open in new window
技术文档: https://docs.cocos.com/creator/manual/zh/open in new window
API文档: https://docs.cocos.com/creator/api/zh/open in new window

安装部署

# 下载地址 https://www.cocos.com/creator-download

# 安装Cocos Creator
# 安装 Visual Studio
# 安装C++编译配套工具

# 账户 ysungod Ps_123456  Email: ysungod@163.com

版本控制

Cocos Creator 在新建项目时，会自动生成 .gitignore 文件，用于排除不应该提交到 git 仓库的文件。如果开发者使用其它版本控制系统，或者需要提交项目到其它地方，应该注意只需要提交 assets、extensions、settings、package.json，或其它手动添加的关联文件。

编辑器界面

编辑器的各个面板、菜单和功能按钮，以及构建发布等基本操作。

（A）层级管理器：以树状列表的形式展示场景中的所有节点和它们的层级关系，所有在场景编辑器中看到的内容都可以在层级管理器中找到对应的节点条目，在编辑场景时这两个面板的内容会同步显示，一般我们也会同时使用这两个面板来搭建场景。
（B）资源管理器：显示了项目资源文件夹（assets）中的所有资源。这里会以树状结构显示文件夹并自动同步在操作系统中对项目资源文件夹内容的修改。您可以将文件从项目外面直接拖拽进来，或使用菜单导入资源。
（C）场景编辑器：用于展示和编辑场景中可视内容的工作区域。通过在场景编辑器中搭建场景，即可获得所见即所得的场景预览。
（D）动画编辑器：用于编辑并存储动画数据。
（E）属性检查器：用于查看并编辑当前选中节点和组件属性的工作区域，这个面板会以最适合的形式展示和编辑来自脚本定义的属性数据。
（F）项目预览：在场景搭建完成之后，在 Web 或原生平台预览游戏的运行效果。

设置默认脚本编辑器

可以选用任意外部文本编辑工具（例如 VS Code）的可执行文件，作为在资源管理器中双击脚本文件时的打开方式，即配置代码编辑环境。

坐标系

Creator 3.0 的世界坐标系采用的是笛卡尔右手坐标系，默认 x 向右，y 向上，z 向外，同时使用 -z 轴为正前方朝向。

场景管理

加载和切换场景

通过 director.loadScene 等 API 来实现游戏中动态场景加载及切换。

import { director } from "cc";

director.loadScene("MyScene");

// 场景加载回调
director.loadScene("MyScene", onSceneLaunched);

预加载场景

cc.director.loadScene 会在加载场景之后自动切换运行新场景，有些时候我们需要在后台静默加载新场景，并在加载完成后手动进行切换。

import { director } from "cc";

director.preloadScene("table", function () {
  cc.log("Next scene preloaded");
});

摄像机

常驻节点

通过常驻节点进行场景资源管理和参数传递。引擎同时只会运行一个场景，当切换场景时，默认会将场景内所有节点和其他实例销毁。如果我们需要用一个组件控制所有场景的加载，或在场景之间传递参数数据，就需要将该组件所在节点标记为「常驻节点」，使它在场景切换时不被自动销毁，常驻内存。

import { game } from "cc";

// 将该组件所在节点标记为「常驻节点」
game.addPersistRootNode(myNode);

// 取消一个节点的常驻属性，API 并不会立即销毁指定节点，只是将节点还原为可在场景切换时销毁的节点。
game.removePersistRootNode(myNode);

注意事项

3D模式中场景编辑器右上角的摄像机XYZ视角调整，如果调整后就很难恢复到原状，但是可以把缓存文件与assets中场景文件删除，删除前先保存其他文件，然后重新打开项目即可恢复。

工程结构与目录文件

工程结构

package.json 文件和 assets 文件夹一起，作为验证 Cocos Creator 项目合法性的标志，只有包括了这两个内容的文件夹才能作为 Cocos Creator 项目打开。

assets: 只有在 assets 目录下的内容才能显示在资源管理器中。

├─ build        # [必选]构建目录（在构建某平台后会生成该目录）
├─ assets       # 资源目录，放置游戏中所有的本地资源、脚本和第三方库文件。
│ ├─ 
│ └─ 
├─ library      # 导入的资源目录
├─ local        # 日志文件目录
├─ profiles     # 编辑器配置
├─ temp         # 临时文件目录
├─ extensions   # 扩展插件
├─ settings     # 项目设置
└─ package.json # [必选]

基础知识

场景

层级

2D / UI 节点必须放在 Canvas 下面才会显示（实际上是 RenderRoot2D，因为 Canvas 继承自 RenderRoot2D）
小心规划物体的层级，需要调整相机的 Visiblity 属性来让不同的 Canvas 分开渲染

Sprite Frame资源

制作一款2D游戏

这一款2D游戏尽量覆盖到2D游戏的整体业务实现流程，包括2D游戏的整体技术核心点。

Git仓库：https://codeup.aliyun.com/ysunlight/cocos-2d-test.gitopen in new window
2D/UI 元素必须在 Canvas 下才可以被看到，请务必确保您的 2D/UI 元素在 Canvas 层级下。

工程目录

打开CocosDashboard，选择"项目" -> 单击"新建项目" -> 选择"Empty(2D)" -> 输入项目名称"2d-examples" -> 单击"创建并打开"。

层级管理器

├─ game
│ ├─ Canvas
│ │ ├─ Camera
│ │ ├─ Player # 空节点
│ │ │ ├─ Body # 2D对象 -> Sprite(精灵)
│ │ ├─ Box # 2D对象 -> Sprite(精灵)
│ │ ├─ run # 动画对象
│ ├─ UICanvas # UI画布容器
│ │ ├─ Camera
│ │ ├─ StartMenu
│ │ │ ├─ Bg
│ │ │ ├─ Button
│ │ │ ├─ Title
│ │ │ ├─ Tip
│ │ │ ├─ Tip
│ │ ├─ Step
├─ 
└─

资源管理器

├─ assets
│ ├─ game
│ │ ├─ Animations # 动画
│ │ │ ├─ run
│ │ ├─ Prefabs # 预制体
│ │ │ ├─ Box
│ │ ├─ Scenes # 场景
│ │ │ ├─ game
│ │ ├─ Scripts # 脚本
│ │ │ ├─ PlayerController.ts 
│ │ │ ├─ run.ts
└─ internal

创建物体

创建主角

步骤一：在层级管理器中，单击"Canvas"，右键 -> 创建 -> 空节点，从而创建一个空节点，并命名"Player"。
步骤二：单击"Player"，右键 -> 创建 -> 2D对象 -> Sprite(精灵)，从而在"Player"目录内创建一个子级物体，并命名"Body"，在右侧"属性检查器" -> 选择"Sprite Frame"右侧选项列表资源"default_btn_normal"，此时Body节点的Sprite Frame 属性为"default_btn_normal"，将 Body 节点的 Y 坐标调整到 40，调整 Body 的颜色为红色。
步骤三：在资源管理器中，在目录assets中创建子级文件夹，即"创建" -> 文件夹，命名为Scripts，并在Scripts文件夹中，创建 -> 脚本(TypeScript)，并命名为PlayerController.ts
PlayerController.ts

将 PlayerController 脚本拖拽到 Player 节点的属性检查器上，或者单击Body节点，在右侧"属性检查器" -> "添加组件" -> 选择"PlayerController"即可。

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

@ccclass('PlayerController')
export class PlayerController extends Component {
  start() {
    //
  }

  update(deltaTime: number) {
    //
  }
}

制作地图

在2D游戏中临时使用图片代替地图。

预制体 Prefab

预制体是引擎的一种特殊资源，他可以将节点作为一种资源持久化的保存在资源管理器里面，这样就可以复用到其他情景。

步骤一：在层级管理器中，单击"Canvas"，右键 -> 创建 -> 2D对象 -> Sprite(精灵)，从而在"Canvas"目录内创建一个子级物体，并命名"Box"，在右侧"属性检查器" -> 选择"Sprite Frame"右侧选项列表资源"default_btn_normal"，此时Box节点的Sprite Frame 属性为"default_btn_normal"。

添加动画

让角色动起来。通常我们在制作 2D 动画时，有几种办法：关键帧动画、骨骼动画

关键帧动画：通过引擎制作，常用于如 UI 动画、序列帧动画等。
骨骼动画：通过第三方 2D 动作制作工具导出并使用。

创建动画

步骤一: 在层级管理器中，单击"Canvas"，右键 -> 创建 -> 2D对象 -> Sprite(精灵)，从而在"Canvas"目录内创建一个子级物体，并命名"Run"，在右侧"属性检查器" -> 选择"Sprite Frame"右侧选项列表资源"default_radio_button_on"，此时Box节点的Sprite Frame 属性为"default_radio_button_on"，将 Run 节点的 X 坐标调整到 -200。
步骤二: 步骤三：在资源管理器中，在目录assets中创建子级文件夹，即"创建" -> 文件夹，命名为Scripts，并在Scripts文件夹中，创建 -> 脚本(TypeScript)，并命名为Run.ts，同时将该脚本添加到Run 节点。
步骤三: 切换至Run 节点，在动画编辑器中，添加动画组件，此时右侧"属性检查器"出现cc.Animation项。同时继续在动画编辑器中"新建动画裁剪资源"，将创建后的动画存放在assets -> game -> Animation -> run
步骤四: 在动画编辑器中编辑run动画，具体编辑方式参考官网：https://docs.cocos.com/creator/manual/zh/getting-started/first-game-2d/#%E5%88%B6%E4%BD%9C%E5%8A%A8%E7%94%BB。
步骤五:
步骤六:
开启脚本控制动画播放

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

@ccclass("run")
export class run extends Component {
	@property(Animation)
	RunAnim: Animation = null;

	start() {
		window.setInterval(() => {
			if (this.RunAnim) {
				this.RunAnim.play("run");
			}
		}, 2000);
	}

	update(deltaTime: number) {}
}

游戏管理器

菜单UI制作

菜单，即操作游戏的辅助UI，为了避免受到游戏主体的使用Canvas相机的影响，需要创建一个新的 Canvas 来作为 UI 的容器。

UI模态框背景: 在层级管理器中，单击"UICanvas"，右键 -> 创建 -> 2D对象 -> Sprite(精灵)，从而在"UICanvas"目录内创建一个子级物体，并命名"Bg"，在右侧"属性检查器" -> 选择"Sprite Frame"右侧选项列表资源"default_panel"，此时Bg节点的Sprite Frame 属性为"default_panel"，设置X 坐标与Y坐标调整到400, 250。
Play播放按钮: 2D对象 -> Sprite(精灵)，此时Play节点的Sprite Frame 属性为"default_btn_normal"
Title: 2D对象 -> Label，然后修改文案与调整位置即可。
Tip: 2D对象 -> Label，然后修改文案与调整位置即可。

制作一款3D游戏

这一款3D游戏尽量覆盖到3D游戏的整体业务实现流程，包括3D游戏的整体技术核心点。

工程目录

打开CocosDashboard，选择"项目" -> 单击"新建项目" -> 选择"Empty(3D)" -> 输入项目名称"3d-examples" -> 单击"创建并打开"。

层级管理器

├─ game
│ ├─ Main Light
│ ├─ Main Camera
│ ├─ Canvas
│ │ ├─ Camera
│ │ ├─ Player # 空节点
│ │ │ ├─ Body # 2D对象 -> Sprite(精灵)
│ │ ├─ Box # 2D对象 -> Sprite(精灵)
│ │ ├─ run # 动画对象
│ ├─ UICanvas # UI画布容器
│ │ ├─ Camera
│ │ ├─ StartMenu
│ │ │ ├─ Bg
│ │ │ ├─ Button
│ │ │ ├─ Title
│ │ │ ├─ Tip
│ │ │ ├─ Tip
│ │ ├─ Step
├─ 
└─

资源管理器

├─ assets
│ ├─ game
│ │ ├─ Animations # 动画
│ │ │ ├─ run
│ │ ├─ Prefabs # 预制体
│ │ │ ├─ Box
│ │ ├─ Scenes # 场景
│ │ │ ├─ game
│ │ ├─ Scripts # 脚本
│ │ │ ├─ PlayerController.ts 
│ │ │ ├─ run.ts
└─ internal

插件脚本与模块

模块加载顺序

组件脚本

脚本用于实现用户定义的（游戏）行为，通过编写脚本组件，并将它挂载到场景节点中来驱动场景中的物体。在组件脚本的编写过程中，开发者可以通过声明属性，将脚本中需要调节的变量映射到属性检查器中，以便策划和美术进行调整。与此同时，也可以通过注册特定的回调函数，来帮助初始化、更新甚至销毁节点。

生命周期

生命周期回调: https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.htmlopen in new window

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

@ccclass('debug')
export class debug extends Component {
  // 组件脚本的初始化阶段，我们提供了 onLoad 回调函数。onLoad 回调会在节点首次激活时触发，比如所在的场景被载入，或者所在节点被激活的情况下。onLoad 总是会在任何 start 方法调用前执行，这能用于安排脚本的初始化顺序。通常我们会在 onLoad 阶段去做一些初始化相关的操作。
  // 在 onLoad 阶段，保证了你可以获取到场景中的其他节点，以及节点关联的资源数据。
  onLoad() {
    //
  }

  // 当组件的 enabled 属性从 false 变为 true 时，或者所在节点的 active 属性从 false 变为 true 时，会激活 onEnable 回调。倘若节点第一次被创建且 enabled 为 true，则会在 onLoad 之后，start 之前被调用。
  onEnable() {
    //
  }

  // start 回调函数会在组件第一次激活前，也就是第一次执行 update 之前触发。start 通常用于初始化一些中间状态的数据，这些数据可能在 update 时会发生改变，并且被频繁的 enable 和 disable。
  start() {
    // 
  }

  // 游戏开发的一个关键点是在每一帧渲染前更新物体的行为，状态和方位。这些更新操作通常都放在 update 回调中。
  update(deltaTime: number) {
    // 
  }

  // update 会在所有动画更新前执行，但如果我们要在动效（如动画、粒子、物理等）更新之后才进行一些额外操作，或者希望在所有组件的 update 都执行完之后才进行其它操作，那就需要用到 lateUpdate 回调。update 方法会被引擎以一定的时间间隔调用，比如帧率为 30 每秒时，则每秒会调用 update 30 次，这个方法的作用是为了能够通过特定的时间间隔来尽量模拟现实中时间连续的现象。
  lateUpdate() {
    //
  }

  // 当组件的 enabled 属性从 true 变为 false 时，或者所在节点的 active 属性从 true 变为 false 时，会激活 onDisable 回调。
  onDisable() {
    //
  }

  // 当组件或者所在节点调用了 destroy()，则会调用 onDestroy 回调，并在当帧结束时统一回收组件。
  onDestroy() {
    //
  }
}

脚本使用

必须要挂在在某个节点上才会生效。

初始化脚本代码 debug.ts

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

@ccclass('debug')
export class debug extends Component {
  start() {
    // 
  }

  update(deltaTime: number) {
    // 
  }
}

添加脚本到场景节点中

将脚本添加到场景节点中，实际上就是为这个节点添加一个脚本组件。在层级管理器选中某个节点，此时属性检查器面板会显示该节点的属性。

属性装饰器

属性装饰器 property 可以被应用在 cc 类的属性或访问器上。属性装饰器用于控制 Cocos Creator 编辑器中对该属性的序列化、属性检查器中对该属性的展示等。属性装饰器的各种特性是通过 @property() 的参数来指定。

property 装饰器写法

@property({
    type: Node,
    visible: true,
})
targetNode: Node | null = null;

项目类（非组件）脚本

第三方模块

节点（Node）与组件

节点（Node）是承载组件的实体，我们通过将具有各种功能的组件（Component）挂载到节点上，来让节点具有各式各样的表现和功能。

节点（Node）

在层级管理器中，创建 -> 2D组件 -> Button(按钮)，并将Button.ts挂载到该节点上。

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

@ccclass('debug')
export class debug extends Component {
  start() {
    // 获取节点
    console.info(this.node);

    // 获得组件所在的节点
    this.node.setPosition(0.0, 0.0, 0.0);

    // 获得同一个节点上的其它组件
  }

  update(deltaTime: number) {
    // 
  }
}

节点位置

节点属性

// 隐藏节点
this.node.active = false;

访问节点

创建节点

销毁节点

获取其他节点

除了获取自身的节点外，有些游戏中场景还需要获取其他的节点信息，例如飞机坦克大战等。

利用属性检查器设置节点，通过声明一个自定义的节点属性，在右侧属性检查器就会显示这个节点信息，然后将需要引入的节点挂载即可。

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

@ccclass("Cannon")
export class Cannon extends Component {
  // 声明 Player 属性
  @property({ type: Node })
  private player = null;
}

组件（Component）

访问组件

获得同一个节点上的其它组件。

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

@ccclass("test")
export class test extends Component {
  private label: any = null

  start() {
    this.label = this.getComponent(Label);
    let text = this.name + 'started';
    // Change the text in Label Component
    this.label.string = text;
  }
}

事件系统

监听和发射事件

监听事件

除了使用 on 监听，我们还可以使用 once 接口。once 监听在监听函数响应后就会关闭监听事件。

// 该事件监听每次都会触发，需要手动取消注册
eventTarget.on(
  type, // 事件注册字符串
  func, // 执行事件监听的回调
  target? // 事件接收对象，如果 target 没有设置，则回调里的 this 指向的就是当前执行回调的对象。
);

// 使用函数绑定
eventTarget.on('foo', function ( event ) {
  this.enabled = false;
}.bind(this));

// 使用第三个参数
eventTarget.on('foo', (event) => {
  this.enabled = false;
}, this);


// 取消对象身上所有注册的该类型的事件
eventTarget.off(type);
// 取消对象身上该类型指定回调指定目标的事件
eventTarget.off(type, func, target);

代码示例

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

const eventTarget = new EventTarget();

@ccclass("Test")
export class Test extends Component {
  onEnable () {
    // 监听事件
    eventTarget.on('behavior', this._run, this);
  }

  onDisable () {
    // 取消监听事件
    eventTarget.off('behavior', this._run, this);
  }

  _run () {
    console.log('Hello World');
  }
}

事件发射

// 事件发射的时候可以指定事件参数，参数最多只支持 5 个事件参数
eventTarget.emit(type, ...args);


import { _decorator, Component, EventTarget } from 'cc';
const { ccclass } = _decorator;
const eventTarget = new EventTarget();

@ccclass("Example")
export class Example extends Component {
    onLoad () {
        eventTarget.on('foo', (arg1, arg2, arg3) => {
            console.log(arg1, arg2, arg3);  // print 1, 2, 3
        });
    }

    start () {
        let arg1 = 1, arg2 = 2, arg3 = 3;
        // At most 5 args could be emit.
        eventTarget.emit('foo', arg1, arg2, arg3);
    }
}

系统内置事件

输入事件系统、节点事件系统

输入事件系统

全局输入事件是指与节点树不相关的各种输入事件，由 input 来统一派发，目前支持了以下几种事件：鼠标事件、触摸事件、键盘事件、设备重力传感事件。

鼠标事件类型

----------------------------------------------------------------------------------
  事件名称        事件类型
----------------------------------------------------------------------------------
  鼠标按下        Input.EventType.MOUSE_DOWN
  鼠标移动        Input.EventType.MOUSE_MOVE
  鼠标释放        Input.EventType.MOUSE_UP
  鼠标滚动        Input.EventType.MOUSE_WHEEL
----------------------------------------------------------------------------------

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

@ccclass("Test")
export class Test extends Component {
  onLoad () {
    input.on(Input.EventType.MOUSE_DOWN, this.onMouseDown, this);
    input.on(Input.EventType.MOUSE_UP, this.onMouseUp, this);
  }

  onDestroy () {
    input.off(Input.EventType.MOUSE_DOWN, this.onMouseDown, this);
    input.off(Input.EventType.MOUSE_UP, this.onMouseUp, this);
  }

    onMouseDown (event: EventMouse) {
      // getButton 方法会在鼠标左键被按下时返回 0
      if (event.getButton() === 0) {
        // 
      } 
      // getButton 方法会在鼠标右键被按下时返回 2
      else if (event.getButton() === 2) {
        //  
      }
    }

    onMouseUp (event: EventMouse) {
      //
    }
}

触摸事件类型

----------------------------------------------------------------------------------
  事件名称        事件类型
----------------------------------------------------------------------------------
  触摸开始        Input.EventType.TOUCH_START
  触摸移动        Input.EventType.TOUCH_MOVE
  触摸结束        Input.EventType.TOUCH_END
  触摸取消        Input.EventType.TOUCH_CANCEL
----------------------------------------------------------------------------------

键盘事件类型

----------------------------------------------------------------------------------
  事件名称        事件类型
----------------------------------------------------------------------------------
  键盘按下        Input.EventType.KEY_DOWN
  键盘持续按下    Input.EventType.KEY_PRESSING
  键盘释放        Input.EventType.KEY_UP
----------------------------------------------------------------------------------

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

@ccclass("Test")
export class Test 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) {
      switch(event.keyCode) {
        case KeyCode.KEY_A:
          console.log('Press a key');
          break;
      }
    }

    onKeyUp (event: EventKeyboard) {
      switch(event.keyCode) {
        case KeyCode.KEY_A:
          console.log('Release a key');
          break;
      }
    }
}

设备重力传感事件类型

----------------------------------------------------------------------------------
  事件名称        事件类型
----------------------------------------------------------------------------------
  设备重力传感    Input.EventType.DEVICEMOTION
----------------------------------------------------------------------------------

节点事件系统

被直接触发在 UI 相关节点上的事件。

node.on(Node.EventType.MOUSE_DOWN, (event) => {
  console.log('Mouse down');
}, this);

全局与节点触摸和鼠标事件

Light（光源）

平行光

球面光

聚光

光照探针

反射探针

2D对象

SpriteRenderer（2D精灵）

Graghics（绘图）

Label（文本）

Mask（遮罩）

ParticleSystem2D（粒子）

Sprite（精灵）

SpriteSplash（单色）

TiledMap（地图）

3D对象

Capsule（胶囊）

Cone（圆锥体）

Cube（立方体）

Cylinder（圆柱体）

Plane（平面）

Quad（四方形）

Sphere（球体）

Torus（圆环体）

UI组件

Button（按钮）

Canvas（画布）

EditBox（输入框）

Layout（布局）

PageView（页面视图）

ProgressBar（进度条）

RichText（富文本）

ScrollView（滚动视图）

Slider（滑动器）

Toggle（复选按钮）

ToggleGroup（单选按钮）

VideoPlayer（播放器）

WebView（网页视图）

资源系统

图像资源

预制资源

字体资源

音频资源

步骤一: 在层级管理器中选择指定节点对象，然后在节点对象的右侧属性检查器中底部单击"添加组件"，选择Audio -> AudioSource即可。
步骤二: 在节点对象的右侧属性检查器中，单击cc.AudioSource栏的Clip右侧More，选择音频文件（已包含在工程中）即可。
步骤三: 在脚本组件中精准控制音频

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

@ccclass('debug')
export class debug extends Component {
  @property(AudioSource)
  public _audioSource: AudioSource = null!;

  start() {
    // 获取 AudioSource 组件
    const audioSource = this.node.getComponent(AudioSource)!;
    // 检查是否含有 AudioSource，如果没有，则输出错误消息
    assert(audioSource);
    // 将组件赋到全局变量 _audioSource 中
    this._audioSource = audioSource;
  }

  update(deltaTime: number) {
    // 
  }

  play () {
    // 播放音乐
    this._audioSource.play();
  }

  pause () {
    // 暂停音乐
    this._audioSource.pause();
  }
}

视频资源

材质资源

模型资源

其他资源

动画系统

制作动画

播放动画

物理系统

粒子系统

粒子系统是游戏引擎特效表现的基础，它可以用于模拟的火、烟、水、云、雪、落叶等自然现象，也可用于模拟发光轨迹、速度线等抽象视觉效果。

缓动系统

地形系统

进阶主题功能

HTTP请求

引擎模块

数学 Math

import { math } from "cc";

const { 
  AffineTransform, // 二维仿射变换矩阵，描述了平移、旋转和缩放。
  Color, // 通过 Red、Green、Blue 颜色通道表示颜色，并通过 Alpha 通道表示不透明度。
  Vec4, // 四维向量。
  Vec3, // 三维向量。
  Vec2, // 二维向量。
  Size, // 二维尺寸。
  Rect, // 
  , // 
  , // 
  , // 
  , // 
} = math;

import {  } from "cc";

import {  } from "cc";

import {  } from "cc";

import {  } from "cc";

import {  } from "cc";

动画Animation

import { 
  Animation,
  animation,
  AnimationClip
} from "cc";

const { 
  AnimationController, // 
  VectorTrack, // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
  , // 
} = animation;

import {  } from "cc";

import {  } from "cc";

# Cocos游戏生态技术栈

# 基本概况

# 安装部署

# 版本控制

# 编辑器界面

# 设置默认脚本编辑器

# 坐标系

# 场景管理

# 加载和切换场景

# 预加载场景

# 摄像机

# 常驻节点

# 注意事项

# 工程结构与目录文件

# 工程结构

#

#

#

# 基础知识

# 场景

# 层级

# Sprite Frame资源

# 制作一款2D游戏

# 工程目录

# 层级管理器

# 资源管理器

# 创建物体

# 创建主角

# 制作地图

# 预制体 Prefab

# 添加动画

# 创建动画

# 游戏管理器

# 菜单UI制作

# 制作一款3D游戏

# 工程目录

# 层级管理器

# 资源管理器

#

#

#

#

# 插件脚本与模块

# 模块加载顺序

# 组件脚本

# 生命周期

# 脚本使用

# 初始化脚本代码 debug.ts

# 添加脚本到场景节点中

# 属性装饰器

# 项目类（非组件）脚本

# 第三方模块

# 节点（Node）与组件

# 节点（Node）

# 节点位置

# 节点属性

# 访问节点

# 创建节点

# 销毁节点

# 获取其他节点

# 组件（Component）

# 访问组件

# 事件系统

# 监听和发射事件

# 监听事件

# 事件发射

# 系统内置事件

# 输入事件系统

# 鼠标事件类型

# 触摸事件类型

# 键盘事件类型

# 设备重力传感事件类型

# 节点事件系统

# 全局与节点触摸和鼠标事件

# Light（光源）

# 平行光

# 球面光

# 聚光

# 光照探针

# 反射探针

Cocos游戏生态技术栈

基本概况

安装部署

版本控制

编辑器界面

设置默认脚本编辑器

坐标系

场景管理

加载和切换场景

预加载场景

摄像机

常驻节点

注意事项

工程结构与目录文件

工程结构

基础知识

场景

层级

Sprite Frame资源

制作一款2D游戏

工程目录

层级管理器

资源管理器

创建物体

创建主角

制作地图

预制体 Prefab

添加动画

创建动画

游戏管理器

菜单UI制作

制作一款3D游戏

工程目录

层级管理器

资源管理器

插件脚本与模块

模块加载顺序

组件脚本

生命周期

脚本使用

初始化脚本代码 debug.ts

添加脚本到场景节点中

属性装饰器

项目类（非组件）脚本

第三方模块

节点（Node）与组件

节点（Node）

节点位置

节点属性

访问节点

创建节点

销毁节点

获取其他节点

组件（Component）

访问组件

事件系统

监听和发射事件

监听事件

事件发射

系统内置事件

输入事件系统

鼠标事件类型

触摸事件类型

键盘事件类型

设备重力传感事件类型

节点事件系统

全局与节点触摸和鼠标事件

Light（光源）

平行光

球面光

聚光

光照探针

反射探针

2D对象

SpriteRenderer（2D精灵）

Graghics（绘图）

Label（文本）

Mask（遮罩）

ParticleSystem2D（粒子）

Sprite（精灵）