CocosCreator编辑器界面

1,资源管理器【参考来源：官方文档】

资源管理器 里显示了项目资源文件夹（assets）中的所有资源。这里会以树状结构显示文件夹并自动同步在操作系统中对项目资源文件夹内容的修改。您可以将文件从项目外面直接拖拽进来，或使用菜单导入资源。

注：只有放在项目文件夹的 assets 目录下的资源才会显示在这里。

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

资源列表

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

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

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

创建资源

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

  • 文件夹
  • 脚本文件
  • 场景
  • 动画剪辑
  • 自动图集配置
  • 艺术数字配置

点击左上角的 创建按钮，就会弹出包括上述资源列表的创建资源菜单。点击其中的项目就会在当前选中的位置新建相应资源。

选择资源

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

  • 点击来选中单个资源
  • 按住 Ctrl 或 Cmd 点击，可以将更多资源加入选择中
  • 按住 Shift 点击，可以连续选中多个资源

对于选中的资源，可以执行移动、删除等操作。

移动资源

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

删除资源

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

  • 右键点击，并选择弹出菜单中的 删除
  • 选中资源后直接按 Delete（Windows）或 Cmd + Backspace（Mac)

由于删除资源是不可撤销的操作，所以会弹出对话框要求用户确认。确定后资源就会被删除，无法从回收站（Windows）或废纸篓（Mac）找回！一定要谨慎使用哦，做好版本管理或手动备份。

过滤资源

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

其他操作

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

  • 新建：和 创建按钮 功能相同，会将资源添加到当前选中的文件夹下，如果当前选中的是资源文件，会将新增资源添加到和当前选中资源所在文件夹中。
  • 复制 / 粘贴：将选中的资源复制粘贴到该文件夹下或者另外的文件夹下。
  • 重命名：对资源进行重命名。
  • 查找资源：查找用到了该资源的文件，并在搜索框中过滤显示。
  • 在 资源管理器 （Windows）或 Finder（Mac）中显示：在操作系统的文件管理器窗口中打开该资源所在的文件夹。
  • 打开 Library 中的资源：打开所选中的资源被 Creator 导入后生成的数据。
  • 前往 Library 中的资源位置：打开项目文件夹的 Library 中导入资源的位置。
  • 显示资源 UUID 和路径：在 控制台 窗口显示当前选中资源的 UUID。

另外对于特定资源类型，双击资源可以进入该资源的编辑状态，如场景资源和脚本资源。

2，场景编辑器

视图介绍

导航

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

  • 鼠标右键拖拽 ：平移视图。
  • 鼠标滚轮 ：以当前鼠标悬停位置为中心缩放视图。

坐标系和网格

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

设计分辨率指示框

视图中的紫色线框表示场景中默认会显示的内容区域，这块区域的大小由 设计分辨率 决定。

选取节点

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

选中的节点周围将会有蓝色的线框提示节点的约束框。

节点的约束框

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

节点名称提示

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

多选节点

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

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

使用变换工具布置节点

移动变换工具

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

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

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

移动变换工具激活时：

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

旋转变换工具

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

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

缩放变换工具

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

  • 按住红色方块拖拽鼠标，在 x 轴方向上缩放节点图像；
  • 按住绿色方块拖拽鼠标，在 y 轴方向上缩放节点图像；
  • 按住中间的黄色方块，保持宽高比的前提下整体缩放节点图像。

缩放节点时，会同比缩放所有的子节点。‘

矩形变换工具

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

拖拽控制手柄的任一顶点，可以在保持对角顶点位置不变的情况下，同时修改节点尺寸中的 width 和 height 属性。

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

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

3，层级管理器 Node Tree

