1、CocosCreator

Cocos Creator

Cocos Creator一个完整的游戏开发解决方案，包含了轻量高效的跨平台游戏引擎，以及能让你更快速开发游戏所需要的各种图形界面工具。完全为引擎定制打造，包含从设计、开发、预览、调试到发布的整个工作流所需的全功能一体化编辑器。

Cocos Creator 目前支持发布游戏到 Web、iOS、Android、各类"小游戏"、PC 客户端等平台，真正实现一次开发，全平台运行。

官网：https://www.cocos.com/

工作流程

功能特性

• 脚本中可以轻松声明可以在编辑器中随时调整的数据属性，对参数的调整可以由设计人员独立完成。
• 支持智能画布适配和免编程元素对齐的 UI 系统，可以完美适配任意分辨率的设备屏幕。
• 动画系统，支持动画轨迹预览和复杂曲线编辑功能。
• 使用动态语言支持的脚本开发，包括 JavaScript 和 TypeScript，使得动态调试和移动设备远程调试变得异常轻松。
• 底层由 C++ 内核和 JS 两套内核组成，在享受脚本化开发的便捷时，保持原生级别的轻量和高性能。
• 脚本组件化和开放式的插件系统为开发者在不同深度上提供了定制工作流的方法，编辑器可以大尺度调整来适应不同团队和项目的需求。

HelloWorld

1、下载安装Cocos Dashboard，然后安装Cocos Creator

2、首页新建项目，选择Empty(3D)，填写项目名称以及项目保存路径，然后点击创建并打开

3、由于我们使用TypeScript编写脚本，所以在（偏好设置-程序管理器）中配置默认脚本编辑器，选择VsCode安装路径。还有浏览器以及微信开发者工具等。

4、按command+s保存当前场景，保存在assets下面

5、创建一个空节点，名字随便默认就行

5、在assets下面创建一个Typescript脚本，名字默认就行

6、将刚创建的脚本添加到场景节点中

7、双击脚本NewComponent，在VsCode中打开，在start中添加代码

import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('NewComponent')
export class NewComponent extends Component {
    start() {
        console.log("Hello World")
    }

    update(deltaTime: number) {
        
    }
}

8、上面选择浏览器运行，并点击运行

目录结构

• assets：资源目录
  • 用来放置游戏中所有的本地资源、脚本和第三方库文件。只有在 assets 目录下的内容才能显示在 资源管理器 中。
• build：构建目录（在构建某平台后会生成该目录）
  • 在使用编辑器主菜单中的（项目 - 构建发布）使用默认发布路径发布项目后，编辑器会在项目路径下创建 build 目录，并存放所有目标平台的构建工程。
• library：导入的资源目录
  • library 是将 assets 中的资源导入后生成的，在这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。
  • 当 library 丢失或损坏的时候，只要删除整个 library 文件夹再打开项目，就会重新生成资源库。
• local：日志文件目录
  • 包含该项目的本机上的配置信息，包括编辑器面板布局、窗口大小、位置等信息。开发者不需要关心这里的内容。
• profiles：编辑器配置
  • 包含编辑器的配置信息，包括各目标平台的构建配置信息、场景配置信息等。
• extensions：扩展插件文件夹
  • 用于放置此项目的自定义扩展插件。如果需要手动安装扩展插件，可以手动创建该文件夹。如需卸载扩展插件，在 extensions 中删除对应的文件夹即可。
• settings：项目设置
  • 保存特定项目相关的设置，如 项目设置 面板中相关的配置信息等。如果需要在不同开发者之间同步项目设置，请将 settings 目录加入到版本控制。
• temp：临时文件目录
  • 用于缓存一些 Cocos Creator 在本地的临时文件。这个文件夹可以在关闭 Cocos Creator 后手动删除，开发者不需要关心这里面的内容。
• package.json：项目配置
  • package.json 文件和 assets 文件夹一起，作为验证 Cocos Creator 项目合法性的标志，只有包括了这两个内容的文件夹才能作为 Cocos Creator 项目打开。开发者不需要关心里面的内容。

版本控制

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

组织assets目录

项目整个开发资源，包括本地资源、脚本和第三方库文件都在assets中，所以我们要合理的组织assets中的子目录

• Scenes：存放所有场景文件（.scene）
• Animations：存放动画资源
• Prefabs：存放预制件（.prefab）
• Scripts：存放所有脚本文件（.ts, .js）
• Res：存放所有静态资源文件，例如图片、模型等

VsCode自动编译

在VsCode更改代码后，我们需要去Cocos中刷新编译，页面才能刷新，非常不方便，解决方法如下

安装插件Run On Save，并且在项目根目录创建.vscode/settings.json，写入如下配置

{
    "emeraldwalk.runonsave": {

         "commands": [
            {
                "match": ".*",
                "cmd": "curl http://localhost:7456/asset-db/refresh"
            }
        ]
       
    }
}