Egret引擎开发指南之创建项目

创建项目是使用Egret引擎进行游戏开发的第一步，本文将详细讲解如何在Egret引擎中创建项目。

步骤 1：安装Egret引擎

在开始创建项目之前，您需要先安装Egret引擎，您可以在Egret官网下载并安装最新版本的Egret引擎。

步骤 2：创建项目

打开Egret Wing IDE（Egret中最常用的IDE），点击“新建项目”按钮来创建一个新项目。

在弹出的“创建项目向导”中，填写以下信息：

• 项目名称：输入您的项目名称。
• 引擎版本：选择您要使用的Egret引擎版本。
• 使用TypeScript：勾选此选项，使您的项目使用TypeScript语言编写。
• 适配模式：选择您要适配的屏幕大小，比如“Fixed Width”就是适配固定宽度。

填写完成后，点击“创建”。

步骤 3：项目结构

创建项目后，打开项目文件夹，可以看到以下文件结构：

├── resource
│   ├── default.res.json
│   └── ui
│       ├── preload_ui.exml
│       └── progress_ui.exml
├── src
│   ├── CreateGameScene.ts
│   ├── Main.ts
│   └── utils
│       └── RandomUtils.ts
├── index.html
├── egretProperties.json
└── tsconfig.json

• resource文件夹负责存放游戏资源，包括图片、音频等。
• src文件夹负责存放项目代码，包括游戏逻辑和界面等。
• index.html是项目的入口文件。
• egretProperties.json是Egret引擎项目的配置文件。
• tsconfig.json是TypeScript编译器的配置文件。

示例 1：添加图片资源

在本示例中，我们将向项目中添加一张图片资源。

1. 打开resource文件夹
2. 将您的图片资源(.png或.jpg等格式)拖动到文件夹中。

示例 2：编写代码

在本示例中，我们将创建一个简单的场景，并在场景中添加上一张图片资源。

1. 打开CreateGameScene.ts文件，该文件负责创建游戏场景。
2. 在CreateGameScene类中添加以下代码：

private createBitmap(): void {
    const imageLoader: egret.ImageLoader = new egret.ImageLoader();
    imageLoader.load("resource/bg.jpg");
    imageLoader.addEventListener(egret.Event.COMPLETE, (event: egret.Event) => {
        const bitmap: egret.Bitmap = new egret.Bitmap(event.currentTarget.data);
        this.addChild(bitmap);
    }, this);
}

以上代码会创建一个Bitmap对象，并将它添加到游戏场景中。

步骤 4：运行项目

在完成以上步骤后，您可以通过以下步骤来运行您的项目：

1. 点击Egret Wing IDE中的“构建”按钮，将代码编译成JavaScript文件。
2. 点击Egret Wing IDE中的“发布”按钮，将编译后的代码发布到bin-release文件夹中。
3. 在浏览器中打开index.html文件，您就可以看到一个简单的游戏场景了。

到此，您已经成功在Egret引擎中创建了一个项目，并向项目中添加了一个图片资源，并创建了一个简单的游戏场景。