层级管理器 用树状列表的形式展示场景中的所有节点和他们的层级关系，所有在 场景编辑器 中看到的内容都可以在 层级管理器 中找到对应的节点条目，在编辑场景时这两个面板的内容会同步显示，一般我们也会同时使用这两个面板来搭建场景。  

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

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

  • 左上角的  按钮是创建按钮，用来创建节点。
  • 上方的文本输入框可以用来搜索过滤节点
  •  按钮用来过滤搜索的类型，分为 Node 和 Component 两种类型。
  •  按钮可以切换 层级管理器 节点的展开/折叠状态。
  • 面板主体是节点列表，可以在这里用右键菜单或者拖拽操作对资源进行增删修改。
  • 节点前面的小三角  用来切换节点树的展开/折叠状态。当用户按住 Alt/Option 的同时点击该按钮，除了执行这个节点自身的展开/折叠操作之外，还会同时展开/折叠该节点下的所有子节点。

创建节点

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

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

删除节点

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

建立和编辑节点层级关系

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

更改节点的显示顺序

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

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

其他操作

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

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

4,属性检查器

属性检查器 是我们查看并编辑当前选中节点和组件属性的工作区域，这个面板会以最适合的形式展示和编辑来自脚本定义的属性数据。

节点名称和激活开关

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

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

节点属性

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

节点的属性除了位置（Position）、旋转（Rotation）、缩放（Scale）、尺寸（Size）等变换属性以外，还包括锚点（Anchor）、颜色（Color）、不透明度（Opacity）、倾角（Skew）等。修改节点的属性通常可以立刻在场景编辑器中看到节点的外观或位置变化。

组件属性

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

用户通过脚本创建的组件，其属性是由脚本声明的。不同类型的属性在 属性检查器 中有不同的控件外观和编辑方式。

编辑属性

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

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

值类型属性

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

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

引用类型属性

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

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

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

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

5,控件库

控件库 预设控件的仓库，可以通过拖拽方式添加到场景中，并且可以将用户自己的预制资源（prefab）添加到控件库里方便再次使用.

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

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

内置控件

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

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

自定义控件

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

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

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

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

6，工具栏

工具栏 上包括了场景编辑工具、预览游戏时的操作按钮、远程测试和调试时使用访问地址、连接中的设备数，以及最右边可访问项目文件夹和打开程序安装路径。

7，设置

设置 里提供各种编辑器个性化的全局设置，包括原生开发环境、游戏预览、脚本编辑工具等。

8，项目设置

项目设置 里提供各种项目特定的个性化设置，包括分组管理、模块设置、项目预览、自定义引擎等。 

9，控制台（Console）

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

日志等级

  • 日志（Log）：灰色文字，通常用来显示正在进行的操作。
  • 提示（Info）：蓝色文字，用来显示重要提示信息。
  • 成功（Success）：绿色文字，表示当前执行的操作已成功完成。
  • 警告（Warn）：黄色文字，用来提示用户最好进行处理的异常情况，但不处理也不会影响运行。
  • 报错（Error）：红色文字，表示出现了严重错误，必须解决才能进行下一步操作或运行游戏。

Console 设置以及功能

在控制台中信息量很大时，你可以通过控制台中的控件来有效的过滤信息，这些操作包括：

  • 清除 clear 清除控制台面板中的所有当前信息。
  • 过滤输入 filter 根据输入的文本过滤控制台中的信息，如果勾选了旁边的 Regex，输入的文本会被当做正则表达式来匹配文本。
  • 信息级别 level 这个下拉菜单里可以选择某一种信息级别，从日志级到报错级，选择后控制台中将只显示指定级别的信息。默认的选项 All 表示所有级别的信息都会显示。
  • 切换字体 label 这个下拉菜单可以调整控制台的字体大小。
  • 合并同类信息 collapse 该选项处于激活状态时，相同而重复的信息会被合并成一条，在信息旁边会以黄色数字提示有多少条同类信息被合并了。

查看日志

  • 打开日志文件 open 点击这个按钮可以打开日志文件。
  • 查看日志信息：如果日志含有调用堆栈信息或详细信息，则会在日志左侧显示一个小三角，点击该三角可以查看到隐藏的信息。
  • 复制日志：鼠标按下并拖选可以选中日志文本，这时候按下 ctrl + c（Windows）或 command + c（Mac）就可以复制选中文本，以便粘贴到其他地方使用。

