一、新建项目

我们先通过一个简单的项目了解Cocos的基本结构；

打开cocos creator，在下面界面中选择"new"，然后选择【hello-world】项目，修改项目名称，并确定项目保存位置，最后点击"Create and open"。在这里插入图片描述
Cocos有几个非常鲜明的特色：

面向JavaScript脚本化开发；
组件化和数据驱动的全新工作流；

打开项目之后，界面如下图所示：
在这里插入图片描述

二、资管管理器

我们首先介绍左下角部分的【资源管理器】，资源管理器中包含了项目中所有资源文件的属性列表，看起来可能有点像IDE中的工程文件，但是这里其实是一个数据库，导入的资源会自动分配一个UUID，在之后的工作中不管怎么移动或者改名都不会影响其在场景和脚本中的调用；

在这里插入图片描述

项目资源中，一个最重要的资源就是场景【Scene】；在Cocos Creator中，场景是一个独立的文件资源，可以像打开PSD文件一样在编辑器中双击打开；

场景文件是数据驱动工作流的核心，场景中包括图像资源、动画、特效以及驱动游戏逻辑和表现的脚本；我们说Cocos Creator是一个数据驱动的开发流程，其意思就是Cocos的游戏启动是通过读取场景中的资源和脚本，而不是通过一段入口的程序。
在这里插入图片描述

三、层级编辑器

刚刚我们双击打开的场景，如上图所示，可以发现【场景编辑器】和【层级管理器】都出现了场景里面的内容。对于美术人员来说，场景编辑器就好像ps中的画布，层级管理器就好像ps中的图层列表。

在场景编辑器中，我们可以用所见即所得的方式去编辑场景中图像元素的属性，包括位置、旋转、尺寸等属性，如下图所示；这样场景/美术人员可以在场景编辑器中搭建场景和预览特效；
在这里插入图片描述
层级管理器可以进行图像元素渲染顺序的调整和层级调整，我们可以将任意元素拖拽到另一个节点下面，建立父子关系；父子关系除了可以用来调节层级关系外，父节点的属性变化还会影响子节点；下面我们可以测试一下，将【label】变为【cocos】的子节点，如下图所示：
在这里插入图片描述

通过层级管理器可以非常直观地查看和调整所有节点的层级关系，而且在场景元素很多的时候，可以在【场景编辑器】中精确地选中想要编辑的元素，排除干扰。

四、属性检查器

上面我们通过工具编辑节点的位置和旋转时，实际上修改的是节点的属性，当前选中的节点属性会列出在【属性检查器】，如下图所示：
在这里插入图片描述
通过工具编辑节点时，属性检查器的数值也是同步更新的，也可以在属性检查器中输入准确的属性值来定位节点；

说完节点属性，我们说一下Cocos Creator另外一个特色——【组件化开发】，之前的Cocos 2d.x是以继承的形式来扩展功能，用户如果想要给节点添加功能，必须新建一个类来继承node节点类，需要多少个不同的节点就需要多少个不同的类，基于继承的功能开发结构复杂，扩展成本高。

在Cocos Creator中，写好的脚本是以组件的形式添加到上述节点中（通过组件式开发将功能分解为独立的单元，通过组合创造无限可能，避免重复代码），我们可以在编辑器的资源管理器中看到“HelloWorld”脚本，如下图所示：
在这里插入图片描述
我们看看这个脚本做了什么事情，这个脚本的内容如下图所示：

首先这个脚本中定义了一个文字类型的引用，也就是图中的【label】，这个引用可以获取到场景中的文字节点的实例，接下来定义了一个字符串类型【text】作为【HelloWorld】程序的问候语；在加载场景之后会自动运行【onLoad】方法，通过指定文字元素来显示设定的问候语。

在这个脚本完成后，可以直接在【资源管理器】中将这个脚本拖拽到【属性检查器】中，如下图所示：
在这里插入图片描述
我们可以看到，组件的添加和删除都可以由非程序员独立完成，设计师对于内容制作有更大的自由；

在属性检查器中的【HelloWorld】中，如下图所示，可以看到一个【Label】，这个Label就是脚本中定义的label；Cocos Creator能够将脚本里的属性转化成编辑器序列化的数据，并以最合适的控件呈现；所以我们在脚本中定义了label和text，就可以在属性检查器中看到【Label】和【Text】，点击属性管理器中的【Label】就可以在【层级管理器】中看到引用的是哪个节点。
在这里插入图片描述
点击运行，观看其效果，如下图所示：

我们可以看到，场景中显示了我们在脚本中设置的text，我们可以在属性检查器中修改【Text】的值，然后点击运行就能看到我们修改后的【Text】文字内容，这样我们可以在不修改代码的情况下实现我们想要的效果；这就是这里想要介绍的【组件化和数据驱动】的最大优势——脚本程序中只要声明了属性，后续对属性值的修改都可以在编辑器中直接完成，而且修改后的属性会保存在场景的资源文件中，这样就成功分离了程序员和内容生产者的职能，程序员不用因为文案资源、图片的问题去效果代码，策划和美术可以在不写一行的代码下就能够自己照顾好自己的生产内容。通过这个编辑器和新的工作流程，功能开发和内容生产既不会互相拖累，又能够密切协作。