一、简介 Cocos Creator 由 Cocos + Creator 两个单词组合而成，意指帮助我们创造基于 Cocos 引擎的产品。

Cocos Creator 提供了一套以内容创作为核心的所见即所得的编辑工具，拥有 All in One 一站式服务体系。整个游戏产品开发过程中，游戏创作团队完全可以身处其中，通过其所建立的工作流对游戏的资源管理、场景设计、界面布局、精灵创建、逻辑控制、打包运行与发布做全方位的把控。

它将跨平台游戏引擎底层功能高度集成在内核中，暴露在开发团队面前的，只有最接近游戏本身的编辑内容，比如游戏物件层级管理、场景编辑、资源管理、物件属性编辑及脚本逻辑驱动等。这样有利于开发者将精力专注于游戏逻辑本身，开发工作更加顺畅与清晰。Cocos Creator 的技术架构如下图所示：

技术架构图

与之前 Cocos 产品的开发方式不同，Cocos Creator 在 Cocos2d-x 基础上实现了彻底脚本化、组件化和数据驱动等特点，极大提升了 Cocos 开发者的工作效率，实现了以内容创作为核心的工作方式。

脚本化

早期的 Cocos 程序员，大多基于 C++ 进行游戏开发。C++ 虽然强大，但对程序员的能力要求较高，况且硬写的代码很难灵活改动，程序逻辑功能也不便于自更新。

而 Cocos Creator 使用 JavaScript 作为脚本语言，一则降低了开发难度和开发成本，同时也方便运行和调试，轻松涵盖了 H5 领域的产品开发。

组件化

Cocos Creator 基于组件化设计，功能模块易于扩展。该模式使开发者不再拘束于编辑器本身这个容器，可以按需对编辑器进行插件式扩展，用 HTML + JavaScript 等前端通用技术轻松扩展编辑器功能，定制个性化的工作流程，极大提升了 Cocos Creator 的可扩展空间。

数据驱动

官方文档特别指出了“数据驱动”这一特点，但似乎并没给它一个明确的定义。根据我的经验来理解”数据驱动“，”数据驱动“有点类似”业务驱动“，就是设计人员把:美术资源、3D资源、影音资源、动画资源、导入工程，然后开发人员不需要去care这些资源，只要专心编写业务，逻辑脚本，封装好各个组件即可。

你会发现，开发游戏其实比开发h5项目简单多了，只要写业务逻辑（对应前端js脚本开发），连场景都有人帮我们导入到项目了（这一步相当于前端的页面搭建。html、css部分。）。不过理想很丰满，现实很骨感，一般设计师是不懂这些的，所以这些东西还是需要我们会才行。

工作流程图

特别推荐

（十二种游戏平台一键发布,还可以ios，Android原生和h5）

从 v2.4.2 开始，Cocos Creator 支持发布到 字节跳动小游戏。

从 v2.4.1 开始，Cocos Creator支持发布到 HUAWEI AppGallery Connect 和 连尚小游戏。

从 v2.3.4开始，Cocos Creator 新增了对 腾讯云服务 的支持。

从 v2.3.0 开始，Cocos Creator 新增了对 3D物理与碰撞系统、3D 粒子 的支持，同时 材质系统 也升级到了正式版。

从 v2.3.0 开始，Cocos Creator支持发布到 趣头条小游戏。Spine 换装指南。DragonBones 换装指南。

从 v2.1.4 开始，Cocos Creator支持发布到 支付宝小游戏。

从 v2.1 开始，Cocos Creator 引入了 3D 的支持。详情请查阅 3D 节点。

从 v2.0.10开始，Cocos Creator 支持发布到 小米快游戏 及 Cocos Play。

从 v2.0.9 开始，Cocos Creator支持发布到 百度小游戏。

从 v2.0.7 开始，Cocos Creator 支持发布到 华为快游戏。

从 v2.0.5 开始，CocosCreator 支持发布到 OPPO 小游戏 及 vivo 小游戏。

从 v2.0.4 开始，Cocos Creator 支持发布到 GooglePlay Instant。

二、开发流程 1、安装 到官网首页下载对应版本、或者最新版本的cocosCreator编辑器，www.cocos.com/creator/