10 ,设置 

设置 由几个不同的分页组成，将各种设置分为以下几类。修改设置之后点击 保存 按钮。

常规

  • 编辑器语言：可以选择中文或英文，修改语言设置后要重新启动 Cocos Creator 才能生效。

  • 默认层级管理器节点折叠状态：切换层级管理器节点树所有子节点的默认状态，有 全部展开、全部折叠 和 记住上一次状态 三种选项。

  • 选择本机 IP 地址：用户可以在本机有多个 IP 地址的情况下，手动选择其中之一作为预览时的默认地址和二维码地址。这里会列出所有本机的 IP，也可以选择 自动 让编辑器帮您自动挑选一个 IP。

  • 构建日志是否在控制台显示：这一项在选中状态时，构建发布原生项目的过程日志会直接显示在控制台面板里。非选中状态时，构建发布原生项目的日志会保存在 %USER/.CocosCreator/logs/native.log，也可以通过控制台左上角的日志按钮的 Cocos Console 日志 选项打开这份文件。

  • 数值调节钮步长：在属性检查器里，所有数值属性输入框的旁边都有一组上下箭头，可以用于步进输入的数值：

 

  • 当鼠标悬浮在数值属性的名称附近时，光标会变成 mouse cursor 这样的形状，然后左右拖动鼠标，也可以按照一定的步进幅度连续增加或减小数值。以上两种修改数值的方式，默认的步长都是 0.1，而设置里 数值调节钮步长 这里设置的就是每次点击步进按钮或拖拽鼠标时数值变化的步长幅度。举例来说，如果您在脚本中使用的数字以整数为主，就可以把这个步长设置为 1，可以更方便的进行调节。
  • 注意：修改步长后要刷新编辑器窗口（按 Ctrl / Cmd + R），设置的步长才会生效。 
  • meta 文件备份时显示确认：在 meta 文件所属的资源丢失时，是否弹出对话框提示备份或删除 meta 文件。如果选择备份，可以在稍后手动恢复资源，并将 meta 文件手动拷贝回项目 assets 目录，防止资源相关的重要设置（如场景、prefab）丢失。 
  • 导入图片自动裁剪：导入图片时，是否自动裁剪掉图片的透明像素。不管默认选择如何，导入图片之后可以在图片资源上手动设置裁剪选项。 
  • 默认开启 prefab 自动同步模式：新建 prefab 时，是否自动开启 prefab 资源上的「自动同步」选项。开启自动同步后，保存 prefab 资源修改时会自动同步场景中所有该 prefab 的实例。

数据编辑

这一类别用来设置脚本和资源的默认打开方式。

  • 自动编译脚本：是否自动监测项目中脚本文件的变化，并自动触发编译。如果关闭自动编译脚本选项后，可以手动通过菜单 开发者->手动编译脚本 或按 F7 来编译。

  • 外部脚本编辑器：可以选用任意外部文本编辑工具的可执行文件，作为在资源管理器里双击脚本文件时的打开方式。您可以点击 浏览 按钮选择偏好的文本编辑器的可执行文件，也可以点击 移除 按钮来切换脚本编辑器。不推荐使用内置脚本编辑器。

  • 外部图片编辑器：和上面的选项类似，这里用来设置在资源管理器中双击图片文件时，默认打开图片用的应用程序路径。

原生开发环境

