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全部代码:

class Wait extends eui.Component{public constructor() {super();/**加载皮肤 */this.skinName = "resource/eui_skins/Wait.exml";}protected childrenCreated():void{super.childrenCreated();this.faceTween();        /**调用face缓动函数 */}public face:eui.Image;         /**对应Wait.exml文件中对应的id值对象(笑脸) */private faceTween():void        /**face对象的缓动动画 */
{
var tw = egret.Tween.get( this.face, { loop:true});tw.to({rotation:360},4000,egret.Ease.circIn).to({rotation:0},0).wait(500);}
}

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

var face:Wait = new Wait();       /**实例化皮肤对象 */
this.addChild(face);          /**将face显示对象添加到舞台 */

Egret引擎的EUI基础使用教程相关推荐

虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...
ue4怎么用虚幻商城场景_【更新】UE4虚幻引擎野外场景制作零基础入门教程
原标题:[更新]UE4虚幻引擎野外场景制作零基础入门教程作为一套零基础入门教程,可以帮助虚幻4引擎的新手了解到环境制作流程和相关软件的配合.本教学适合零基础入门用户,不适合有一定经验的UE使用者. ...
Egret引擎与Android端的交互----小白教程(含坑)
最近在接触一个新事物,Egret引擎.话说一个用于开发Html5游戏的引擎,其使用js的超集.ts的TypeScrice来开发. 而,最近的需求是,需要把利用这个Egret引擎开发的Html5游戏与公 ...
Egret引擎制作旅行青蛙
项目成品试玩链接:http://www.6edu.top/190503095046/index.html 因为本人已经开始考研了,时间不是特别充足,项目制作的比较简陋,还请见谅.(本人利用五一假期进行 ...
egret与php相连,JavaScript_Mac OS X 系统下安装和部署Egret引擎开发环境，概述 Egret基于TypeScript开 - phpStudy...
Mac OS X 系统下安装和部署Egret引擎开发环境概述 Egret基于TypeScript开发的,而TypeScript编译工具tsc是基于Node.js开发的.所以在安装过程中,我们先需要对 ...
白鹭安装node_Mac OS X 系统下安装和部署Egret引擎开发环境
概述 Egret基于TypeScript开发的,而TypeScript编译工具tsc是基于Node.js开发的.所以在安装过程中,我们先需要对于基础支持工具进行安装.需要安装的软件如下: Node.j ...
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course
ue5新手零基础学习教程 Unreal Engine 5 Beginner Tutorial - UE5 Starter Course! 教程大小解压后:4.96G 语言:英语+中英文字幕(机译)时长 ...
LayaAir引擎开发HTML5最简单教程(面向JS开发者)
LayaAir引擎开发HTML5最简单教程(面向JS开发者) 一.总结一句话总结:开发游戏还是得用游戏引擎来开发,其实很简单啦切记:开发游戏还是得用游戏引擎来开发,其实很简单,引擎很多东西都帮你做 ...
如何用GameMakerStudio开发基于物理引擎的平台游戏 | Lynda教程中文字幕
GameMakerStudio教程之如何用GML开发基于物理引擎的平台游戏 | Lynda教程中文字幕 Building a Physics-Based Platformer in GameMake ...
白鹭(egret)引擎安装及使用
提示:文章转载需要博主同意白鹭引擎安装前言一.白鹭引擎是什么? 二.白鹭官网 1.访问官网 2.下载三.安装四.打开五.主界面总结想一起讨论/学习微信小游戏开发的,GO语言开发的,请微 ...

Egret引擎的EUI基础使用教程

Egret引擎的EUI基础使用教程相关推荐

最新文章

热门文章