注意：如果出现无法打开“cocosCreator.app”请在 Finder（访达）中右键点击 dmg 或 app 文件，选择 打开，接着在弹出对话框中再次点击 打开 即可。然后请进入 系统偏好设置 -> 安全性与隐私，点击 仍要打开，这样以后就可以正常启动了。

2、启动 在mac启动台找到cocosCreator的图标，点击打开。然后在面板里面注册或者登录。

3、界面总览-Dashboard

上图所示的就是 Cocos Creator 的 Dashboard 界面，包括以下几种选项卡：

最近打开项目: 列出最近打开项目，第一次运行 Cocos Creator 时，这个列表是空的，会提示 新建项目 的按钮。 新建项目: 选择这个选项卡，会进入到 Cocos Creator 新项目创建的指引界面。 打开其他项目: 如果你的项目没有在最近打开的列表里，你也可以点击这个按钮来浏览和选择你要打开的项目。 教程: 帮助信息，一个包括各种新手指引信息和文档的静态页面。 重点介绍下新建项目

在 新建项目 页面，我们首先需要选择一个项目模板，项目模板会包括各种不同类型的游戏基本架构，以及学习用的范例资源和脚本，来帮助你更快进入到创造性的工作当中。

    1、空白项目：里面什么都没有，所有东西自己添加     2、范例集合：里面很多示例代码，可以直接演示，如果要快速了解cocosCreator有什么功能，可以新建这个项目，里面有将近100个例子可以展示。 点击范例集合就创建本地项目了，文件夹地址在dashBoard底部有显示，可以自己替换。点击新建进入

此时资源正在加载中。出现

说明项目加载完成。点击面板的中间顶部的▶️按键会在你浏览器里面运行项目，如下图

第一个demo为图片精灵展示，

里面有各种各样的demo，大部分H5能做的功能，在cocosCreator里面也是可以做的，甚至可以在里面嵌入webview。

最后展示一些复杂的场景：

3、教程-文档 可通过教程访问cocosCreator用户手册和其他帮助文档。

三、项目结构 通过 Dashboard，我们可以创建一个 Hello World 项目作为开始，创建之后的项目有特定的文件夹结构，我们将在这一节熟悉 Cocos Creator 项目的文件夹结构。

资源文件夹（assets） assets 将会用来放置游戏中所有的本地资源、脚本和第三方库文件。只有在 assets 目录下的内容才能显示在 资源管理器 中。assets 中的每个文件在导入项目后都会生成一个相同名字的 .meta 文件，用于存储对应的资源配置和索引信息。.meta 文件需要一并提交到版本控制系统，详见 资源管理注意事项 --- meta 文件。

一些第三方工具生成的工程或设计原文件，如 TexturePacker 的 .tps 文件，或 Photoshop 的 .psd 文件，可以选择放在 assets 外面来管理。

资源库（library） library 是将 assets 中的资源导入后生成的，在这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。

当 library 丢失或损坏的时候，只要删除整个 library 文件夹再打开项目，就会重新生成资源库。

本地设置（local） local 文件夹中包含该项目的本机上的配置信息，包括编辑器面板布局，窗口大小，位置等信息。开发者不需要关心这里的内容。

扩展插件文件夹（packages） packages 文件夹用于放置此项目的自定义扩展插件。如需手动安装扩展插件，可以手动创建此文件夹。如需卸载扩展插件，在 packages 中删除对应的文件夹即可。

项目设置（settings） settings 里保存项目相关的设置，如 构建发布 菜单里的包名、场景和平台选择等。

临时文件夹（temp） temp 是临时文件夹，用于缓存一些 Cocos Creator 在本地的临时文件。这个文件夹可以在关闭 Cocos Creator 后手动删除，开发者不需要关心这里面的内容。

project.json project.json 文件和 assets 文件夹一起，作为验证 Cocos Creator 项目合法性的标志，只有包括了这两个内容的文件夹才能作为 Cocos Creator 项目打开。开发者不需要关心里面的内容。

构建目标（build） 在使用主菜单中的 项目 -> 构建发布... 使用默认发布路径发布项目后，编辑器会在项目路径下创建 build 目录，并存放所有目标平台的构建工程。

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

