Egret引擎的EUI基础使用教程

柔情只为你懂 2022-04-04 13:22 378阅读 0赞

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

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

![20161213141927930][]

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

![20161213141931508][]

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

![20161213141938243][]

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

![20161213141941962][]

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

![20161213141945760][]

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

![20161213141952229][]

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

![20161213141956729][]![20161213142000229][]

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

![20161213142003947][]

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

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

![20161213142013869][]

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

![20161213142023447][]

![20161213142027526][]

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

![20161213142030432][]

![20161213142033338][]

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

![20161213142036104][]

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

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显示对象添加到舞台 */`

[20161213141927930]: /images/20220404/331bf27fb61f43f5ae7dbbd0701d2b6e.png
[20161213141931508]: /images/20220404/d7f8d067c71a4305b74ff4ea09c96195.png
[20161213141938243]: /images/20220404/370c8844df3d4436b7fd2b4ccaea685d.png
[20161213141941962]: /images/20220404/16dc56f940c445c584a2f051ba1863e4.png
[20161213141945760]: /images/20220404/c2e1df5ef65a46f992a0045e3542ab47.png
[20161213141952229]: /images/20220404/887fc93a2aa947b499e34d4002227e85.png
[20161213141956729]: https://img-blog.csdn.net/20161213141956729
[20161213142000229]: /images/20220404/3895201a9f664e8c9257071671a3a85d.png
[20161213142003947]: /images/20220404/8d11bca3906b475e9462c314fa81a08e.png
[20161213142008713]: /images/20220404/38baeedaa68e428bae54f4737b31f638.png
[20161213142013869]: /images/20220404/b2039dcbeeab49a9a68f65a21e400525.png
[20161213142023447]: /images/20220404/78e50b0c974a489ab2f2e5af7a4020fb.png
[20161213142027526]: /images/20220404/8f1115336f394ad1aa8b9f50857f927c.png
[20161213142030432]: /images/20220404/5bba9b4a9844444ea0fe634bc52130af.png
[20161213142033338]: /images/20220404/e1abc93f283e4a95a6f33777200618c3.png
[20161213142036104]: /images/20220404/00d7dd8d787d4a75889b97993435bcc3.png