Cocos create

Cocos create是什么

轻量、易⽤的跨平台 2D、3D 游戏创作⼯具
Cocos Creator 是以内容创作为核心，实现了脚本化、组件化和数据驱动的游戏开发工具。 具备了易于上手的内容生产工作流，以及功能强大的开发者工具套件，可用于实现游戏逻辑和高性能游戏效果。 秉承着 Cocos ⼀贯的开源、易上⼿、⾼性能和跨平台等产品特性，这款全新的游戏引擎旨在成为开发者创作 2D、 3D 游戏的新选择。

优势

1. 完善的功能特性
2. 编辑器全面升级，实时预览，动画预览，插件
3. 支持多性能，多渲染后端框架
4. 2D 和 3D
5. 开源，免费
6. 跨平台，支持各大主流平台，游戏可以快速发布到 Web、iOS、Android、Windows、Mac，以及各个小游戏平台，让您最大化游戏产品的可见度和成功概率
7. TypeScript，在真机上进⾏快速预览、调试，对已发布的游戏进⾏热更新。

安装和启动

官网地址： https://www.cocos.com/creator/

Windows 版的安装程序是一个 .exe 可执行文件，通常命名会是 CocosCreator_vX.X.X_20XXXXXX_setup.exe，其中 vX.X.X 是 Cocos Creator 的版本号，如 v1.2.2，后面的一串数字是版本日期编号。

运行 Cocos Creator

在 Windows 系统，双击解压后文件夹中的 CocosCreator.exe 文件即可启动 Cocos Creator。

开发前需要注册个开发者账号

https://passport.cocos.com/auth/signup

Dashboard

启动 Cocos Creator 并使用 Cocos 开发者帐号登录以后，就会打开 Dashboard 界面，在这里你可以新建项目、打开已有项目或者获得帮助信息。

在开发之前需要先去下载一个编辑器版本

然后可以打开或者新建一个新的项目

开发的基本布局

项目结构

文件夹结构

资源文件夹（assets）：会用来放置游戏中所有的本地资源、脚本和第三方库文件，只有在 assets 目录下的内容才能显示在 资源管理器 中



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


本地设置（local）：local 文件夹中包含该项目的本机上的配置信息，包括编辑器面板布局，窗口大小，位置等信息

扩展插件文件夹（packages）:packages 文件夹用于放置此项目的自定义扩展插件。

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


临时文件夹（temp）:
temp 是临时文件夹，用于缓存一些 Cocos Creator 在本地的临时文件



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


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

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

编辑器

新手手册：http://docs.cocos.com/creator/manual/zh/getting-started/basics/editor-overview.html

资源管理器
显示了项目资源文件夹（assets）中的所有资源。
可以创建新的场景或是新建ts脚本文件，导入图片等

层级管理器

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

属性检查器

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

控件库

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

工具栏

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

设置

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

代码编辑环境

cocos create不支持直接在系统内部编写ts脚本

完善的代码编辑需要在系统内配置，推荐使用 VS code

安装适配插件

打开你的项目，然后选择主菜单里的 开发者 -> VS Code 工作流 -> 安装 VS Code 扩展插件

打开文件编辑器，可以在文件->设置内进行

快速上手：制作第一个游戏

基础文件地址：https://github.com/cocos-creator/tutorial-first-game/tree/v2.4

http://docs.cocos.com/creator/manual/zh/getting-started/quick-start.html

打开初始项目

首先启动 Cocos Creator，然后在 Dashboard 中选择 打开其他项目。
在弹出的文件夹选择对话框中，选中我们刚才下载并解压完成的 start_project，点击 打开 按钮。

Cocos Creator 编辑器主窗口会打开，我们将看到如下的项目状态：

检查游戏资源

初始项目中已经包含了所有需要的游戏资源，不需要再导入任何其他资源。



项目资源的根目录名叫 assets，对应我们解压之后初始项目中的 assets 目录，只有这个目录下的资源才会显示在 Creator 编辑器的 资源管理器 面板中。

资源管理器 可以显示任意层次的目录结构，我们可以看到 folder 这样的图标就代表一个文件夹，点击文件夹左边的三角图标可以展开文件夹的内容。将文件夹全部展开后，资源管理器 会呈现如下图的状态：



每个资源都是一个文件，导入项目后编辑器会根据资源扩展名识别出不同的资源类型，并且资源图标也会有所区别。项目中资源的类型和作用包括：

audioclip 声音文件，一般为 mp3 文件。在这个教程中，我们会分别在主角跳跃和得分时播放名为 jump 和 score 的声音文件。
bmfont 位图字体，由 fnt 文件和同名的 png 图片文件共同组成。位图字体（Bitmap Font） 是一种游戏开发中常用的字体资源，详情可参考 位图字体资源。
各式各样的缩略图标，这些都是图像资源，一般是 png 或 jpg 文件。图片文件导入项目后会经过简单的处理成为 texture 类型的资源。之后就可以将这些资源拖拽到场景或组件属性中使用了。

