Egret引擎开发教程：一步步学习构建游戏

介绍

Egret引擎是一款专注于HTML5游戏开发的开源引擎。它使用TypeScript语言编写，可以让开发人员快速简单地构建出高质量的游戏。本文将介绍如何使用Egret引擎进行游戏开发的入门教程。

准备工作

在开始学习Egret引擎前，先确保自己已经安装了Node.js和Egret开发工具。另外，在开发时候，我们需要一个强大的编辑器，推荐使用Visual Studio Code或者Sublime Text作为开发工具。接下来我们需要构建一个简单的游戏来学习。

创建一个简单的游戏

首先在命令行中使用egret新建一个项目： ``` egret create myGame ``` 这个命令会在当前目录下创建一个名为myGame的新项目。下一步进入该目录并使用VSCode打开项目，可以看到我们的项目结构如下： ``` myGame ├── resource ├── src │ ├── Main.ts │ └── LoadingUI.ts ├── index.html ├── tsconfig.json ├── egretProperties.json └── typings ``` 在myGame\\src下打开Main.ts文件，可以看到以下代码： ```typescript class Main extends egret.DisplayObjectContainer { public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private onAddToStage(event: egret.Event) { egret.Ticker.addEventListener(egret.Event.ENTER_FRAME, this.onTick, this); } private onTick(dt: number) { } } ``` 上面的代码 大家不需要关心现在是什么意思，在后面的讲解中我们会详细介绍各个功能的实现。在这个示例代码的基础上，我们需要添加对于Egret资源的引用，在onAddToStage方法体内加一个js下的代码： ```javascript var sky1 = this.createBitmapByName(\"bg_jpg\"); this.addChild(sky1); var stageW = this.stage.stageWidth; var stageH = this.stage.stageHeight; sky1.width = stageW; sky1.height = stageH; var txtr = RES.getRes(\"egret_icon_png\"); var logo = new egret.Bitmap(txtr); this.addChild(logo); logo.x = (stageW - logo.width) / 2; logo.y = (stageH - logo.height) / 2 - 60; ``` 创建Bitmap对象是Egret的开发特色之一。其中“bg_jpg”和“egret_icon_png”是需要添加到myGame\\resource\\assets目录下的两张图片。在onTick内添加一行代码，以控制logo移动，代码如下： ```typescript logo.x += 1; ``` 最后我们需要为这个项目添加引用，打开index.html文件，在body标签中添加以下代码： ```html ``` 现在，我们就可以启动这个游戏了。切换到命令行，使用以下命令打开这个项目： ``` egret run ``` 在游戏开启后，你可以看到屏幕中央出现了一只公司的logo。根据上面的代码，这个logo会慢慢的向右移动。

总结

本文介绍了Egret引擎的入门教程，并以一个简单的游戏作为例子。在这个过程中，我们学习了如何新建Egret项目、如何使用Egret资源和如何添加引用。在这个基础上，你可以深入学习Egret的各种开发技巧，如时间刻度、音频管理等。祝你在Egret引擎开发中玩得开心！