编辑器推荐：官方推荐的编辑器也是微软的vscode。刚好我们公司大部分前端同学用的也是vscode，这里对编辑器就不做介绍了，另外一点比较重要：使用外部文本编辑器修改项目脚本后，要重新激活 Cocos Creator 窗口才能触发脚本编译。

附上：vscode编辑器开发cocosCreator的编辑器环境配置：docs.cocos.com/creator/man…

四、编辑器基础

1.资源管理器 资源管理器 是我们用来访问和管理项目资源的工作区域。在开始制作游戏时，添加资源到这里通常是必须的步骤。您可以使用 HelloWorld 模板新建一个项目，就可以看到 资源管理器 中包含了一些基本资源类型。

界面介绍 资源管理器 将项目资源文件夹中的内容以树状结构展示出来，注意只有放在项目文件夹的 assets 目录下的资源才会显示在这里。关于项目文件夹结构说明请阅读 项目结构 一节。下面我们介绍各个界面元素：

• 左上角的 + 按钮是创建按钮，用来创建新资源。
• 右上的文本输入框可以用来搜索过滤文件名包含特定文本的资源。
• 右上角的 搜索按钮 用来选择搜索的资源类型。
• 面板主体是资源文件夹的资源列表，可以在这里用右键菜单或拖拽操作对资源进行增删修改。
• 文件夹前面的小三角 用来切换文件夹的展开/折叠状态。当用户按住 Alt/Option 的同时点击该按钮，除了执行这个文件夹自身的展开/折叠操作之外，还会同时展开/折叠该文件夹下的所有子节点。

资源列表

资源列表中可以包括任意文件夹结构，文件夹在 资源管理器 中会以 图标显示，点击图标左边的箭头就可以展开/折叠该文件夹中的内容。

除了文件夹之外列表中显示的都是资源文件，资源列表中的文件会隐藏扩展名，而以图标指示文件或资源的类型，比如 HelloWorld 模板创建出的项目中包括了三种核心资源：

图片资源：目前包括 jpg、png 等图像文件，图标会显示为图片的缩略图。 脚本资源：程序员编写的 JavaScript 脚本文件，以 js 为文件扩展名。我们通过编辑这些脚本为添加组件功能和游戏逻辑。 场景资源：双击可以打开的场景文件，打开了场景文件我们才能继续进行内容创作和生产。 更多常见资源类型和资源工作流程，请阅读 资源工作流程一章。

创建资源

目前可以在 资源管理器 中创建的资源有以下几类：

• 文件夹
• 脚本文件
• 场景
• 动画剪辑
• 自动图集配置
• 艺术数字配置 点击左上角的 创建按钮，就会弹出包括上述资源列表的创建资源菜单。点击其中的项目就会在当前选中的位置新建相应资源。

选择资源

在资源列表中可以使用以下的资源选择操作：

• 点击来选中单个资源
• 按住 Ctrl 或 Cmd 点击，可以将更多资源加入选择中
• 按住 Shift 点击，可以连续选中多个资源 对于选中的资源，可以执行移动、删除等操作。

移动资源

选中资源后（可多选），按住鼠标拖拽可以将资源移动到其他位置。将资源拖拽到文件夹上时，会看到鼠标悬停的文件夹以橙色高亮显示。这时松开鼠标，就会将资源移动到高亮显示的文件夹下。

删除资源

对于已经选中的资源，可以执行以下操作进行删除：

右键点击，并选择弹出菜单中的 删除 选中资源后直接按 Delete（Windows）或 Cmd + Backspace（Mac) 由于删除资源是不可撤销的操作，所以会弹出对话框要求用户确认。确定后资源就会被删除，无法从回收站（Windows）或废纸篓（Mac）找回！请一定要谨慎使用，做好版本管理或手动备份。

其他操作

资源管理器 的右键菜单里还包括以下操作：