创建游戏场景
在 Cocos Creator 中，游戏场景（Scene） 是开发时组织游戏内容的中心，也是呈现给玩家所有游戏内容的载体。游戏场景中一般会包括以下内容：

• 场景图像和文字（Sprite、Label）
• 角色
• 以组件形式附加在场景节点上的游戏逻辑脚本

当玩家运行游戏时，就会载入游戏场景，游戏场景加载后就会自动运行所包含组件的游戏脚本，实现各种各样开发者设置的逻辑功能。所以除了资源以外，游戏场景是一切内容创作的基础。现在，让我们来新建一个场景。

1. 在 资源管理器 中点击选中 assets 文件夹，确保我们的场景会被创建在这个目录下
2. 点击 资源管理器 左上角的加号按钮，在弹出的菜单中选择 Scene。或者也可以直接右键点击 asset 目录，选择 新建 ->
   Scene。 create scene
3. 然后在 资源管理器 中就会生成一个名为 New Scene 的场景文件，并且名称会处于编辑状态，将它重命名为 game。
4. 双击 game，就会在 场景编辑器 中打开这个场景。

Canvas

打开场景后，层级管理器 中会显示当前场景中的所有节点和它们的层级关系。我们刚刚新建的场景中有一个名为 Canvas 的节点，Canvas
也可以称为画布节点或渲染根节点，点击选中 Canvas，可以在 属性检查器 中看到它的属性。

Design Resolution 属性规定了游戏的设计分辨率，
Fit Height 和 Fit Width 规定了在不同尺寸的屏幕上运行时，我们将如何缩放 Canvas 以适配不同的分辨率。

由于提供了多分辨率适配的功能，我们一般会将场景中的所有负责图像显示的节点都放在 Canvas 下面。这样当作为父节点的 Canvas 的 scale（缩放）属性改变时，所有作为其子节点的图像也会跟着一起缩放以适应不同屏幕的大小。

设置场景图像
添加背景

首先在 资源管理器 中按照 assets/textures/background 的路径找到我们的背景图像资源，点击并拖拽这个资源到 层级管理器 中的 Canvas 节点上，直到 Canvas 节点显示橙色高亮，表示这个资源将会被添加为 Canvas 的子节点。

 Canvas 下面添加了一个名为 background 的节点。当我们使用拖拽资源的方式添加节点时，节点会自动以贴图资源的文件名来命名。

对场景进行编辑修改时，
可以通过主菜单 文件 -> 保存场景 来及时保存我们的修改。
也可以使用快捷键 Ctrl + S（Windows）或 Cmd + S（Mac）来保存。

修改背景尺寸

在 场景编辑器 中，可以看到我们刚刚添加的背景图像，下面我们会通过修改 background 背景图像的尺寸，使它覆盖整个屏幕。

首先选中 background 节点，然后点击主窗口左上角工具栏第四个 矩形变换工具，使用这个工具我们可以方便的修改图像节点的尺寸。

添加地面

我们的主角需要一个可以在上面跳跃的地面，拖拽 资源管理器 中的 assets/textures/ground 资源到 层级管理器 的
Canvas 节点中。 这次在拖拽时我们还可以选择新添加的节点和 background 节点的顺序关系。拖拽资源的状态下移动鼠标指针到
background 节点的下方，直到在 Canvas 上显示橙色高亮框，并同时在 background
下方显示表示插入位置的绿色线条，然后松开鼠标，这样 ground 在节点层级中就被放在了 background 下方，同时也是 Canvas
下的一个子节点。

创建脚本

首先在 资源管理器 中右键点击 assets 文件夹，选择 新建 -> 文件夹，会生成一个名为 New Folder 的文件夹

右键点击 New Folder，选择 重命名 将其重命名为 scripts，之后我们所有的脚本都会存放在这个文件夹中

右键点击 scripts 文件夹，选择 新建 -> JavaScript，创建一个 JavaScript 脚本

将新建脚本的名字重命名为 Player，双击这个脚本，打开 代码编辑器

注意：Cocos Creator
中脚本的名称就是组件的名称，这个命名是大小写敏感的！如果组件名称的大小写不正确，将无法正确通过名称使用组件！

编写组件属性
在打开的 Player 脚本里已经有了预先设置好的一些代码块，

cc.Class({
   
    extends: cc.Component,

    properties: {
   
        // foo: {
   
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
   
        //     get () {
   
        //         return this._bar;
        //     },
        //     set (value) {
   
        //         this._bar = value;
        //     }
        // },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {
   },

    start () {
   

    },

    // update (dt) {
   }