Egret引擎的EUI基础使用教程

由于Egret引擎的EUI扩展库的官方文档写得十分复杂，让很多开发者短时间内难以入手并且走了不少坑，在这里我将教你Egret引擎的扩展库EUI的基本使用方法。废话不多说，一起开始吧!

 

一、我们要新建一个项目；

 

二、打开项目后，需要在资源管理器里，在resource文件夹下新建一个名为eui_image的文件夹（当然文件夹名可自定义）；

 

三、我准备了一张笑脸图片，把笑脸放进eui_image文件夹里面；

 

四、点击wing资源管理里面的default.res.json文件，确保preload预加载组里面有face_png笑脸资源；

 

五、右键新建一个EUI组件，其实我是按错了，但又要重新截图嫌麻烦只好将错就错，直接新建EXML文件就可以了，我建议你直接新建一个EXML文件，直接新建一个EXML文件，直接新建一个EXML文件，说三遍；

 

六、我将EXML文件命名为Wait，这个你喜欢命名为什么就什么。新建好Wait.exml文件后，打开，点击很多格子的画布，然后在右方属性面板上修改一下宽度和高度；

 

七、接着，我们点击左边的资源按钮，找到笑脸图片，鼠标点住拉到画布那里，笑脸就自动显示在画布上了；

 

八、我们修改一下笑脸的属性，也是在右边属性面板中找到X锚点和Y锚点，设置数值为宽度和高度的一半，然后Ctrl+s保存一下。有人问，为什么我要把锚点设置为笑脸的中间呢？因为我想接下来用代码来控制笑脸不停在旋转；

 

九、修改了锚点属性还不够，我的代码还识别不了我的笑脸，因为如果当我添加了十个笑脸进去却只想控制其中一个笑脸旋转时，我怎么知道哪个笑脸是需要控制的，所以我们需要给笑脸一个编号，这个编号是ID，同理，在属性面板上设置笑脸的ID值为face，接着保存一下；

 

十、好了，Wait.exml文件做好了，检查一下，没什么问题就下一步了，当然你可以把界面做得尤为复杂，我喜欢把EXML文件称为界面；

 

十一、现在我们的任务是：用代码来控制界面上的笑脸。首先新建一个ts文件，由于我之前第五条时说过，我按错建了EUI组件，所以Wait.ts这个文件自动生成在Wait.exml的同级目录，所以我就不需新建了。但是你要在src文件夹下新建一个ts文件写代码来加载我们的Wait界面，下图的代码由于我在EUI组件基础上写的，所以可能与你的不太一样，不过文章的最后我稍微解释一下代码的意思；

 

 

十二、加载界面的Wait类完成后，打开src下的Main.ts文件，把onButtonClick函数删掉，把startCreateScene函数里面的内容删掉，我们重写startCreateScene函数体；

 

 

十三、好了，代码写好了，我们按F5来运行一下看下效果，发现笑脸很开心地在旋转。

 

 

在文章结束之前，我来解释一下原理：

1、EXML文件本来是纯代码构成的，但是Egret团队将EXML的图形化编辑整合到wing里面，所以我们才能方便地、愉快地直接拖图像等控件到画布里改下属性实时预览效果；

2、单纯EXML文件虽然能做界面，但是是静态的，我们需要通过代码来自由地控制界面的变化，所以我们需要继承eui组件类自定义一个类来加载并操作界面，其中EXML文件的ID值就对应了自定义类里面的public同名变量；

3、自定义的eui继承类也是显示对象，所以需要在Main主逻辑类里面addChild函数将界面显示到游戏舞台上。

 

最后，我贴一下相关代码：

Wait.ts全部代码:

1. class Wait extends eui.Component{

2.  

3. public constructor() {

4. super();

5.  

6. /**加载皮肤 */

7. this.skinName = "resource/eui_skins/Wait.exml";

8. }

9.  

10. protected childrenCreated():void

11. {

12. super.childrenCreated();

13.  

14. this.faceTween(); /**调用face缓动函数 */

15. }

16.  

17. public face:eui.Image; /**对应Wait.exml文件中对应的id值对象(笑脸) */

18.  

19. private faceTween():void /**face对象的缓动动画 */

20. {

21. var tw = egret.Tween.get( this.face, { loop:true});

22. tw.to({rotation:360},4000,egret.Ease.circIn).to({rotation:0},0).wait(500);

23. }

24. }

 

Main.ts中的startCreateScene函数体代码：

1. var face:Wait = new Wait(); /**实例化皮肤对象 */

2.  

3. this.addChild(face); /**将face显示对象添加到舞台 */