您正在阅读的手册文档包括了系统化的介绍 Cocos Creator 的编辑器界面、功能和工作流程，但如果您想快速上手体验使用 Cocos Creator 开发游戏的大体流程和方法，这一章将满足您的好奇心。完成本章教程之后，您应该能获得足够上手制作游戏的信息，不过我们还是推荐您继续阅读本手册来了解各个功能模块的细节和完整的工作流程。
接下来就让我们开始吧，跟随教程我们将会制作一款名叫 摘星星 的坑爹小游戏。这款游戏的玩家要操作一个反应 迟钝 却蹦跳不停的小怪物来碰触不断出现的星星，难以驾驭的加速度将给玩家带来很大挑战，和您的小伙伴比比谁能拿到更多星星吧！
可以在这里感受一下这款游戏的完成形态：
http://fbdemos.leanapp.cn/star-catcher/
准备项目和资源
我们已经为您准备好了制作这款游戏需要的全部资源，下载 初始项目 后，解压到您希望的位置，之后我们就可以开始了：
您也可以下载最终完成的项目，跟随教程制作过程中有任何不明白的地方都可以打开完成版的项目作为参考：
打开初始项目
如果您还不了解如何获取和启动 Cocos Creator，请阅读 安装和启动 一节。
- 我们首先启动 Cocos Creator，然后选择 打开其他项目
- 在弹出的文件夹选择对话框中，选中我们刚下载并解压完成的 start_project，点击 打开 按钮
- Cocos Creator 编辑器主窗口会打开，我们将看到如下的项目状态
检查游戏资源
我们的初始项目中已经包含了所有需要的游戏资源，因此您不需要再导入任何其他资源。如果希望了解导入资源的方法，可以阅读 资源工作流程 的相关内容。
下面我们先来了解一下项目中都有哪些资源，请关注名为 资源管理器 的面板，这里显示的是项目中所有资源的树状结构。
可以看到，项目资源的根目录名叫 assets，对应我们解压之后初始项目中的 assets 目录，只有这个目录下的资源才会被 Cocos Creator 导入项目并进行管理。
资源管理器 可以显示任意层次的目录结构，我们可以看到 
这样的图标就代表一个文件夹，点击文件夹左边的三角图标可以展开文件夹的内容。将文件夹全部展开后，资源管理器 中就会呈现如下图的状态。
每个资源都是一个文件，导入项目后根据扩展名的不同而被识别为不同的资源类型，其图标也会有所区别，下面我们来看看项目中的资源各自的类型和作用：
-
声音文件，一般为 mp3 文件，我们将在主角跳跃和得分时播放名为 jump 和 score 的声音文件。 -
位图字体，由 fnt 文件和同名的 png 图片文件共同组成。位图字体（Bitmap Font） 是一种游戏开发中常用的字体资源，详情请阅读 位图字体资源 - 各式各样的缩略图标，这些都是图像资源，一般是 png 或 jpg 文件。图片文件导入项目后会经过简单的处理成为 texture 类型的资源。之后就可以将这些资源拖拽到场景或组件属性中去使用了。
创建游戏场景
在 Cocos Creator 中，游戏场景（Scene） 是开发时组织游戏内容的中心，也是呈现给玩家所有游戏内容的载体。游戏场景中一般会包括以下内容：
- 场景图像和文字（Sprite，Label）
- 角色
- 以组件形式附加在场景节点上的游戏逻辑脚本
当玩家运行游戏时，就会载入游戏场景，游戏场景加载后就会自动运行所包含组件的游戏脚本，实现各种各样开发者设置的逻辑功能。所以除了资源以外，游戏场景是一切内容创作的基础。现在，让我们来新建一个场景。
- 在 资源管理器 中点击选中 assets 目录，确保我们的场景会被创建在这个目录下
-
点击 资源管理器 左上角的加号按钮，在弹出的菜单中选择 Scene
-
我们创建了一个名叫 New Scene 的场景文件，创建完成后场景文件 New Scene 的名称会处于编辑状态，将它重命名为 game。
- 双击 game，就会在 场景编辑器 和 层级管理器 中打开这个场景。
了解 Canvas
打开场景后， 层级管理器 中会显示当前场景中的所有节点和他们的层级关系。我们刚刚新建的场景中只有一个名叫 Canvas 的节点，Canvas 可以被称为画布节点或渲染根节点，点击选中 Canvas，可以在 属性检查器 中看到他的属性。
这里的 Design Resolution 属性规定了游戏的设计分辨率，Fit Height 和 Fit Width 规定了在不同尺寸的屏幕上运行时，我们将如何缩放 Canvas 以适配不同的分辨率。
由于提供了多分辨率适配的功能，我们一般会将场景中的所有负责图像显示的节点都放在 Canvas 下面。这样当作为父节点的 Canvas 的 scale（缩放）属性改变时，所有作为其子节点的图像也会跟着一起缩放以适应不同屏幕的大小。
更详细的信息请阅读 Canvas 组件参考。目前我们只要知道接下来添加的场景图像都会放在 Canvas 节点下面就可以了。
设置场景图像
添加背景
首先在 资源管理器 里按照 assets/textures/background 的路径找到我们的背景图像资源，点击并拖拽这个资源到 层级管理器 中的 Canvas 节点上，直到 Canvas 节点显示橙色高亮，表示将会添加一个以 background 为贴图资源的子节点。
这时就可以松开鼠标按键，可以看到 Canvas 下面添加了一个名叫 background 的节点。当我们使用拖拽资源的方式添加节点时，节点会自动以贴图资源的文件名来命名。
我们在对场景进行编辑修改时，可以通过主菜单 文件 -> 保存场景 来及时保存我们的修改。也可以使用快捷键 Ctrl+S（Windows）或 Cmd + S（Mac）来保存。
修改背景尺寸
在 场景编辑器 中，可以看到我们刚刚添加的背景图像，下面我们将修改背景图像的尺寸，来让他覆盖整个屏幕。
首先选中 background 节点，然后点击主窗口左上角工具栏第四个 矩形变换工具：
使用这个工具我们可以方便的修改图像节点的尺寸，将鼠标移动到 场景编辑器 中 background 的左边，按住并向左拖拽直到 background 的左边超出表示设计分辨率的紫色线框。然后再用同样的方法将 background 的右边向右拖拽。
之后需要拖拽上下两边，使背景图的大小能够填满设计分辨率的线框。
在使用 矩形变换工具 修改背景图尺寸时，在 属性检查器 中可以看到 Node （节点）中的 Size 属性也在随之变化，完成后我们的背景图尺寸大概是 (1360, 760)。您也可以直接在 Size 属性的输入框中输入数值，和使用 矩形变换工具 可以达到同样的效果。这样大小的背景图在市面流行的手机上都可以覆盖整个屏幕，不会出现穿帮情况。
添加地面
我们的主角需要一个可以在上面跳跃的地面，我们马上来添加一个。用和添加背景图相同的方式，拖拽 资源管理器 中 assets/textures/ground 资源到 层级管理器 的 Canvas 上。这次在拖拽时我们还可以选择新添加的节点和 background 节点的顺序关系。拖拽资源的状态下移动鼠标指针到 background 节点的下方，直到在 Canvas 上显示橙色高亮框，并同时在 background 下方显示表示插入位置的绿色线条，然后松开鼠标，这样 ground 在场景层级中就被放在了 background 下方，同时也是 Canvas 下的一个子节点。
在 层级管理器 中，显示在下方的节点的渲染顺序是在上方节点的后面，也就是说下方的节点是在上方节点之后绘制的。我们可以看到位于 层级管理器 最下方的 ground 节点，在 场景编辑器 的层级中显示在了最前。另外子节点也会永远显示在父节点之前，我们可以随时调整节点的层级顺序和关系来控制他们的显示顺序。
按照修改 background 节点的方法，我们也可以使用 矩形变换工具 来为 ground 节点设置一个合适的大小。在使用 矩形变换工具 的时候，通过拖拽节点顶点和四边之外的部分，就可以更改节点的位置。下图是我们设置好的地面节点状态：
除了 矩形变换工具 之外，我们还可以使用 移动工具 
来改变节点的位置。尝试按住 移动工具 显示在节点上的箭头并拖拽，就可以一次改变节点在单个坐标轴上的位置。
我们在设置 background 和 ground 的位置和尺寸时不需要很精确的数值，可以凭感觉拖拽。如果您偏好比较完整的数字，也可以按照截图直接输入 position 和 size 的数值。
添加主角
接下来我们的主角小怪兽要登场了，从 资源管理器 拖拽 assets/texture/PurpleMonster 到 层级管理器 中 Canvas 的下面，并确保他的排序在 ground 之下，这样我们的主角会显示在最前面。 注意小怪兽节点应该是 Canvas 的子节点，和 ground 节点平行。
为了让主角的光环在场景节点中非常醒目，我们右键点击刚刚添加的 PurpleMonster 节点，选择 重命名之后将其改名为 Player。
接下来我们要对主角的属性进行一些设置，首先是改变 锚点(Anchor) 的位置。默认状态下，任何节点的锚点都会在节点的中心，也就是说该节点中心点所在的位置就是该节点的位置。我们希望控制主角的底部的位置来模拟在地面上跳跃的效果，所以现在我们需要把主角的锚点设置在脚下。在 属性检查器 里找到 Anchor属性，把其中的 y 值设为 0，可以看到 场景编辑器 中，表示主角位置的 移动工具 的箭头出现在了主角脚下。
注意锚点的取值，当锚点的取值为（0，0）时表示锚点在节点的左下角，锚点的取值为（1，1）时表示锚点在节点的右上角，锚点的取值为（0.5，0.5）时表示锚点在节点的中心，以此类推。
接下来在 场景编辑器 中拖拽 Player，把他放在地面上，效果如下图：
这样我们基本的场景美术内容就配置好了。下面一节我们要编写代码让游戏里的内容生动起来。