这个分类用于设置构建发布到原生平台（iOS, Android, Mac, Windows）时，所需的开发环境路径。

  • 使用内置 JavaScript 引擎：是否使用 Cocos Creator 安装路径下自带的 engine 路径作为 JavaScript 引擎路径。这个引擎用于场景编辑器里场景的渲染，内置组件的声明和其他 Web 环境下的引擎模块。

  • JavaScript 引擎路径：除了使用自带的 engine，您也可以前往 engine 来克隆或 fork 一份引擎到本地的任意位置进行定制，然后取消勾选 使用内置 JavaScript 引擎，然后设置 JavaScript 引擎路径 到您定制好的引擎路径，就可以在编辑器中使用这份定制后的引擎了。

  • 使用内置 Cocos2d-x 引擎：是否使用 Cocos Creator 安装路径下自带的 cocos2d-x 路径作为 cocos2d-x C++ 引擎路径。这个引擎用于构建发布时所有原生平台（iOS, Android, Mac, Windows）的工程构建和编译。

  • Cocos2d-x 路径：取消上一项 使用内置 cocos2d-x 引擎 的选择后，就可以手动指定 cocos2d-x 路径了。注意这里使用的 cocos2d-x 引擎必须从 cocos2d-x-lite 或该仓库的 fork 下载。

  • WechatGame 程序路径：设置 WechatGame 程序路径，详情见 发布到微信小游戏平台

  • NDK 路径：设置 NDK 路径，详情见 安装配置原生开发环境。

  • Android SDK 路径：设置 Android SDK 路径，详情见 安装配置原生开发环境。

预览运行

使用主窗口正上方的 运行预览 按钮时，可以设置的各种选项。

  • 自动刷新已启动的预览：当已经有浏览器或模拟器在运行你的场景时，保存场景或重新编译脚本后是否需要刷新这些正在预览的设备。

  • 预览使用浏览器：可以从下拉菜单中选择系统默认的浏览器，或点击 浏览 按钮手动指定一个浏览器的路径。

  • 模拟器路径：从 v1.1.0 版开始， Cocos Creator 中使用的 Cocos 模拟器会放置在 cocos2d-x 引擎路径下。在使用定制版引擎时，需要自己编译模拟器到引擎路径下。点击 打开 按钮可以在文件系统中打开当前指定的模拟器路径，方便调试时定位。

  • 模拟器横竖屏设置：指定模拟器运行时是横屏显示还是竖屏显示。

  • 模拟器分辨率设置：从预设的设备分辨率中选择一个作为模拟器的分辨率。

  • 模拟器自定义分辨率设置：如果预设的分辨率不能满足要求，您可以手动输入屏幕宽高来设置模拟器分辨率。

11 ，项目设置

项目设置 面板通过主菜单的 项目->项目设置... 菜单打开，这里包括所有特定项目相关的设置。这些设置会保存在项目的 settings/project.json 文件里。如果需要在不同开发者之间同步项目设置，要将 settings目录加入到版本控制。

目前项目设置中的分组管理主要为 碰撞体系统 提供分组支持，详情请参考 碰撞分组管理。

同样：分组设置之后是无法删除的，设置了分组后，记得点击“保存”哦。

模块设置

这里的设置是针对发布 Web 版游戏时引擎中使用的模块进行裁剪，达到减小发布版引擎包体的效果。在列表中选中的模块在打包时将被引擎包括，未选中的模块会被裁剪掉。

在这里设置裁剪能够大幅度的减小引擎包体，建议打包后进行完整的测试，避免在场景和脚本中使用裁剪掉的模块。

项目预览

项目预览 分页提供的选项和 设置面板 里的 预览运行 分页类似，用于设置初始预览场景、默认 Canvas 设置等等，但只对当前项目生效。

初始预览场景

指定按下 预览运行 按钮时，会打开项目中哪个场景。如果设置为 当前打开场景，就会运行当前正在编辑的场景，此外也可以设置成一个固定的场景（比如项目总是需要从登录场景开始游戏）。

默认 Canvas 设置 设计分辨率，适配屏幕宽度/高度

默认 Canvas 设置包括设计分辨率和适配屏幕宽度/高度，用于规定在新建场景或 Canvas 组件 时，Canvas 中默认的设计分辨率数值，以及 Fit Height、Fit Width 选项。

模拟器设置类型

用于设置模拟器预览分辨率和屏幕朝向，当这个选项设为 全局 时，会使用 设置 里的模拟器分辨率和屏幕朝向设置。当设为 项目 时，会显示以下模拟器设置：

  • 模拟器横竖屏设置
  • 模拟器分辨率设置
  • 模拟器自定义分辨率

以上选项和 设置 面板中的设置方法一致。

