FairyGUI-CocosCreator 项目教程

1. 项目目录结构及介绍

FairyGUI-CocosCreator 项目的目录结构如下：

FairyGUI-cocoscreator/
├── bin/
│   ├── fairygui.js
│   └── fairygui.d.ts
├── demo/
│   ├── Assets/
│   ├── ProjectSettings/
│   └── ...
├── source/
│   ├── gulpfile.js
│   ├── package.json
│   └── ...
├── UIProject/
│   ├── assets/
│   ├── settings/
│   └── ...
├── .gitignore
├── LICENSE
├── README.md
└── FairyGUI-cocoscreator.code-workspace

目录结构介绍

• bin/: 包含编译后的 FairyGUI 库文件，包括 fairygui.js 和 fairygui.d.ts。
• demo/: 包含示例工程，可以直接用 Cocos Creator 打开。
• source/: 包含 FairyGUI 的源码，可以使用 VSC 打开并执行 gulp build 任务进行编译。
• UIProject/: 包含 UI 工程文件，可以使用 FairyGUI 编辑器打开。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• README.md: 项目介绍和使用说明。
• FairyGUI-cocoscreator.code-workspace: VSCode 工作区配置文件。

2. 项目启动文件介绍

项目的启动文件主要位于 demo/ 目录下，具体包括：

• demo/Assets/: 包含示例工程的资源文件。
• demo/ProjectSettings/: 包含示例工程的配置文件。

启动文件介绍

• demo/Assets/Main.scene: 主场景文件，包含了游戏的主界面和初始化逻辑。
• demo/Assets/Scripts/Main.ts: 主脚本文件，负责初始化 FairyGUI 并加载 UI 资源。

3. 项目的配置文件介绍

项目的配置文件主要位于 demo/ProjectSettings/ 目录下，具体包括：

• demo/ProjectSettings/settings.json: 项目的基本配置文件，包含了项目的名称、版本、平台等信息。
• demo/ProjectSettings/build.json: 构建配置文件，定义了项目的构建选项和输出路径。

配置文件介绍

• settings.json:

  {
    "projectName": "FairyGUI-CocosCreator Demo",
    "version": "1.0.0",
    "platform": "web",
    "outputPath": "build"
  }
  

• build.json:

  {
    "platform": "web",
    "outputPath": "build",
    "options": {
      "minify": true,
      "sourceMaps": false
    }
  }
  

通过以上配置文件，可以对项目进行基本的设置和构建配置。