新建：和 创建按钮 功能相同，会将资源添加到当前选中的文件夹下，如果当前选中的是资源文件，会将新增资源添加到和当前选中资源所在文件夹中。 复制 / 粘贴：将选中的资源复制粘贴到该文件夹下或者另外的文件夹下。 重命名：对资源进行重命名。 查找资源：查找用到了该资源的文件，并在搜索框中过滤显示。 在 资源管理器 （Windows）或 Finder（Mac）中显示：在操作系统的文件管理器窗口中打开该资源所在的文件夹。 打开 Library 中的资源：打开所选中的资源被 Creator 导入后生成的数据。 前往 Library 中的资源位置：打开项目文件夹的 Library 中导入资源的位置，详情请阅读 项目结构 一节。 显示资源 UUID 和路径：在 控制台 窗口显示当前选中资源的 UUID。 另外对于特定资源类型，双击资源可以进入该资源的编辑状态，如场景资源和脚本资源。

过滤资源

在 资源管理器 右上的搜索框中输入文本，可以过滤出文件名包括输入文本的所有资源。也可以输入 *.png 这样的文件扩展名，会列出所有特定扩展名的资源。

2、Scene 场景编辑器

场景编辑器 是内容创作的核心工作区域，您将使用它选择和摆放场景图像、角色、特效、UI 等各类游戏元素。在这个工作区域里，您可以选中并通过 变换工具 修改节点的位置、旋转、缩放、尺寸等属性，并可以获得所见即所得的场景效果预览。

视图介绍

导航 您可以通过以下的操作，来移动和定位 场景编辑器 的视图：

鼠标右键拖拽 ：平移视图。 鼠标滚轮 ：以当前鼠标悬停位置为中心缩放视图。 坐标系和网格 场景视图的背景会显示一组标尺和网格，表示 世界坐标系 中各个点的位置信息。读数为 (0,0) 的点为场景中世界坐标系的原点。使用鼠标滚轮缩小视图显示时，每一个刻度代表 100 像素的距离。根据当前视图缩放尺度的不同，会在不同刻度上显示代表该点到原点距离的数字，单位都是像素。

场景中的标尺和网格是我们摆放场景元素时位置的重要参考信息，关于坐标系和位置等节点属性的关系，请阅读 坐标系和变换 一节。

设计分辨率指示框 视图中的紫色线框表示场景中默认会显示的内容区域，这块区域的大小由 设计分辨率 决定。关于设计分辨率的设置和效果请阅读 Canvas组件参考 一节。

选取节点 鼠标悬浮到场景中的节点上时，节点的约束框将会以灰色单线显示出来。此时单击鼠标，就会选中该节点，选中的节点周围将会有蓝色的线框提示节点的约束框。选择节点是使用变换工具设置节点位置、旋转、缩放等操作的前提。

如果要在 场景编辑器 中快速聚焦节点，有以下两种方式：

在 层级管理器 中双击节点。 在 层级管理器 中选中节点，然后按下 F 快捷键。

节点的约束框

节点在鼠标悬浮或选中状态下都能够看到约束框（灰色或蓝色的线框），约束框的矩形区域表示节点的尺寸（size）属性大小。即使节点没有包含图像渲染组件（如 Sprite），也可以为节点设置 size 属性，而节点约束框以内的透明区域都可以被鼠标悬浮和点击选中。

节点的尺寸（size）属性在多分辨率适配和排版策略中有非常重要的作用，关于节点尺寸使用的更多信息请阅读 多分辨率适配和元素对齐 的相关内容。

节点名称提示

鼠标悬浮在节点上时，与节点的约束框同时显示的还有节点的名称，在节点比较密集时可以先根据悬浮提示确定要选择的目标，然后点击确认您的选择。

关于节点的命名，请阅读 层级管理器 的介绍内容。

多选节点

在 场景编辑器 中按住鼠标左键并拖拽，可以画出一个蓝色覆盖的选取框，和选取框有部分重合的节点，在放开鼠标按键后都会被一起选中。在放开鼠标键之前可以任意滑动鼠标来更改选取框的区域。

选中多个节点后，进行的任何变换操作都会同时作用于所有选中的节点。

使用变换工具布置节点 场景编辑器 的核心功能就是以所见即所得的方式编辑和布置场景中的可见元素。我们主要通过主窗口工具栏左上角的一系列 变换工具 来将场景中的节点按我们希望的方式布置。将鼠标悬浮到变换工具上方时会显示相关的提示信息。