服务

集成 Cocos 数据统计 允许游戏发布后统计玩家数据。详情请参考 Cocos 数据统计.

12，主菜单

Cocos Creator

包括软件信息，设置，窗口控制等功能。

  • 关于 Cocos Creator：显示 Cocos Creator 的版本和版权信息。
  • 设置：打开 设置 面板，设置编辑器的个性化选项。
  • 隐藏 Cocos Creator (Ctrl/Command + H)：（Mac 专属）隐藏编辑器窗口。
  • 隐藏其他应用 (Shift + Ctrl/Command + H)：（Mac 专属）隐藏 Cocos Creator 之外的其他应用窗口。
  • 显示全部：（Mac 专属）显示所有窗口。
  • 最小化（Ctrl/Command + M）：最小化 Cocos Creator 编辑器窗口。
  • 退出 (Ctrl/Command + Q)：退出编辑器。

文件

包括场景文件的打开和保存，从其他项目导入场景和资源的功能。

  • 打开项目...：关闭当前打开的项目，并打开 Dashboard 的 最近打开项目 分页。
  • 新建场景 (Ctrl/Command + N)：关闭当前场景并创建一个新场景，新创建的场景需要手动保存才会添加到项目路径下。
  • 保存场景 (Ctrl/Command + S)：保存当前正在编辑的场景，如果是使用 新建场景 菜单项创建的场景，在第一次保存时会弹出对话框，选择场景文件保存的位置和文件名。场景文件以 *.fire 作为扩展名。
  • 资源导入：用于将 Creator 导出的资源导入到当前项目中。
  • 资源导出：导出项目中的资源
  • 导入项目：从其他场景和 UI 编辑工具中导入场景和项目资源，详情请参考 导入其他编辑器项目。
    • 导入 Cocos Studio 项目 (*.ccs)
    • 导入 Cocos Builder 项目 (*.ccbproj)

编辑

包括撤销重做、复制粘贴等常用编辑功能。

  • 撤销 (Ctrl/Command + Z)：撤销上一次对场景的修改。
  • 重做 (Shift + Ctrl/Command + Z)：重新执行上一次撤销的对场景的修改。
  • 拷贝 (Ctrl/Command + C)：复制当前选中的节点或字符到剪贴板。
  • 粘贴 (Ctrl/Command + V)：粘贴剪贴板中的内容到场景或属性输入框中。
  • 选择全部 (Ctrl/Command + A)：焦点在场景编辑器内为选中所有节点，焦点在控制台则选中所有的日志信息。

节点

通过这个菜单创建节点，并控制节点到预制的转化。

  • 关联节点到预制：同时选中场景中的一个节点和资源管理器中的一个预制（prefab），然后选中此菜单项，即可关联选中的节点和预制。
  • 还原成普通节点：选中场景中一个预制节点，执行此命令会将预制节点转化成普通节点。
  • 创建空节点：在场景中创建一个空节点，如果执行命令前场景中已经选中了节点，新建的节点会成为选中节点的子节点。
  • 创建渲染节点：创建预设好的包含渲染组件的节点，关于渲染组件的使用方法请参考 图像和渲染 一章。
  • 创建 UI 节点：创建预设好的包含 UI 组件的节点，详情请参考 UI 系统 一章。

组件

通过这个菜单在当前选中的节点上添加各类组件。

  • 添加碰撞组件：详情请参考 碰撞组件 一节。
  • 添加其他组件：包括动画、音源、拖尾等组件。
  • 物理：添加物理相关组件。
  • 添加渲染组件：详情请参考 图像和渲染 一章。
  • 添加用户脚本组件：这里可以添加用户在项目中创建的脚本组件。
  • 添加 UI 组件：详情请参考 UI 系统 一章。

项目

运行、构建项目，以及项目专用个性化配置。

  • 运行预览 （Ctrl/Command + P）：在浏览器或模拟器中运行项目。
  • 刷新已运行的预览 （Shift + Ctrl/Command + P）：刷新已经打开的预览窗口。
  • 构建发布... （Shift + Ctrl/Command + B）：打开 构建发布 面板。
  • 项目设置...：打开 项目设置 面板。

