详情
Cocos Creator作为Cocos2d-x官方推出的多平台开发工具，已经在众多Cocos图形编程工具中脱引而出，而他的直接发布成Html5版本的工作流程与方式必将在Html5的时代中大放异彩。本书从零开始，带领用户从Cocos环境配置、操作、脚本与代码、产品优化等方面详尽阐述如何制作一款多平台发布游戏，并发布至互联网。
书名：Cocos Creator完全使用手册
ISBN：978-7-115-48974-6
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
著 宋志京
责任编辑 杨大可
人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
读者服务热线：(010)81055410
反盗版热线：(010)81055315
Cocos Creator作为Cocos2d-x官方推出的多平台开发工具，已经在众多Cocos图形编程工具中脱颖而出，而其直接发布成Html5版本的工作流程与方式必将在Html5的时代中大放异彩。本书从零开始，带领用户从Cocos环境配置、操作、脚本与代码、产品优化等方面详尽阐述如何制作一款多平台发布的游戏，并介绍如何将其发布至互联网。同时，针对目前市场火热的微信小游戏的开发和发布，用一整章内容来详细讲解。
本书适合从事游戏开发的职场新人及想要在游戏开发领域有所提升的中级开发人员，也适合作为高校计算机相关专业的教学参考书，及游戏引擎开发培训班的教材。
Cocos Creator的首本中文书经过近一年的策划和编写，终于面世了。特别是在2018年HTML5行业爆发的这个时间点出版，就更加具有深远的意义。
Cocos Creator是在2016年3月发布的。但事实上Cocos引擎投入HTML5技术研发应该是在2012年，从那个时候就开始介绍并推荐使用JavaScript来开发游戏。虽然当时原生游戏开发占据主导地位，而且一直到了六年之后HTML5游戏才真正地爆发出来，但是这六年的积累，也使得Cocos Creator发布后很快就占据了绝对领先的市场份额。
在Cocos Creator最初的版本发布后，我就一直希望可以出版一本专业的图书，使初学者及开发人员可以快速地掌握Cocos Creator。我也在内容的策划和定位上与作者及引擎开发团队进行了反复的推敲和确认。同时，引擎版本的更新迭代也十分迅速，我们尽可能地更新到最新的版本。书中结合新版本引擎的应用及引擎学习的需要，添加了一部分中高级的进阶知识和平台发布优化策略等内容。
在此要感谢触控未来的每一位老师，尤其是本书的作者，正是你们严谨认真的态度才让本书得以完成。也要感谢Cocos引擎团队的全力支持，特别是王哲在本书编写的过程中提出了非常多的专业建议与意见，从全书的结构和定位，到具体的技术内容都给出了相应指导。在此一并致谢！
Cocos引擎从2008年3月诞生至今已整整十年，现在全球使用Cocos引擎的开发者已经超过120万人，且遍布全球近200个国家和地区。从原生开发，到HTML5，乃至未来新的平台，从游戏到其他领域开发的拓展，Cocos始终在提供最有价值的开发支持。希望本书的出版与发行，可以继续为开发者带来最新、最实用的支持。
祝愿各位读者通过对Cocos Creator的学习和使用，在HTML5爆发的时代取得丰硕的成果。
李志远
触控未来CEO
从20世纪中叶至今，电子游戏已走过几十个年头，游戏内容也随着游戏载体的演进而不断发生着变化，对应不同游戏内容的开发所使用的工具与方法也在不断进步。近些年，移动端电子游戏（俗称“手游”）已逐渐成为电子游戏大家庭中拥有用户最多、累计持续游戏时间最长以及累计收入最多的一员。越来越多的人希望从事游戏制作或游戏制作相关行业，应此需求Cocos系列在迭代更新了数千个版本后隆重推出了“超级”游戏引擎Cocos Creator。Cocos Creator打破了传统的纯代码编写游戏的方式，采取可视化编程，顺畅地梳理了工作流程并大幅提高了游戏开发效率。实现了轻松入门、快速上手、高效迭代和一键多平台发布等特性，是目前iOS、Android、网页游戏和微信小游戏的主要开发工具。
本书的游戏引擎部分从零讲解，由浅入深，读者不需要有任何其他游戏引擎的基础或经验，但脚本语言基础部分并没有大篇幅的内容对基础进行详细讲解，所以适合有一定JavaScript编程基础或其他编程语言基础的人阅读。本书旨在全面地介绍Cocos Creator引擎的常用功能及游戏制作的全流程，希望读者能够认真阅读本书，夯实Cocos Creator基础，为之后开发游戏做好充足的准备。
本书在大部分的功能与接口章节中加入多种案例以及案例的操作过程与效果展示，使读者在接触新功能的同时可以快速理解并加以实践。书中全面的功能介绍也可供Cocos Creator老手在开发中查阅所需知识点。
本书的写作得到了很多人的热情帮助。感谢触控未来的CEO李志远和全体同事给予我的帮助。感谢Cocos Creator引擎开发团队——雅基软件CEO王哲与Cocos Creator技术负责人Jare提供的技术支持。
本章将介绍Cocos Creator的定位、安装和基础使用方法，以及Cocos Creator的基础项目拆解与项目文件结构。
本章包括以下能够帮助读者用最快速度上手的教程内容：
Cocos Creator是一款游戏内容制作工具，完整的2D游戏引擎；其在Cocos2d-x基础上重新设计并升级，实现脚本化、组件化和可视化编程等特点。除支持传统iOS与Android两大原生移动平台外，还支持包括网页平台（HTML5）与微信小游戏平台等多平台跨平台一键发布。如图1-1所示。
Cocos Creator是一个完整的游戏引擎与游戏开发解决方案，包括了Cocos2d-x引擎的JavaScript实现，以及能让开发者更快速开发游戏所需要的各种图形界面工具，还包含从设计、开发、预览、调试到发布的整个工作流所需的全功能一体化编辑器。其编辑器提供面向设计和开发的两种工作流，提供简单顺畅的分工合作方式，为不会写代码的人制作游戏提供便利。
图1-1
Cocos Creator目前支持将游戏发布到Web、Android、iOS和微信小游戏平台，以及点开即玩原生性能的Cocos Play手机页游平台，真正实现一次开发，全平台运行。Cocos Creator还可以通过安装C++/Lua for Creator插件，在编辑器里编辑UI和场景，导出通用的数据文件也可在Cocos2d-x引擎中进行加载运行。
在开发阶段，Cocos Creator全面覆盖整个开发上线流程，大幅提升开发上线效率。从最初的立项到分角色开发，再到SDK接入与最后多种平台打包，针对每个环节均有大幅度优化与提升，如图1-2所示。
图1-2
Cocos Creator将手机、网页游戏的调试简化，将可视化编程与代码有机结合。多组件、工具的集成简化了素材导入流程。并辅以素材工具商店等，帮助开发者更专注于内容创造。
Cocos Creator功能上的突出特色有以下几点。
（1）可视化编程，脚本属性可展示在编辑器界面中，策划、美术等相关参数调整人员可根据需要自行调整。
（2）画布系统与智能布局可一次设计，完美适应不同分辨率和屏幕。
（3）专业动画系统，支持骨骼动画、逐帧动画、动画轨迹预览和动画曲线编辑功能。
（4）脚本化动态运行时加载，更加适合热更新，适合敏捷开发。
（5）借助Cocos2d-x引擎架构，具有强大的跨平台特性，可一键发布到各类桌面、移动端平台、网页平台和微信小游戏平台，并保持应用的高质量与高效率。
（6）脚本化和可视化编程把原有开发角色从传统的美术、策划、程序演变为美术、策划、程序、技术美术、技术策划等，使工作流更加顺畅，开发效率大幅提升。
Cocos Creator包含游戏引擎、资源管理、场景编辑、游戏预览和发布等游戏开发所需的全套功能，并且将所有的功能和工具链都整合在统一的应用程序里。
它以数据驱动和组件化作为核心的游戏开发方式，并且在此基础上无缝融合了Cocos引擎成熟的 JavaScript接口体系，一方面能够适应Cocos系列引擎开发者的用户习惯，另一方面为美术和策划人员提供了前所未有的内容创作生产和即时预览测试环境。
编辑器在提供强大完整工具链的同时，还提供了开放式的插件架构，开发者能够用HTML+JavaScript等前端通用技术轻松扩展编辑器功能，定制个性化的工作流程，如图1-3所示。
引擎和编辑器的结合，把传统的纯代码引擎分为图形编程部分和代码部分，开发流程方面可以按照如下方式分工：
（1）美术设计师在场景编辑器中搭建场景的图像表现；
（2）程序员开发可以挂载到场景任意物体上的功能组件；
（3）游戏策划人员或者技术美术设计师负责为需要展现特定行为的物体挂载组件，并通过调试改善各项参数；
（4）美术设计师直接导入或替换开发游戏所需要的资源；
图1-3
（5）游戏策划人员通过图形化的界面配置好各项数据和资源。
Cocos Creator把之前所有资源整合都放在程序端的旧工作流程进行了拆分，让美术人员与策划人员直接参与到最终产品生成项目中来，提高工作效率与工作效果。
可以通过访问Cocos Creator产品首页上的下载链接获得Cocos Creator的安装包，如图1-4所示。
图1-4
下载完成后双击安装包即可安装。
注意
从v1.3.0开始，Windows版Cocos Creator将不提供32位操作系统支持。
Windows 版的安装程序是一个可执行文件，通常命名会是 CocosCreator_v×.×.×_20××××××_setup.exe，其中 v×.×.×是Cocos Creator的版本号，如v1.8.1，后面的一串数字是版本日期编号。
注意
日期编号在使用内测版时会更新得比较频繁，注意如果当前PC上已安装的版本号和安装包的版本号相同时，无法自动覆盖安装相同版本号的安装包，需要先卸载之前的版本才能继续安装。
应用的安装路径默认选择了C:\CocosCreator，可以在安装过程中自定义设置。
Cocos Creator将会占据系统盘中大约1.25 GB的空间，请在安装前整理好系统盘空间。
注意
如果安装失败，请尝试通过如下命令行执行安装程序：
ocosCreator_v1.2.0_2016080301_setup.exe /exelog "exe_log.txt" /L*V "msi_log.txt"
用该命令执行，或为安装程序创建一个快捷方式，并将该命令行参数填入快捷方式的“目标”属性中。然后将生成的安装日志（exe_log.txt和msi_log.txt）提交给开发团队寻求帮助。
Mac版Cocos Creator的安装程序是DMG镜像文件，双击DMG文件，然后将CocosCreator.app拖曳到“应用程序”文件夹快捷方式，或其他任意位置。然后双击复制出来的CocosCreator.app就可以开始使用了。
注意
如果初次运行时出现下载的应用已损坏的提示，请前往并设置“系统偏好设置”→“安全性与隐私”→“允许任何来源的应用”，首次打开后可以马上恢复为原安全与隐私设置。
Cocos Creator支持Windows和MacOS两种主流的个人操作系统。
在Windows系统，双击安装文件夹中的CocosCreator.exe文件即可启动Cocos Creator。在Mac系统，双击安装后的CocosCreator.app应用图标即可启动Cocos Creator。
可以按照习惯为入口文件设置快速启动、Dock或快捷方式，方便随时运行。
对于部分Windows操作系统和显卡型号，可能会遇到如下问题：
This browser does not support WebGL...这个报错信息，是因为显卡驱动对编辑器WebGL渲染模式的支持不正确而导致的。如果出现这种情况，可以尝试使用命令行运行CocosCreator.exe并加上--disable-gpu运行参数，来禁用GPU加速功能。这样就可以绕开部分显卡驱动的问题。
上述两步简单操作可准备好使用Cocos Creator制作游戏的开发环境。如果需要发布游戏到原生平台（比如Android），则需要额外配置发布环境，参照第10章。
Cocos Creator启动后，会进入Cocos开发者账号的登录界面。登录之后就可以享受Cocos Creator为开发者提供的各种在线服务、产品更新通知和各种开发者福利等。
如果之前没有Cocos开发者账号，可以使用登录界面中的“注册”按钮前往Cocos开发者中心进行注册。或直接使用下面的链接：https://passport.Cocos.com/auth/signup。
注册完成后就可以回到Cocos Creator登录界面完成登录了！验证身份后，会自动进入Dashboard界面。如果需要切换账号，请在Dashboard中注销。
启动Cocos Creator并使用Cocos开发者账号登录以后，会自动打开Dashboard（导航面板）界面，在这里开发者可以新建项目或打开已有项目，抑或获得帮助信息。
界面总览如图1-5所示。
Cocos Creator的导航面板界面包括以下几种选项卡。
下面来依次介绍这些分页面。
图1-5
开发者可以通过“最近打开项目”选项卡快速访问近期打开过的项目。第一次运行Cocos Creator时，这个列表是空的，在界面上会显示“新建项目”的按钮。读者可以在创建或打开一些项目后重新打开此界面，会看到之前新建或打开过的项目出现在列表里，如图1-6所示。
图1-6
当鼠标光标悬停在一个最近打开项目的条目上时，会显示可以对该项目进行操作的行为。
Dashboard可以在“新建项目”选项里创建新的Cocos Creator项目。
在“新建项目”页面，首先需要选择一个项目模板，项目模板会包括各种不同类型的游戏基本架构，以及学习用的范例资源和脚本，以帮助开发者更快进入到创造性的工作当中。如图1-7所示。
图1-7
在页面下方可以看到项目名称和路径。可以在项目路径输入框中手动输入项目所在路径和项目名称，路径的最后一节就是项目名称。
也可以单击“浏览”按钮，打开浏览路径对话框，在本地文件系统中选择一个位置来存放新建项目。
一切都设置好后，单击“新建项目”按钮来完成项目的创建。Dashboard 界面会被关闭，然后新创建的项目会在Cocos Creator编辑器主窗口中打开。
当项目窗口被关闭后，Dashboard界面会被重新打开。
如果在“最近打开项目”页面找不到希望打开的项目，或者刚从网上下载了一个新项目，可以通过“打开其他项目”选项卡按钮在本地文件系统中浏览并打开对应项目。
单击“打开其他项目”按钮后，会弹出本地文件系统的选择对话框，在这个对话框中选中希望打开的项目文件夹，并选择打开即可。
注意
Cocos Creator使用特定结构的文件夹作为合法项目标识，而不是使用工程文件。选择项目时只要选中项目文件夹即可。
开发者可以通过“帮助”页面访问Cocos Creator用户手册和其他帮助文档，如图1-8所示。
图1-8
本节将详细地介绍如何在Cocos Creator集成开发环境中创建第一个Cocos Creator案例，并完成从制作到运行体验实际效果的完整开发循环。此案例主要内容为：创建并运行“Hello World”；首先向Cocos Creator的“世界”打个招呼，稍后再尝试稍微改造“世界”。
上一节提到了创建项目的多种模板，这里选择其中的“Hello World”模板，并填好文件路径，单击 “新建项目”按钮，如图1-9所示。
图1-9
Cocos Creator就会自动以“Hello World”项目模板创建项目并打开。
在这里先简单了解，第2章将详细介绍编辑器界面。Cocos Creator的默认界面如图1-10所示，主要分为“层级管理器”“资源管理器”“场景编辑器”“控件库”“控制台”“动画编辑器”和“属性检查器”等。
图1-10
初次打开一个项目时，默认不会打开任何场景，要看到Hello World模板中的内容，需要先打开场景资源文件。双击场景文件，如图1-11所示。
图1-11
在资源管理器中双击“helloworld”场景文件。Cocos Creator资源管理器窗口中所有文件都不显示文件扩展名，用图标区分文件类型，其中所有场景文件都以“
”作为图标。
打开场景后界面如图1-12所示。
图1-12
不需要写任何代码，也不需要修改任何内容，直接单击图片中的播放（三角）按钮，运行预览。
Cocos Creator会自动启动浏览器，展示标准的Cocos式Hello World。这里建议使用Google Chrome浏览器，在第4章中会详细介绍。浏览器中展示的是Cocos Creator目前场景的运行预览，主要包括深蓝色的背景、一个Cocos图标与下方“Hello,World!”文字，如图1-13所示。
图1-13
对比打开场景后，在场景管理器中看到Cocos Creator的界面产生了变化。
首先查看“场景编辑器”窗口，场景编辑器里大致体现了最终效果中背景、Cocos图标与文字的位置、大小等关系，但是文字部分却并不是“Hello，World！”，而是“Label”，如图1-14所示。
图1-14
下面尝试稍微改变一下“世界”。
（1）把图标旋转180°：场景编辑器窗口中用鼠标左键单击Cocos图标以选中该节点，如图所示，被选中的图标外围会有浅蓝色[1]边框，如图1-15所示。
图1-15
然后单击图1-16中红框内的“旋转按钮”，进入旋转模式。被选中的节点上出现可旋转图样（红色的圆圈和箭头，默认朝向正右方），如图1-16所示。
图1-16
最后用鼠标左键拖曳使Cocos图标旋转至180°，如图1-17所示。
（2）把文字移动到图标上面：对应“场景管理器”窗口中的内容，“层级管理器”窗口也产生了对应的内容，并以如图所示层级罗列。
点选label节点。这里点选和在“场景管理器”中点选的效果是一致的，被选中的节点在“场景管理器”中被浅蓝色的框框住，如图1-18所示。
图1-17
图1-18
单击图1-19中红框内的“平移按钮”，进入平移模式，被选中节点上出现可平移图样（水平和垂直两个箭头），如图1-19所示。
图1-19
按住鼠标左键向上拖曳垂直向上的箭头（绿色的箭头），直至图1-20所示，把文字放到图标上面。如图1-20所示。
图1-20
（3）修改预览显示文字“Hello, World!”：用鼠标左键点选左上层级管理器窗口中的“Canvas”节点，在右侧属性检查器“HelloWorld”组件下找到Text文字输入框，把原有文字“Hello, World!”改为“Hey world!”，如图1-21所示。
（4）查看“新世界”预览：直接单击三角运行预览按钮，预览大致如图1-22所示。
图1-21
图1-22
在简单了解一个Cocos Creator项目后，这一节将介绍Cocos Creator的项目结构。
打开建立项目时默认或者自定义的文件路径，有如下项目文件夹结构：
ProjectName（项目文件夹）
├──assets
├──library
├──local
├──settings
├──temp
└──project.json下面会简单介绍每个文件夹的功能。
（1）assets
assets（资源文件夹）将会用来放置游戏中所有本地资源、脚本和第三方库文件。只有在assets目录下的内容才能显示在“资源管理器”中。assets中的每个文件在导入项目后都会生成一个相同文件名的.meta文件，用于存储该文件作为资源导入后的信息和与其他资源的关联。其他游戏运行时不需要的文件，可以选择放在assets外面来管理。
（2）library
library（资源库）是将assets中的资源导入后生成的，在这里的文件结构和资源格式将被处理成最终游戏发布时需要的形式。如果使用版本控制系统管理项目，这个文件夹是不需要进入版本控制的。
当library丢失或损坏时，只要删除整个library文件夹再打开项目，就会重新生成。
（3）local
local（本地设置）文件夹中包含该项目的本地设置，包括编辑器面板布局、窗口大小和位置等信息。不需要关心这里的内容，只要按照习惯设置编辑器布局，这些就会自动保存在该文件夹中。与library一样，local 也不需要进入版本控制。
（4）settings
settings（项目设置）里保存项目相关的设置，如“构建发布”菜单里的包名、场景和平台选择等。
（5）temp
temp（临时文件夹）中包含该项目被Cocos Creator打开时在本地产生的临时文件，包括为了提供撤销功能而做的素材备份、运行临时文件等信息。开发者不需要关心这里的内容，在项目被打开时引擎自动创建此文件夹，一般temp也不需要进入版本控制。
（6）project.json
project.json文件和assets文件夹一起，作为验证Cocos Creator项目合法性的标志。只有包括了这两个内容的文件夹才能作为Cocos Creator项目打开。而project.json本身目前只用来规定当前使用的引擎类型和插件存储位置，不需要用户关心其内容。
在主菜单中的“项目”→“构建发布…”中使用默认发布路径发布项目后，编辑器会在项目路径下创建“build”目录，并存放所有目标平台的构建工程。由于每次发布项目后资源ID可能会变化，而且构建原生工程时体积很大，所以此目录建议不放入版本控制中。
本章内容主要包括Cocos Creator的简介、特点和基础架构等。读完本章，相信读者对Cocos Creator已经有了初步的了解。Cocos Creator集成开发环境的安装和基础案例的解析，让读者可以顺利地进入并使用Cocos Creator集成开发环境。
[1] 本书中描述的颜色为操作界面在实际使用时显示的颜色，为方便读者理解，后续对颜色的描述会伴有进一步解释。——编者注。
这一章会详细介绍编辑器界面，各种面板、菜单和功能按钮。Cocos Creator编辑器由多个自由窗口组成，窗口可自由缩放移动、组合，以适应不同开发者的习惯与需要。
本章包括以下能够帮助读者用最快速度上手的教程内容：
资源管理器是Cocos Creator编辑器访问和管理项目资源的窗口。在游戏制作中，场景、图片、声音、视频、脚本（代码）和动画等都是资源，均在这里进行展示与操作。资源管理器中的成员与项目asset文件夹下的文件和文件夹逐一对应。
界面主要分为创建按钮、搜索框、资源列表和当前选中资源路径，布局与样式如图2-1所示。
单击资源管理器窗口中的“创建按钮”，弹出创建菜单。其支持创建文件夹、各种脚本、场景和动画帧等，如图2-2所示。
图2-1
图2-2
资源列表中的文件显示都是看不到扩展名的，只能通过图标或者从当前选中资源路径中查看带有扩展名的完全路径来确认文件类型。比较常见的图标与扩展名对应：
场景图标对应“*.fire”文件，
JavaScript脚本图标对应“*.js”文件，
音频图标对应“*.wav或*.mp3”，亦或其他音频扩展名。图片资源用图片预览图做图标。
资源列表中的操作和其他资源浏览器（比如Windows资源浏览器）中的操作类似，可以针对资源（文件或文件夹）进行重命名、移动、删除等操作。除此之外还支持新建、在资源管理器中查看和前往Library中的资源位置等功能，如图2-3所示。
在资源搜索框中输入，可对资源列表进行关键字过滤，把所有包含搜索关键字的内容展示出来。但是这种过滤状态的显示是没有路径的，所有必须要有路径的功能将会失效，比如移动资源等。如图2-4所示。
图2-3
图2-4
场景编辑器是Cocos Creator实现可视化编程的核心，展示当前打开场景中所有的节点，节点概念请参照第3章。在这个工作区域里，用户可以选中并通过变换工具来修改节点的位置、旋转、缩放、尺寸等属性，并获得所见即所得的场景效果预览，如图2-5所示。
图2-5
视图中紫色的框为场景中的画布区域，尺寸由画布的设计分辨率决定。详见6.1节。
场景视图中背景部分有灰色背景网格，以画布左下角为(0, 0)点，根据当前缩放显示何时的网格刻度，帮助丈量场景。
为了使可视化编程更方便，在使用场景编辑器视图窗口时，通常会放大查看并修改细节、缩小查看整体效果或点选某一节点进行单独属性查看或修改，常用操作方式如下。
图2-6
图2-7
节点变换工具位于编辑器左上角，不可移动。4个按钮从左至右依次是：平移、旋转、缩放和自由变换。默认选中平移工具。
快捷键：W。节点变换工具左边第一个按钮，如图2-8所示。
当有节点被选中且节点变换工具处于平移状态时，在被选中节点的锚点位置（通常情况下在中心位置）出现平移控制手柄（gizmos），如图2-9所示。
图2-8
图2-9
按住鼠标左键拖曳垂直箭头（绿色），可拖曳被选中节点垂直移动；按住鼠标左键拖曳水平箭头（红色），可拖曳被选中节点水平移动；按住鼠标左键拖曳中央矩形（蓝色），可拖曳被选中节点自由移动。
快捷键：E。节点变换工具左边第二个按钮，如图2-10所示。
当有节点被选中且节点变换工具处于旋转状态时，在被选中节点的锚点位置（通常情况下在中心位置）出现旋转控制手柄（gizmos），如图2-11所示。
图2-10
图2-11
旋转控制手柄由一个圆环和一个箭头组成，默认箭头朝右，并且规定逆时针为正，顺时针为负。按住鼠标左键拖曳指针或者圆环内任意位置均可使被选中节点延锚点旋转。
快捷键：R。节点变换工具左边第3个按钮，如图2-12所示。
当有节点被选中且节点变换工具处于缩放状态时，在被选中节点的锚点位置（通常情况下在中心位置）出现缩放控制手柄（gizmos），如图2-13所示。
图2-12
图2-13
缩放手柄和平移手柄非常类似，为了区别，缩放手柄边缘是矩形而不是箭头。按住鼠标左键拖曳垂直手柄（绿色）被选中节点垂直缩放；按住鼠标左键拖曳水平手柄（红色）被选中节点水平缩放；按住鼠标左键拖曳中央矩形（灰色）被选中节点自由缩放。
快捷键：T。节点变换工具左边第4个按钮，如图2-14所示。
当有节点被选中且节点变换工具处于自由变换状态时，在被选中节点的锚点位置（通常情况下在中心位置）和外围位置出现自由变换控制手柄（gizmos），如图2-15所示。
图2-14
图2-15
自由变换手柄是功能最多也是最复杂的手柄，按住鼠标左键拖曳外框顶点可调节被选定节点尺寸；按住鼠标左键拖曳外围边框可单独改变被选中节点的宽度或者高度；按住鼠标左键拖曳中央蓝色圆环可改变被选中节点锚点的位置；按住鼠标左键拖曳框内任意其他位置可改变被选中节点的位置。
层级管理器和场景编辑器一样，显示的是当前打开场景中的节点。不同的是场景编辑器中展示的是节点渲染后的样子，层级管理器展示的是节点的层级与节点名称列表。层级管理器中的节点和场景编辑器中的节点一一对应，如图2-16所示。
单击创建节点按钮会弹出创建节点列表，可以选择不同类型节点，包括的内容如图2-17所示。
图2-16
图2-17
如果创建时有节点在选中状态，则新创建的节点会成为被选中节点的子节点，否则新创建节点会成为根节点的子节点。子节点概念会在第3章介绍。
可通过右键菜单里的删除选项来删除节点。
注意
如果选中节点拥有子节点，所有该节点下的子节点也会被一并删除。
按住鼠标左键拖曳节点，可将其拖到另一节点上，形成子节点。在层级管理器窗口中用树状结构表示，如图2-18所示。
图2-18
也可以通过拖曳改变节点的上下顺序、渲染顺序等。节点在列表中的排序决定了节点在场景中的显示次序。在层级管理器中位置越靠下的节点，在场景中的渲染就会更晚，也就会覆盖列表中位置较为靠上的节点。渲染与遮挡详见3.3节。
与资源搜索框类似，不再赘述。
其他常用操作包括重命名、复制、粘贴和复制节点等。帮助开发者避免重复劳动，提高开发效率，操作方式如下。
属性检查器窗口是查看和修改资源属性、节点属性或节点拥有组件属性的窗口，也是构成图形化编程的重要组成部分，如图2-19所示。
属性检查器大多数时间都和组件密切相关，更多信息详见3.1节。
图2-19
串口输出（Console）窗口是Cocos Creator重要的信息输出途径也是游戏运行时重要的调试（debug）打印途径。其可输出编辑器日志、警告和报错等信息，如图2-20所示。
图2-20
不同的内容用不同的颜色表示。
串口输出让开发者可以查看输出内容，但是当输出内容较多时，开发者难以快速找到指定输出内容，Cocos Creator窗口输出提供了如下功能来帮助开发者。
，把目前串口输出所有内容清除掉；如果有持续报错，报错信息将不断重新显示。
，在输出内容中进行关键字匹配，只能显示包含的关键字条目；如果勾选右侧Regex，则支持输入正则表达式。
，该选项处于激活状态时，多条内容一致的串口输出将显示为一条，并在信息边上添加计数器。图2-21
Cocos Creator可以方便快捷地按照目前项目配置进行项目预览，主要是通过顶部预览工具栏完成。如图2-22所示。
目前Cocos Creator支持两种方式预览：浏览器和模拟器。
可以在预览工具栏中通过下拉菜单选择，如图2-23所示。
图2-22
图2-23
模拟器是在PC或Mac上模拟移动平台的运行效果。如图2-24所示。
图2-24
运行时产生的日志、警告、报错等都将在串口输出窗口内显示。
模拟器可以模拟大部分原生平台行为，但是仍然建议原生平台版本采用原生平台真机测试。
浏览器运行会启动用户默认的浏览器，并自动打开指定地址。建议使用Google Chrome浏览器，也可直接在浏览器内输入Cocos Creator调试地址。如图2-25所示。
图2-25
浏览器预览时日志将输出至浏览器，查看方式是在网页空白处（Cocos Creator画布中的区域无效）在鼠标右键菜单中选择“检查”，并在弹出窗口中选中Console标签页。如图2-26所示。
Chrome浏览器的日志也有各种过滤方式，和Cocos Creator编辑器的串口输出窗口类似，在此不再赘述。
注意
预览时默认会选择系统默认浏览器，如果需要用指定浏览器预览，在菜单“Cocos Creator”→“偏好设置”→“预览运行”中选择预览浏览器。或更改系统默认浏览器。
图2-26
本章全面地介绍了Cocos Creator编辑器的主要界面外观与基础操作。