移动变换工具

移动变换工具 是打开编辑器时默认处于激活状态的变换工具，之后这个工具也可以通过点击位于主窗口左上角工具栏第一个按钮来激活，或者在使用场景编辑器时按下快捷键 W，即可激活 移动变换工具。

选中任何节点，就能看到节点中心（或锚点所在位置）上出现了由红绿两个箭头和蓝色方块组成的移动控制手柄（gizmo）。

控制手柄 是指场景编辑器中在特定编辑状态下显示出的可用鼠标进行交互操作的控制器。这些控制器只用来辅助编辑，不会在游戏运行时显示。

移动变换工具激活时：

• 按住红色箭头拖拽鼠标，将在 x 轴方向上移动节点；
• 按住绿色箭头拖拽鼠标，将在 y 轴方向移动节点；
• 按住蓝色方块拖拽鼠标，可以同时在两个轴向自由移动节点。

旋转变换工具

点击主窗口左上角工具栏第二个按钮，或在使用场景编辑器时按下 E 快捷键，即可激活 旋转变换工具。

旋转变换工具的手柄主要是一个箭头和一个圆环组成，箭头所指的方向表示当前节点旋转属性（rotation）的角度。拖拽箭头或圆环内任意一点就可以旋转节点，放开鼠标之前，可以在控制手柄上看到当前旋转属性的角度值。

也可以通过右边的属性检查器里面去修改Rotation值，来达到精准的旋转角度。

缩放变换工具

点击主窗口左上角工具栏第三个按钮，或在使用场景编辑器时按下 R 快捷键，即可激活** 缩放变换工具**。

1. 1. 按住红色方块拖拽鼠标，在 x 轴方向上缩放节点图像；
2. 1. 按住绿色方块拖拽鼠标，在 y 轴方向上缩放节点图像；
3. 1. 按住中间的黄色方块，保持宽高比的前提下整体缩放节点图像。 缩放节点时，会同比缩放所有的子节点。

矩形变换工具

点击主窗口左上角工具栏第四个按钮，或在使用场景编辑器时按下 T 快捷键，即可激活 矩形变换工具。矩形变换工具的控制手柄主要由一个带有四个蓝色顶点的方框和一个蓝色圆环组成。

拖拽控制手柄的任意顶点，可以在保持对角顶点位置不变的情况下，同时修改节点的 position 和 size 属性。

拖拽控制手柄方框的任意边框，可以在保持对边位置不变的情况下，修改节点尺寸中的 width 或 height 属性。

拖拽控制手柄的蓝色圆点，可以在保持方框位置不变的情况下，修改节点的锚点（Anchor）。

在 UI 元素的排版中，经常会需要使用 矩形变换工具 直接精确控制节点四条边的位置和长度。而对于必须保持原始图片宽高比的图像元素，通常不会使用矩形变换工具来调整尺寸。

层级管理器  Node Tree

层级管理器 中包括当前打开场景中的所有节点，不管节点是否包括可见的图像。你可以在这里选择、创建和删除节点，也可以通过拖拽一个节点到另一个上面来建立节点父子关系。

点击来选中节点，被选中的节点会以蓝底色高亮显示。当前选中的节点会在 场景编辑器 中显示蓝色边框，并更新 属性检查器 中的内容。

创建节点

在层级管理器中有两种方法可以创建节点：

• 点击左上角的 + 按钮，或右键点击鼠标并进入右键菜单中的 创建节点 子菜单。在这个子菜单中，你可以选择不同的节点类型，包括精灵（Sprite）、文字（Label）、按钮（Button）等有不同功能和表现节点。
• 从 资源管理器 中拖拽图片、字体或粒子等资源到层级管理器中。就能够用选中的资源创建出相应的图像渲染节点。

删除节点

选中节点后，通过右键菜单里 删除 选项，或按下 Delete（Windows）或 Cmd + Backspace 热键即可删除选中的节点。如果选中节点包括子节点，子节点也会被一起删除。

建立和编辑节点层级关系

将节点 A 拖拽到节点 B 上，就使节点 A 成为节点 B 的子节点。和 资源管理器 类似，层级管理器中也通过树状视图表示节点的层级关系。点击节点左边的三角图标，即可展开或收起子节点列表。

