FairyGUI-PixiJS 项目教程

FairyGUI-PixiJS 项目教程

FairyGUI-PixiJSA flexible UI lib for PixiJS engine.项目地址:https://gitcode.com/gh_mirrors/fa/FairyGUI-PixiJS

1. 项目的目录结构及介绍

FairyGUI-PixiJS/
├── bin/
│   └── demo/
├── src/
│   ├── core/
│   ├── display/
│   ├── event/
│   ├── fairygui/
│   ├── utils/
│   └── index.ts
├── typings/
├── .gitignore
├── README.md
├── README_EN.md
├── gulpfile.js
├── package-lock.json
├── package.json
└── tsconfig.json

• bin/: 构建后的输出目录，包含示例项目。
• src/: 源代码目录，包含核心模块、显示模块、事件处理、FairyGUI 相关模块和工具模块。
• typings/: TypeScript 类型定义文件。
• .gitignore: Git 忽略文件配置。
• README.md 和 README_EN.md: 项目介绍文档。
• gulpfile.js: Gulp 构建脚本。
• package-lock.json 和 package.json: 项目依赖管理文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.ts。这个文件是整个项目的入口点，负责初始化 FairyGUI 和 PixiJS，并加载必要的资源。

// src/index.ts
import { Application } from 'pixi.js';
import { FairyGUI } from './fairygui/FairyGUI';

const app = new Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
});

document.body.appendChild(app.view);

FairyGUI.init();
// 加载资源并启动应用

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的元数据和依赖项。以下是一些关键字段：

{
  "name": "fairygui-pixijs",
  "version": "1.0.0",
  "description": "Examples for FairyGUI-PixiJS",
  "main": "src/index.ts",
  "scripts": {
    "build": "gulp build",
    "start": "npm run build && node server.js"
  },
  "dependencies": {
    "pixi.js": "^6.0.0",
    "fairygui": "^2.0.0"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "typescript": "^4.0.0"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 入口文件。
• scripts: 自定义脚本命令。
• dependencies: 生产环境依赖。
• devDependencies: 开发环境依赖。

tsconfig.json

tsconfig.json 文件用于配置 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./bin",
    "strict": true,
    "esModuleInterop": true
  },
  "include": [
    "src/**/*"
  ]
}

• compilerOptions: 编译选项。
  • target: 编译目标 ES 版本。
  • module: 模块系统。
  • outDir: 输出目录。
  • strict: 启用严格模式。
  • esModuleInterop: 启用 ES 模块互操作。
• include: 包含的文件或目录。

FairyGUI-PixiJSA flexible UI lib for PixiJS engine.项目地址:https://gitcode.com/gh_mirrors/fa/FairyGUI-PixiJS