白鹭引擎开发飞机大战详尽教程（一创建场景）

简介

   本教程是以飞机大战小游戏作为白鹭的入门，详细的按笔者的开发思路，一步步讲解游戏的开发步骤，内容基本涵盖了白鹭引擎提供的能力，包括界面可视化开发、事件派发、粒子播放（爆炸效果）、龙骨帧动画、tween缓动动画、碰撞检测、音频播放等，结合笔者的开发经验，讲述怎么使用继承来提高开发效率并且便于维护扩展。学完本教程，基本就能熟悉怎么使用白鹭开发游戏，切勿错过。也欢迎大家提出问题和建议，帮助我完善教程，谢谢！

教程目录

白鹭引擎开发飞机大战详尽教程（前言）

白鹭引擎开发飞机大战详尽教程（一创建场景）

源码

   链接：authorking.gitee.io/wx-games/pl…

   github地址：github.com/305371179/P…

请到github上下载源码，切换到分支dev_01_创建场景，本节的内容是简单介绍如何使用egretwing（4.1.6）的可视化界面编辑场景，使用的egret引擎版本是5.2.13

项目创建

分辨率是512X768,勾选game 游戏库

创建场景MenuScene和GameScene. MenuScene是开始菜单，如图

GameScene是游戏的主场景，暂时什么逻辑都没写。

场景都是EUI的组件

皮肤路径可以修改，我使用了默认的路径，勾选生成EXML文件和TS文件，这时会生成两个文件，一个是MenuScene.exml,路径是resource/eui_skins/MenuScene.exml,一个是MenuScene.ts,路径是src/scene/MenuScene.ts。

为了方便场景的切换，我在src下创建了一个Global.ts,作为场景切换的管理类。

提供了静态方法addScene,replaceScene,如果要做一些场景切换的过渡，可以自行扩展。

删除Main.ts多余的代码，在加载完资源后，直接添加MenuScene场景

到了这个步骤，我们开始创建MenuScene里面的显示控件。打开MenuScene.exml文件，如下图

我们在设计的标签页里面，通过拖拽的方式拉入我们需要的控件

然后设置相关的属性值，这个场景里面只有一张背景图片，一个开始游戏按钮和一个label标签 我们设置按钮的id属性，因为我们要在MenuScene.ts里面调用它。

在MenuScene.ts里面，是这样调用的

只要给类声明按钮的id，在childrenCreated方法里面就可以直接使用了。 给按钮添加点击事件，点击就会切换到游戏场景。

可以给控件做一些补间动画

我们可以创建动画组，然后根据组的名称来调用对应的动画，这里我们只有一个组 animation，我们就可以在MenuScene.exml里面播放这个组动画

至此，我们就学会了如何使用egretwing来做一些可视化的操作，是不是很简单！

接下来，我们就会开始学习如何创建游戏场景，敬请期待！