更改节点的显示顺序

除了将节点拖到另一个节点上，你还可以继续拖拽节点上下移动，来更改节点在列表中的排序。橙色的方框表示节点所属父节点的范围，绿色的线表示节点将会被插入的位置。

节点在列表中的排序决定了节点在场景中的显示次序。在层级管理器中显示在下方的节点的渲染顺序是在上方节点的后面，即下方的节点是在上方节点之后绘制的，因而最下方的节点在 场景编辑器 中显示在了最前。

其他操作

右键点击节点弹出的菜单里还包括下列操作：

1. 拷贝/粘贴：将节点复制到剪贴板上，然后可以粘贴到另外的位置，或打开另一个场景来粘贴刚才拷贝的节点。
2. 复制节点：生成和选中节点完全相同的节点副本，生成节点和选中节点在同一层级中。
3. 重命名：将节点改名。
4. 显示节点 UUID 和路径：在复杂场景中，我们有时候需要获取节点的完整层级路径，以便在脚本运行时访问该节点。点击这个选项，就可以在 控制台 中看到当前选中节点的路径以及节点的 UUID。
5. 锁定节点：鼠标移到节点上，左侧会有一个锁定按钮，节点锁定后无法在 场景编辑器 内选中该节点。

属性检查器（Properties）

属性检查器 是我们查看并编辑当前选中节点、节点组件和资源的工作区域。在 场景编辑器、层级管理器 中选中节点或者在 资源管理器 中选中资源，就会在 属性检查器 中显示它们的属性，可供查询和编辑。

节点名称和激活开关

左上角的复选框表示节点的激活状态，使用节点处于非激活状态时，节点上所有图像渲染相关的组件都会被关闭，整个节点包括子节点就会被有效的隐藏。

节点激活开关右边显示的是节点的名称，和 层级管理器 中的节点显示名称一致。

节点属性

属性检查器 接下来会显示节点的属性，节点的属性排列在 Node 标题的下面，点击 Node 可以将节点的属性折叠或展开。Node 标题右侧有一个节点设置按钮，可以重置节点属性或者重置节点属性和 所有组件属性的修改，或者粘贴复制的组件。

节点的属性除了位置（Position）、旋转（Rotation）、缩放（Scale）、尺寸（Size）等变换属性以外，还包括锚点（Anchor）、颜色（Color）、不透明度（Opacity）等。修改节点的属性通常可以立刻在场景编辑器中看到节点的外观或位置变化。 如果需要批量修改节点属性，可在 层级管理器 中按 Shift 键选中多个节点，然后在 属性检查器 中批量设置。节点属性的批量设置与资源类似，具体可参考本文档下方的资源多选批量设置部分。

更多关于节点属性编辑的细节，请阅读 坐标系和变换 一节。

组件属性

节点属性下面，会列出节点上挂载的所有组件和组件的属性。和节点属性一样，点击组件的名称就会切换该组件属性的折叠/展开状态。在节点上挂载了很多组件的情况下，可以通过折叠不常修改的组件属性来获得更大的工作区域。组件名称的右侧有帮助文档和组件设置的按钮。帮助文档按钮可以跳转到该组件相关的文档介绍页面，组件设置按钮可以对组件执行移除、重置、上移、下移、复制、粘贴等功能。

用户通过脚本创建的组件，其属性是由脚本声明的。不同类型的属性在 属性检查器 中有不同的控件外观和编辑方式。我们将在 声明属性 一节中详细介绍属性的定义方法。

编辑属性

属性 是组件脚本中声明的公开并可被序列化存储在场景和动画数据中的变量。通过 属性检查器 我们可以快捷的修改属性设置，达到不需要编程就可以调整游戏数据和玩法的目的。

通常可以根据变量使用内存位置不同将属性分为 值类型 和 引用类型 两大类。

值类型属性

值类型 包括数字、字符串、枚举等简单的占用很少内存的变量类型：

