egret eui 动态添加多个按钮_菜鸟丨Egret制作打砖块小游戏项目实战

一、简介

本文我们将通过egret引擎实现一个简单的打砖块游戏，游戏的目标是通过屏幕下方的物体接住并反弹小球打碎上方的方块，从而获得积分；除此之外，希望能够通过项目的从无到有，简单的介绍一些egret引擎的功能以及使用方法。

本文涉及到的技术点：

1、Eui；

2、2d游戏的基础向量知识；

3、计时器的使用；

4、碰撞检测。

二、项目准备

1、项目中需要用到的资源素材：https://github.com/realraul214/BlockCrusher；

2、一个用于计算方向，坐标向方向移动的类，该类已存放在项目资源。

三、项目的创建

1、为了节省项目空间，我们只选择基础必备的几个库就行；

2、删除不需要的文件和代码，给项目瘦身，可以缩减的内容包括且不限于演示教程所自带的资源和部分代码；

3、将资源文件拖入resource目录下；

4、创建和制作EUI皮肤。

以上步骤在其他教程中均有介绍，那么本文不再重复说明。

四、游戏逻辑

1、程序主类：main.ts

(1)、该类是程序逻辑运行的起始点；

(2)、原生的egret项目中初始就带有此类，并且此类初始代码包含了演示项目的代码；

(3)、我们并不需要演示项目的代码，所以，我们第一步先将代码进行必要的删减；

(4)、首先检查createChildren方法，该方法是该类的起始点，相当于C#中的主函数；

(5)、我们可以看到原始的主类中，该类方法最后调用了rungame方法，那么我们接下来检查rungame方法；

(6)、在rungame方法中删除或注释掉演示项目用到的动画逻辑代码；

(7)、注释掉了startAnimation的调用，接下来把这个方法也删掉；

(8)、接下来看createGameScene函数，该函数下有一堆代码，这些代码全部都是演示项目用到的逻辑，我们并不需要，所以直接移除或者删除就好，并且把后面的一些不会被调用到的方法也删除掉就可以；

(9)、最后，把我们制作的EUI皮肤关联的程序类创建到createGameScene方法中，我们在主类中的操作就可以告一段落了。

2、全局变量配置类：Config.ts

调整完了主类，我们就需要开始真正的游戏逻辑的创建；所以，我们需要先把游戏逻辑内会用到的配置类和工具类创建好，首先，我们先创建一个全局变量配置类：Config。

3、工具类：Vector2.ts

本游戏最大的特点，就是弹球的反弹运动，所以必须要用到2D向量的计算和运用。

4、程序主代码类：MainScene.ts

(1)、MainScene即是主场景皮肤的管理类；

(2)、为了方便控制我们构建在EUI中的控件，所以我们把这个类作为主要的程序代码类，当然，你也可以把变量公开，在其他的文件中访问并控制这些变量，可以写成MVC模式，更加方便后期的程序维护和管理；

(3)、这里我们为了方便新手更好的看懂代码，就不采用较为复杂的MVC模式，而是直接在一个类中顺势写下来了；

(4)、第一步：我们先以变量的形式声明出EUI皮肤中设置的我们需要控制的控件ID，从而获取到这些控件的控制权限。以及一些我们会在后续的逻辑中用到的变量；

第二步：在场景创建后，现世开始界面，并将开始游戏的方法注册到按钮点击事件中；

第三步：开始游戏的逻辑；

第四步：弹球的行为逻辑；

第五步：创建砖块的逻辑；

第六步：得分的方法：

五、总结

1、通过以上的内容，我们实现了一个简单项目工程从准备到完成的全部过程；

2、并且对egret引擎的2d向量运用有了一个简单的了解和掌握；

3、本项目不想被无脑用于商用，所以省略了游戏结束的步骤，感兴趣的同学可以自行添加。

以上就是本次教程的全部内容了，不知道各位开发者小伙伴们看完之后有没有学会，如果有任何关于白鹭引擎的问题，欢迎在文章内评论，我们共同交流探讨。