返回

eui：白鹭引擎H5小游戏开发入门总结

前端

一、白鹭引擎H5小游戏入门

1. 搭建开发环境

首先，需要搭建一个开发环境。

  • 安装Node.js和npm

  • 安装Egret引擎

  • 安装EUI库

2. 创建一个新项目

在开发环境搭建完成后，就可以创建一个新的项目了。

  • 打开Egret命令行工具

  • 输入命令“egret create my-project”

  • 按照提示完成项目创建

3. 编写代码

在项目创建完成后，就可以开始编写代码了。

  • 在项目根目录下创建一个名为“src”的文件夹

  • 在“src”文件夹下创建一个名为“main.ts”的文件

  • 在“main.ts”文件中编写以下代码：

class Main extends egret.DisplayObjectContainer {

    public constructor() {
        super();

        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    }

    private onAddToStage(event: egret.Event) {

        // 舞台宽度
        let stageW = this.stage.stageWidth;
        // 舞台高度
        let stageH = this.stage.stageHeight;

        // 创建一个按钮
        let button = new eui.Button();
        // 设置按钮的文本
        button.label = "Hello World";
        // 设置按钮的位置
        button.x = stageW / 2 - button.width / 2;
        button.y = stageH / 2 - button.height / 2;
        // 添加按钮到舞台
        this.addChild(button);

        // 为按钮添加点击事件监听器
        button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, this);
    }

    private onButtonClick(event: egret.TouchEvent) {

        // 输出文本“Hello World”
        console.log("Hello World");
    }
}

  • 在“src”文件夹下创建一个名为“index.html”的文件

  • 在“index.html”文件中编写以下代码：

<!DOCTYPE html>
<html>
<head>
    
    <meta charset="UTF-8">
    <script src="egret.min.js"></script>
    <script src="main.min.js"></script>
</head>
<body>
    <div id="egret-canvas"></div>
</body>
</html>

4. 运行项目

在代码编写完成后，就可以运行项目了。

  • 打开命令行工具

  • 输入命令“egret run -e -p 3000”

  • 打开浏览器，访问“http://localhost:3000”

此时，就可以看到在浏览器中运行的H5游戏了。

二、EUI库的使用

EUI库是一个基于Egret框架封装的一套可视化组件库，可以快速搭建和开发界面。EUI包含了大量常用的组件，如按钮、文本框、列表和面板等，可以使用EUI组件库中的组件来开发H5游戏。

1. 使用EUI组件

要使用EUI组件，首先需要在“main.ts”文件中添加以下代码：

import eui from "@egret/eui";

然后，就可以在代码中使用EUI组件了。例如，要创建一个按钮，可以使用以下代码：

let button = new eui.Button();

2. 设置EUI组件属性

EUI组件具有许多属性，可以设置这些属性来改变组件的外观和行为。例如，要设置按钮的文本，可以使用以下代码：

button.label = "Hello World";

3. 添加EUI组件到舞台

在设置好EUI组件的属性后，就可以将组件添加到舞台了。可以使用以下代码将按钮添加到舞台：

this.addChild(button);

4. 为EUI组件添加事件监听器

EUI组件支持多种事件，可以通过为组件添加事件监听器来响应这些事件。例如，要为按钮添加点击事件监听器，可以使用以下代码：

button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onButtonClick, this);

三、总结

使用EUI库可以快速搭建和开发H5游戏界面。EUI库提供了大量常用的组件，这些组件可以帮助开发者快速构建游戏界面。EUI组件具有许多属性，可以设置这些属性来改变组件的外观和行为。EUI组件支持多种事件，可以通过为组件添加事件监听器来响应这些事件。