1. 数值（Number）：可以直接使用键盘输入，也可以按输入框旁边的上下箭头逐步增减属性值。
2. 向量（Vec2）：向量的控件是两个数值输入组合在一起，并且输入框上会以 x 和 y 标识每个数值对应的子属性名。
3. 字符串（String）：直接在文本框里用键盘输入字符串，字符串输入控件分为单行和多行两种，多行文本框可以按回车换行。
4. 布尔（Boolean）：以复选框的形式来编辑，选中状态表示属性值为 true，非选中状态表示 false。
5. 枚举（Enum）：以下拉菜单的形式编辑，点击枚举菜单，然后从弹出的菜单列表里选择一项，即可完成枚举值的修改。
6. 颜色（Color）：点击颜色属性预览框，会弹出 颜色选择器 窗口，在这个窗口里可以用鼠标直接点选需要的颜色，或在下面的 RGBA 颜色输入框中直接输入指定的颜色。点击 颜色选择器 窗口以外的任何位置会关闭窗口并以最后选定的颜色作为属性颜色。

引用类型属性

引用类型 包括更复杂的对象，比如节点、组件或资源。和值类型各式各样的编辑方式不同，引用类型通常只有一种编辑方式：拖拽节点或资源到属性栏中。

引用类型的属性在初始化后会显示 None，因为无法通过脚本为引用类型的属性设置初始值。这时可以根据属性的类型将相应类型的节点或资源拖拽上去，即可完成引用赋值。

需要拖拽节点来赋值的属性栏上会显示白色的标签，标签上可能会显示 Node，表示任意节点都可以拖拽上去，或者标签显示组件名如 Sprite，Animation 等，这时需要拖拽挂载了相应组件的节点才行。

需要拖拽资源赋值的属性栏上会显示蓝色的标签，标签上显示的是资源的类型，如 sprite-frame、prefab、font 等。只要从 资源管理器 中拖拽相应类型的资源过来就可以完成赋值。

值得注意的是，脚本文件也是一种资源，所以上图中最上面表示组件使用的脚本资源引用属性也是用蓝色标签表示的。

资源多选批量设置

在 资源管理器 中选中资源，即可在 属性检查器 中显示资源的属性以便查询和编辑。各个资源的具体参数说明可参考 常见资源工作流程。

当需要批量设置 同类型 资源属性时，可在 资源管理器 中按 Shift 键选中多个资源，属性检查器 中便会显示选中的资源数量以及可编辑的资源属性。设置完成后点击右上方的 应用 按钮即可。

如果 属性检查器 中的属性显示以下几种状态，表示该属性在选中的多个资源中的属性值不一致，可根据需要选择是否继续批量修改该属性。

• 勾选框显示 灰色
• 输入框显示 -
• 选择框显示 空白

控件库

控件库 是一个非常简单直接的可视化控件仓库，您可以将这里列出的控件拖拽到 场景编辑器 或 层级管理器 中，快速完成预设控件的创建。

使用默认窗口布局时，控件库会默认显示在编辑器中，如果您之前使用的编辑器布局中没有包括控件库，您可以通过主菜单的 面板->控件库 来打开控件库，并拖拽它到编辑器中您希望的任意位置。

目前 控件库 包括两个类别，由两个分页栏表示：

内置控件

如上图所示，这里列出了所有编辑器内置的预设节点，通过拖拽这些控件到场景中，您可以快速生成包括默认资源的精灵（Sprite）、包含背景图和文字标题的按钮（Button）以及已经配置好内容和滚动条的滚动视图（ScrollView）等。

控件库 里包含的控件内容和主菜单中的 节点 菜单里可添加的预设节点是一致的，但通过控件库创建新节点更加方便快捷。

后续随着更多功能的添加，控件库里的节点类型也会不断补充增加。

自定义控件

这个分页栏中可以收集用户自己建立的 预制资源（Prefab），方便重复多次创建和使用。

要添加自定义的预制控件，只需要从 资源管理器 中拖拽相应的预制资源（Prefab）到自定义控件分页，即可完成创建。

右键点击自定义控件中的元素，可以选择重命名、从控件库中删除该控件以及更换控件图标。

之后您就可以像使用内置控件一样，用拖拽的方式在场景中创建您自定义的控件了！

控制台（Console）

