HTML5游戏引擎（二）01egret引擎的安装与helloworld

HTML5游戏引擎（二）01-egret引擎的安装与hello world

第二章 安装与hello world

安装Launcher

Launcher是egret的一个开发平台，类似微信小程序的调试工具。

原： https://egret.com/downloads/engine.html

现：https://docs.egret.com/engine

安装引擎

Egret Engine

选择你自己需要的版本进行安装，比如： 微信小程序依赖的版本等等。

安装编辑器

Egret Wing3

hello world

打开 Egret Launcher，会显示登录界面，如下图。

登陆成功后会显示 Egret Launcher 主界面。

注册你自己的账号。

创建项目

1、点击菜单 项目 -> 创建项目 来创建项目。

也可以选择 导入项目 来导入已有项目。

2、在弹出的新建项目面板中，设置项目的基本配置。

• 项目名称
  当前项目的名称，如 HelloWorld。
• 项目路径
  该项目所存放的文件路径。
• 项目类型
  该项目的项目类型，如 Egret 游戏项目 ， Egret EUI 项目。
• 引擎版本
  当前项目所使用的 Egret 的版本。
• 选择扩展库
  项目中需要使用的系统库。更多关于扩展库选择的介绍可以参考：扩展库简介
• 舞台尺寸
  默认游戏舞台的高度与宽度，以像素为单位.
• 缩放模式
  屏幕的适配方式，这里选择showALL模式。更多关于缩放模式的介绍可以参考：屏幕适配
• 旋转方式
  屏幕的旋转模式，这里选择auto模式。更多关于旋转设置的介绍可以参考：屏幕适配

点击 创建 ，创建Hello World项目。

项目可以直接在Egret Launcher 中进行打开，管理。

项目结构

在Egret Wing左侧，可看到当前项目的目录结构：

各文件夹功能说明

• .wing：包括 Egret 项目的任务配置文件和启动配置文件。
• wingProperties.json：Egret Wing 项目配置文件。
• bin-debug：项目调试时，所产生的文件存放于此目录。
• libs：库文件，包括 Egret 核心库和其他扩展库存放于此目录。
• resource：项目资源文件存放于此目录。
• scripts：项目构建和发布时需要用到的脚本文件存放在此目录。
• src：项目代码文件存放于此目录。
• template：项目模板文件存放于此目录。
• egretProperties.json：项目的配置文件。具体的配置说明可以参考：EgretProperties说明
• index.html：入口文件。具体的配置说明可以参考：入口文件说明
• manifest.json：网页清单文件。
• tsconfig.json：typescript 编译配置文件。

运行项目

运行方式一

点击菜单“项目”->“构建”，编译项目，如下图。

构建完成之后点击菜单“项目”->“调试”，运行项目，如下图。

运行方式二

vscode编辑器打开项目后，打开命令行窗口，

输入

egret startserver 项目名称

浏览器会自动打开该html页面——http://localhost:3000/index.html

显示效果同上

运行方式三

vscode编辑器打开项目后，打开命令行窗口，

输入

egret run
或
egret run -a

显示效果同上