面板

  • 资源管理器 (Ctrl/Command + 2）：打开 资源管理器 面板。
  • 控制台 (Ctrl/Command + 0）：打开 控制台 面板。
  • 层级管理器 (Ctrl/Command + 4）：打开 层级管理器 面板。
  • 属性检查器 (Ctrl/Command + 3）：打开 属性检查器 面板。
  • 控件库 (Ctrl/Command + 5）：打开 控件库 面板。
  • 场景编辑器 (Ctrl/Command + 1）：打开 场景编辑器 面板。
  • 动画编辑器 (Ctrl/Command + 6）：打开 动画编辑器 面板。

布局

从预设编辑器布局中选择一个。

  • 默认布局
  • 竖屏布局
  • 经典布局

扩展

和扩展插件相关的菜单项，详情请阅读 编辑器扩展 一章。

  • 创建新扩展插件...
    • 全局扩展（安装在用户目录下）
    • 项目专用扩展（安装在项目路径下）
  • 扩展商店...：打开扩展商店，下载官方和社区提供的扩展插件。
  • AnySDK：打开 AnySDK 打包界面，详见 AnySDK。

开发者

脚本和编辑器扩展开发相关的菜单功能。

  • VS Code 工作流：VS Code 代码编辑器的工作环境相关功能，详情请阅读 代码编辑环境配置 一节。
    • 更新 VS Code 智能提示数据
    • 安装 VS Code 扩展插件
    • 添加 TypeScript 项目配置
    • 添加 Chrome Debug 配置
    • 添加编译任务
  • 重新加载界面：重新加载编辑器界面。
  • 手动编译脚本：触发脚本编译流程。
  • 检视页面元素：在开发者工具中检视编辑器界面元素。
  • 开发者工具：打开开发者工具窗口，用于编辑器界面扩展的开发。

帮助

  • 搜索：（Mac 专属）搜索特定菜单项。
  • 使用手册：在浏览器打开用户手册文档。
  • API 文档：在浏览器打开 API 参考文档。
  • 论坛：在浏览器打开 Cocos Creator 论坛。
  • 订阅产品动态：订阅 Cocos Creator 新闻邮件以获取 Cocos Creator 产品的最新进展、产品下载链接、学习资源和活动信息。
  • 用户帐号信息
  • 登出：登出帐号。

13，工具栏

工具栏 位于编辑器主窗口的正上方，包含了五组控制按钮或信息，用来为特定面板提供编辑功能或方便我们实施工作流。

旋转模式：

  • 本地：变换工具的旋转（手柄方向）将和节点的 旋转（Rotation） 属性保持一致。
  • 世界：变换工具的旋转（手柄方向）保持不变，x 轴手柄、y 轴手柄和世界坐标系方向保持一致。

运行预览游戏

括三个按钮：

  • 选择预览平台：点击下拉菜单选择预览平台为 模拟器 或者 浏览器。
  • 运行预览：点击后在浏览器中运行当前编辑的场景。
  • 刷新设备：在所有正在连接本机预览游戏的设备上重新加载当前场景（包括本机浏览器和其他链接本机的移动端设备）。

14，编辑器布局

编辑器布局是指 Cocos Creator 里各个面板的位置、大小和层叠情况。

选择主菜单里的 布局 菜单，可以从预设的几种编辑器面板布局中选择最适合当前项目的。在预设布局的基础上，您也可以继续对各个面板的位置和大小进行调节。对布局的修改会自动保存在项目所在文件夹下的 local/layout.windows.json 文件中。

调整面板大小

将鼠标悬浮到两个面板之间的边界线上，看到鼠标指针发生变化后，就可以按下鼠标拖动来修改相邻两个面板的大小。

部分面板设置了最小尺寸，当拖拽到最小尺寸限度后就无法再继续缩小面板了。

移动面板

点击面板的标签栏并拖拽，可以将面板整个移动到编辑器窗口中的任意位置。

移动面板的过程中，蓝色半透明的方框会指示松开鼠标后面板将会被放置的位置。

层叠面板

除了移动面板位置，拖拽标签栏的时候还可以移动鼠标到另一个面板的标签栏区域：

在目标面板的标签栏出现橙色显示时松开鼠标，就能够将两个面板层叠在一起，同时只能显示一个面板：

层叠面板在桌面分辨率不足，或排布使用率较低的面板时非常实用。层叠中的面板可以随时拖拽出来，恢复永远在最上的显示。

15，预览和构建

在使用主要编辑器面板进行资源导入、场景搭建、组件配置、属性调整之后，我们接下来就可以通过预览和构建来看到游戏在 Web 或原生平台运行的效果了。

选择预览平台

在游戏开发过程中我们可以随时点击编辑器窗口正上方的 预览 按钮，来看到游戏运行的实际情况。从 预览 按钮左边的下拉菜单我们可以从 模拟器 和 浏览器 中选择预览平台。

注意：必须有当前打开的场景才能预览游戏内容，在没有打开任何场景，或者新建了一个空场景的情况下预览是看不到任何内容的。

模拟器

选择 模拟器 后运行预览，将会使用 Cocos Simulator（桌面模拟器）运行当前的游戏场景。

使用模拟器运行游戏时，脚本中的日志信息（使用 cc.log 打印的内容）和报错信息会出现在 控制台 面板中。

浏览器

选择 浏览器 后运行预览，会在用户的默认桌面浏览器中直接运行游戏的网页版本。推荐使用谷歌浏览器（Chrome）作为开发过程中预览调试用的浏览器，因为谷歌浏览器（Chrome）的开发者工具是最为全面强大的。

浏览器预览界面的最上边有一系列控制按钮可以对预览效果进行控制：

  • 最左边选择预览窗口的比例大小，来模拟在不同移动设备上的显示效果
  • Rotate 按钮决定显示横屏还是竖屏
  • Debug Mode 里可以选择脚本中哪些级别的日志会输出到浏览器控制台中
  • Show FPS 按钮可以选择是否显示每秒帧数和 Drawcall 数量等调试信息
  • FPS 限制最高每秒帧数
  • Pause 暂停游戏
  • Recompile 重新编译项目脚本

浏览器兼容性

Cocos Creator 开发过程中测试的桌面浏览器包括： Chrome，Firefox（火狐），IE11 其他浏览器只要内核版本够高也可以正常使用，对部分浏览器来说请勿开启 IE6 兼容模式。

移动设备上测试的浏览器包括：Safari (iOS)，Chrome，QQ 浏览器，UC 浏览器，百度浏览器，微信内置 Webview。

使用 VS Code 调试

您可以使用 VS Code 在项目工程里直接对游戏预览进行调试，详情请参阅 使用 VS Code 调试网页版游戏。

使用浏览器开发者工具进行调试

以谷歌浏览器为例，通过功能菜单的 开发者/开发者工具 可以打开开发者工具界面，如上图所示。在开发者工具中，我们可以查看运行日志、打断点进行调试、在调用堆栈中查看每一步各个变量的值、甚至进行资源加载和性能分析。

要学习使用开发者工具进行调试，请阅读 极客学院的 Chrome Dev Tools 使用指南，或其他浏览器的开发者工具帮助。

构建发布

预览和调试之后，如果您对您的游戏比较满意了，就可以通过主菜单的 项目/构建发布 打开 构建发布 面板，来将游戏打包发布到您希望的目标平台上，包括 Web、iOS、Android、各类"小游戏"、PC 客户端等平台。

详细的构建发布流程，请查阅 跨平台发布游戏 一章的内容。

请注意，使用模拟器运行游戏的效果，和最终发布到原生平台可能会有一定差别，对于任何重要的游戏功能，都请以构建发布后的版本来做最终的测试。

posted @ 2018-08-07 16:14  icon_sunny  阅读(4108)  评论(0)  编辑  收藏  举报