控制台会显示报错、警告或其他 Cocos Creator 编辑器和引擎生成的日志信息。不同重要级别的信息会以不同颜色显示：

预览和构建-关键功能

选择预览平台-在编辑器的中顶部找到如下图标。

点击运行按钮 就会在对应的平台运行项目了。如我们选择浏览器，就会在默认浏览器里面打开网址：http://localhost:7456/

五、实现一个Hello World

鉴于有些同学对typescript还不够了解，我们已JavaScript的hello world 为项目模板。（能用typescript的同学最好都用ts，这可以帮我们解决很多不必要的麻烦。）

1、创建项目

在dashboard中，点击Hello World 然后点击底部的橘黄色新建项目按钮,（在这之前你可以修改输入框中的新建地址）出现如下界面：

然后点击资源管理里面的Scene文件夹，出现并双击helloworld，在点击场景列表里面的最外层的Canvas节点。预览里面就会选择Canvas节点，并在编辑器的右侧出现属性检查器。

属性检测器里面可以傻瓜式的设置，场景的位置，大小，适配方案，颜色，等等。非常方便简单。

接着重点看下Helloworld里面的Script。

点击script里面的HelloWorld脚本编辑器会自动定位到资源管理里面的文件所在位置。

可以预览和用vscode去编辑。修改Text的内容就会在预览里面热更新修改。

附上官方编辑器基础教程：docs.cocos.com/creator/man…

HelloWorld的扩展

首先我们在层级管理器中添加一个粒子加速器。

在浏览器中看到一个动态的粒子

添加一个脚本。

复制HelloWorld.js文件到Script文件夹下。重命名为cocos。（与层级管理里面的cocos节点命名，主要是用来控制cocos节点的）

然后选择层级管理的cocos节点。在属性检查器里面点击添加组件按钮-在面板的右下角。选择刚刚新建的cocos脚本。

在cocos脚本添加player属性。

在属性检查器里面右下角会看到一个空的player属性

然后在层级管理器重命名New Particle为particle,点击cocos节点，把particle拖动到属性检测器的player里面。

在脚本里面的onLoad里面访问player。

onLoad: function() { cc.log("The player is " + this.player.name); },

浏览器打印出来了，说明这个player的name是particle。

到此完成了节点的访问。

访问子节点。

在层级管理器里面选中cocos节点，创建子节点-bg。

看到白色背景的节点了。我们可以换个背景色。

在onLoad函数里面加入

cc.log(this.node.getChildByName("bg"));//寻找子节点-通过name

打印出子节点bg的属性。

常用的是cc.find()

也会打印出bg节点。

更改节点的变换（位置、旋转、缩放、尺寸）

更改节点位置

分别对 x 轴和 y 轴坐标赋值：

this.node.x = 100;
this.node.y = 50;
还可以使用 setPosition 方法进行赋值：

this.node.setPosition(100, 50);
this.node.setPosition(cc.v2(100, 50));
或者通过设置 position 变量进行赋值：

this.node.position = cc.v2(100, 50);
以上几种用法等价。

更改节点旋转

this.node.rotation = 90; 或

this.node.setRotation(90);

更改节点缩放

this.node.scaleX = 2; this.node.scaleY = 2; 或

this.node.setScale(2); this.node.setScale(2, 2); 以上两种方法等价。setScale 传入单个参数时，会同时修改 scaleX 和 scaleY。

更改节点尺寸

this.node.setContentSize(100, 100); this.node.setContentSize(cc.size(100, 100)); 或

this.node.width = 100; this.node.height = 100; 以上两种方式等价。

更改节点锚点位置

this.node.anchorX = 1; this.node.anchorY = 0; 或

this.node.setAnchorPoint(1, 0); 注意以上这些修改变换的方法会影响到节点上挂载的渲染组件，比如 Sprite 图片的尺寸、旋转等等。

通过键盘的按下来控制cocos节点的左右移动

在onLoad函数加入：

cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);

注册onKeyDown和onKeyUp事件。

浏览器看到输出,说明键盘的时间监听成功了。

• 1分别监听asdw键，来完成节点的移动控制。

• 2按空格键来一个子弹打出的效果。

效果如下图

到此简单的cocos入门就到这里了。