笔记二 ：EgretH5通用MVC框架的入门操作：在scene中制造一个弹出菜单（UI部分）

最新推荐文章于 2022-05-04 02:19:49 发布
最新推荐文章于 2022-05-04 02:19:49 发布
阅读量746 收藏 2
点赞数
分类专栏： Egret 文章标签： Egret UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013617851/article/details/83012296
版权

前言：弹出菜单是游戏中UI非常常见的一个部件，下面将用笔记一中创建的scene进行构建，效果图如下：

源代码：笔记二Egret弹出菜单

1.在\resource\skins\DemoSkin.exml文件中添加：

	<e:Group width="610.61" height="192.42" x="0" y="178.79" anchorOffsetX="0" anchorOffsetY="0">
		<ns1:Menu id="menu" x="78" y="37.21000000000001" skinName="MenuSkin" scaleX="1" scaleY="1" visible="false"/>
		<e:Rect id="maskRect" width="530.61" height="191.22" x="77.72" y="0" anchorOffsetX="0" anchorOffsetY="0" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="menuBtn" label="切换按钮" skinName="MenuButtonSkin" x="14" y="58.210000000000036" scaleX="1" scaleY="1"/>
	</e:Group>

 其中包括：一个ToggleButton按钮，点击后会发生变化的那种按钮，自定义组件Menu，一个Rect矩形，是用来当作遮罩用的，可以使得Menu只在矩形范围内才显示。

DemoSkin.exml参考代码：

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="DemoSkin" width="650" height="1000" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" xmlns:ns1="*">
	<e:Image width="362" height="48" x="19" y="232" anchorOffsetX="0" anchorOffsetY="0" source="table_cloud_top" fillMode="repeat" visible="false"/>
	<e:Group width="450" height="108" anchorOffsetX="0" anchorOffsetY="0" horizontalCenter="0" bottom="0">
		<e:Rect width="448" height="67" x="1.3199999999999932" y="42.24000000000001" fillColor="0xebfff8" anchorOffsetX="0" anchorOffsetY="0" scaleX="1" scaleY="1"/>
		<e:Image width="449" height="41.99" x="449.20000000000005" y="50.24000000000001" anchorOffsetX="0" anchorOffsetY="0" source="table_cloud_top" fillMode="repeat" rotation="180.16" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="button" label="ToggleButton" x="45" y="32" anchorOffsetX="0" width="74" anchorOffsetY="0" height="75" skinName="MenuButtonSkin" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="button2" label="ToggleButton" x="140.76" y="32" anchorOffsetX="0" width="74" anchorOffsetY="0" height="75" skinName="MenuButtonSkin" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="button3" label="ToggleButton" x="237" y="32" anchorOffsetX="0" width="74" anchorOffsetY="0" height="75" skinName="MenuButtonSkin" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="button4" label="ToggleButton" x="335" y="32" anchorOffsetX="0" width="74" anchorOffsetY="0" height="75" skinName="MenuButtonSkin" scaleX="1" scaleY="1"/>
	</e:Group>
	<e:Group width="610.61" height="192.42" x="0" y="178.79" anchorOffsetX="0" anchorOffsetY="0">
		<ns1:Menu id="menu" x="78" y="37.21000000000001" skinName="MenuSkin" scaleX="1" scaleY="1" visible="false"/>
		<e:Rect id="maskRect" width="530.61" height="191.22" x="77.72" y="0" anchorOffsetX="0" anchorOffsetY="0" scaleX="1" scaleY="1"/>
		<e:ToggleButton id="menuBtn" label="切换按钮" skinName="MenuButtonSkin" x="14" y="58.210000000000036" scaleX="1" scaleY="1"/>
	</e:Group>
	<e:Group width="481.82" height="162.12" x="268.09" y="0" anchorOffsetX="0" anchorOffsetY="0">
		<e:Image width="354.76" height="130.62" x="17.36" y="18.78" anchorOffsetX="0" anchorOffsetY="0" source="menu_bg"/>
		<e:Rect width="83.63" height="85.16" x="38.73" y="41.51" anchorOffsetX="0" anchorOffsetY="0"  scaleX="1" scaleY="1" fillColor="0xffffff"/>
		<e:Rect width="167" height="19" x="157.41" y="71.56" anchorOffsetX="0" anchorOffsetY="0" fillColor="0xffffff"/>
		<e:Rect id="lowHpRect" width="167" height="19" x="157.41" y="71.56" anchorOffsetX="0" anchorOffsetY="0" fillColor="0xff0202"/>
		<e:Rect id="fastHpRect" width="167" height="19" x="157.41" y="71.56" anchorOffsetX="0" anchorOffsetY="0" fillColor="0xff7a7a"/>
		<e:Button id="addHP" label="+" x="175.24" y="105.67" anchorOffsetX="0" width="39" anchorOffsetY="0" height="38"/>
		<e:Button id="downHP" label="-" x="240.91" y="107.67" anchorOffsetX="0" width="33" anchorOffsetY="0" height="34"/>
	</e:Group>
</e:Skin>

 

2.在\src\example\module\demo\DemoView.ts中加入如下代码：

    //展开菜单
    menuBtn: eui.Button;
    maskRect: eui.Rect;
    menu: Menu;

在initUI()函数中加入如下：

this.menuBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.menubuttonClickHandler, this);
//为左边的弹出菜单设定遮罩
this.menu.mask = this.maskRect;

设定点击事件函数：

    /**左边中间的那个折叠菜单的按钮事件 */
    private menubuttonClickHandler(e: egret.TouchEvent): void {
        let tween;
        let self = this;
        if (self.menu.$visible) {
            self.menuBtn.touchEnabled = false;//播放动画时不可再次按按钮
            tween = egret.Tween.get(this.menu).to({ scaleX: 1.0, scaleY: 1.0, x: 100 }, 0).to({ scaleX: 1.0, scaleY: 1.0, x: -400 }, 460).call(function () { self.menu.$setVisible(false); self.menuBtn.touchEnabled = true; });
        } else {
            self.menu.$setVisible(true);
            self.menuBtn.touchEnabled = false;//播放动画时不可再次按按钮
            tween = egret.Tween.get(this.menu).to({ scaleX: 1.0, scaleY: 1.0, x: -400 }, 0).to({ scaleX: 1.0, scaleY: 1.0, x: 100 }, 460).call(function () { self.menuBtn.touchEnabled = true; });
        }
    }

主要包含一个tween动画的使用，配合遮罩，使得Menu从不见到可见。

使用tween时要注意self = this；的运用，不然容易出现错误，因为tween中的this和函数外的this是两个东西。

3.DemoView.ts参考代码：（参考代码中运行不了的代码是后面笔记的东西，可以暂时删掉）

/**
 * Created by egret on 15-1-6.
 */
class DemoView extends BaseEuiView {
    public constructor($controller: BaseController, $parent: eui.Group) {
        super($controller, $parent);
        this.skinName = "resource/skins/DemoSkin.exml";
    }

    button: eui.ToggleButton;
    //展开菜单
    menuBtn: eui.Button;
    maskRect: eui.Rect;
    menu: Menu;
    //hp,mp条
    lowHpRect: eui.Rect;
    fastHpRect: eui.Rect;
    addHP: eui.Button;
    downHP: eui.Button;
    //this.dispatchEvent(daterEvent);
    /**
     *对面板进行显示初始化，用于子类继承
     *
     */
    public initUI(): void {
        super.initUI();
        this.button.addEventListener(egret.TouchEvent.TOUCH_TAP, this.buttonClickHandler, this);
        this.menuBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.menubuttonClickHandler, this);
        this.addHP.addEventListener(egret.TouchEvent.TOUCH_TAP, this.addbuttonClickHandler, this);
        this.downHP.addEventListener(egret.TouchEvent.TOUCH_TAP, this.downbuttonClickHandler, this);
        GameDispatcher.getInstance().addEventListener(EventName.MAINBAR_CLOSE, this.restoreButton, this);//监听界面的关闭

        //为左边的弹出菜单设定遮罩
        this.menu.mask = this.maskRect;
        //人物血条的变化
        this.initHpBar();
    }

    private buttonClickHandler(e: egret.TouchEvent): void {
        App.ViewManager.playopen(1, ViewConst.Friend);
    }
    /**左边中间的那个折叠菜单的按钮事件 */
    private menubuttonClickHandler(e: egret.TouchEvent): void {
        let tween;
        let self = this;
        if (self.menu.$visible) {
            self.menuBtn.touchEnabled = false;//播放动画时不可再次按按钮
            tween = egret.Tween.get(this.menu).to({ scaleX: 1.0, scaleY: 1.0, x: 100 }, 0).to({ scaleX: 1.0, scaleY: 1.0, x: -400 }, 460).call(function () { self.menu.$setVisible(false); self.menuBtn.touchEnabled = true; });
        } else {
            self.menu.$setVisible(true);
            self.menuBtn.touchEnabled = false;//播放动画时不可再次按按钮
            tween = egret.Tween.get(this.menu).to({ scaleX: 1.0, scaleY: 1.0, x: -400 }, 0).to({ scaleX: 1.0, scaleY: 1.0, x: 100 }, 460).call(function () { self.menuBtn.touchEnabled = true; });
        }
    }
    //关闭窗口时候的按钮恢复状态
    private restoreButton(): void {
        console.log("restoreButton");
        this.button.selected = false;
    }

    //初始化initHpBar;
    private initHpBar():void{
        this.updateHpBar(1);
    }

    private HpBarNumNow:number = 0;//HP栏目前显示的数值
    private HpBarV:number = 0.2;//Hp扣除时衰减的速度
    /**更新血条状态 */
    private updateHpBar(NumUpdate: number): void { //需要更新成的数值
        let self = this;
        if (NumUpdate > self.HpBarNumNow) {//更新的数值大于目前的数值时的逻辑
            let tween;
            //第一个条同时进行缓慢增长,实心的那条
            egret.Tween.removeTweens(self.fastHpRect);//播放前先清除之前的动画
            let tempHpNum:number = self.fastHpRect.scaleX;//动画是从目前的长度开始进行
            tween = egret.Tween.get(self.fastHpRect).to({ scaleX: tempHpNum }, 0).to({ scaleX: NumUpdate }, 1200).call(function () { 
             });
            //第二个条同时进行缓慢增长
            egret.Tween.removeTweens(self.lowHpRect);//播放前先清除之前的动画
            tempHpNum = self.fastHpRect.scaleX;//动画是从目前的长度开始进行
            tween = egret.Tween.get(self.lowHpRect).to({ scaleX: tempHpNum }, 0).to({ scaleX: NumUpdate }, 1200).call(function () { 
             });
            self.HpBarNumNow = NumUpdate; //HP栏目前的数值进行更新
            console.log("这是之前的HpBarNumNow，NumUpdate",self.HpBarNumNow,NumUpdate);
        } else if(NumUpdate < self.HpBarNumNow){//更新的数值小于目前的数值时的逻辑
            let tween;
            let tempHpNum:number = self.lowHpRect.scaleX;//动画是从目前的长度开始进行
            egret.Tween.removeTweens(self.lowHpRect);播放动画前先清除之前的动画
            let t:number = (NumUpdate - tempHpNum)/this.HpBarV * 1000;//根据衰减时间计算衰减速度
            if(t < 0) t=-t;   //取绝对值
            tween = egret.Tween.get(self.lowHpRect).to({ scaleX: tempHpNum }, 0).to({ scaleX: NumUpdate }, t);
            egret.Tween.removeTweens(self.fastHpRect);瞬变前先清除之前的动画
            self.fastHpRect.scaleX = NumUpdate;   //血条减血时瞬变
            self.HpBarNumNow = NumUpdate;
        }
    }

    private tempnum = 1;
    private addbuttonClickHandler(): void {
        if ((this.tempnum + 0.2) <= 1.0) {
            this.tempnum += 0.2;
        }
        this.updateHpBar(this.tempnum);
    }

    private downbuttonClickHandler(): void {
        if ((this.tempnum - 0.2) >= 0) {
            this.tempnum -= 0.2;
        }
        this.updateHpBar(this.tempnum);
    }

}

 

姜姜的奇妙冒险[Unity游戏前端]
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android学习笔记（二十）:高级UI组件—-通用组件(滚动视图ScrollView)
01-03
可以添加一个滚动条，当用户上下拖动屏幕时，就会显示出一个滚动条，屏幕中的内容也会随着用户的拖动而上下滚动，这样就可以显示出原来显示不出来的那些内容。 添加滚动视图的方式 在activity_main.xml布局文件中...
egret.Tween跳跃缓动效果实现
centor的博客
04-17 7700
今日在工作中遇到一个需求： 1. 要求目标组件能从一定高度落地并实现弹跳效果 2. 落地后目标组件变矮变胖 3. 弹起时目标组件变瘦变高 Tween使用 在实现此需求之前，先学习一下白鹭引擎的Tween。官方文档如是说： class TweenTest extends egret.DisplayObjectContainer{ public constructor(){ ...
Egret简单弹框可拖拽
qq_37881606的博客
01-04 650
1、exml文件中通过id设定可拖拽的元素 <e:Group x="0" y="0" id="_dragGroup"></e:Group> 2、 对应TS文件中，获取对应exml中的元素 class AllotProduct extends eui.Component { private _dragGroup: eui.Group } 3、对应元素绑定方法 this._dragGroup.addEventListener(egret.TouchEvent.TO
创建保存Scene的主菜单项
kaixinjiaoluo的博客
05-04 285
官方Unity SaveCurrentModifiedScenesIfUserWantsTo 的使用实例，在主菜单上添加一个菜单项 Examples， 菜单项下面有一个菜单 Save current Scene(s) if require。此方法不能在Play mode 存储Scene。 // Add an editor menu item that enables Scenes to be saved or not, // This example adds the editor extension in
egret_布局相关
张庆超的博客
01-11 4228
布局相关: eui布局相关属性: includeInLayout: 指定此组件是否包含在父容器的布局中。 explicitWidth, explicitHeight: 显式设置的宽高值。 maxWidth, minWidth, maxHeight, minHeight: 最大和最小尺寸 width, height: 这两个属性储存组件经过各种布局计算后得到
设相对布局，则x,y更改无效 horizontalCenter="0" verticalCenter="120"
weixin_33953384的博客
12-21 96
设相对布局，则x,y更改无效  horizontalCenter="0" verticalCenter="120"   必须setSylte("horizontalCenter",null); setSylte("verticalCenter",null);
CSS中下拉菜单和表单以及弹出层的简单笔记
09-25
主要介绍了CSS中下拉菜单和表单以及弹出层的简单笔记,是一些CSS入门学习中的基础知识,需要的朋友可以参考下
HTML5 video标签（播放器）学习笔记（一）:使用入门
09-28
主要介绍了HTML5 video标签（播放器）学习笔记（一）:使用入门,本文讲解了使用标签、比如播放视频的路径、是否显示控制条、让视频自动播放或自动加载、让播放器规范一点等内容,需要的朋友可以参考下
技术分享：在RHEL5-中安装Oracle-11g的操作笔记
最新发布
09-05
技术分享：在RHEL5_中安装Oracle_11g的操作笔记
ASP.NETMVC3实战系列（一）：简单示例
02-26
因为我们项目每次加人的时候，对MVC都不是特别熟悉，有一些人认为这个非常简单，导致写出来的程序完全不是MVC的，所以我就想写个系列总结一下实战中的经验和一些学习的笔记。我们先不谈论MVC的好处，等我们写过一些...
egret 下拉框的制作
03-18
egret 下拉框的制作,亲测可用；纯代码，可以使用；egret 下拉框的制作
笔记九Egret-折叠List源代码（包括笔记八）.zip
10-24
我的博客笔记九和笔记八的源代码，由于时间比较紧，这次的博客更偏向笔记性质，而不是教程性质，必须打开源代码，接着再一步一步参考以下的笔记，不然很多细节上的东西漏掉了会出现大量错误。
egret工具：事件监听管理器
04-02
src.zip中包含：DelegateUtil.ts ，Dictionary.ts ，BC.ts，Main.ts DelegateUtil.ts 函数代理，方便传递参数和函数执行空间地址，包含原始参数和附加参数。 Dictionary.ts 支持存取少量的“对象”来当作存储数据的key. 重点见介绍下面的类，养成习惯模块销毁时用一句 BC.removeEvent(this)；可以有效防止出现遗漏移除的监听. 还有BC.addOnceEvent(...)；方法是也是懒人必不可少的方法。 BC类在actionscript中已经用了将近8年了，版本陆陆续续改过5次，这几天根据ts的特性修改了一个版本，值得推荐给大家。 BC.ts : 支持模糊移除事件，“BC.removeEvent(this, ”后面3个参数为模糊参数，可有可无，明确的参数必须相等才会移除. * 000 删除所有关于监听者的所有事件,通常在类销毁时使用一次 BC.removeEvent(this); * 001 指定相同回调函数的所有监听 BC.removeEvent(this,null,null,func); * 010 指定事件名的所有监听 BC.removeEvent(this,null,Event.COMPLETE,null); * 011 指定事件名，指定回调函数的所有监听 BC.removeEvent(this,null,Event.COMPLETE,func); * 100 删除指定通知者 和 监听者之间的所有监听 BC.removeEvent(this,dispatch,null,null); * 101 删除通知者 和 监听者之间使用同一回调函数的所有监听 BC.removeEvent(this,dispatch,null,func); * 110 删除通知者 和 监听者之间指定事件的所有监听 BC.removeEvent(this,dispatch,Event.COMPLETE,null); * 111 明确删除指定的事件监听 BC.removeEvent(this,dispatch,Event.COMPLETE,func); 代码： class Main extends egret.DisplayObjectContainer{ //申明一个广播对象“dispatchSprite” private dispatchSprite: egret.Sprite; public constructor() { super(); //字典使用对象作为key引用存储数据.对象作为key实际上需要进行遍历索引，所以在同一个字典中尽量不要添加过多的key会影响性能. var dic: Dictionary = new Dictionary(); var arr1: string[] = ["我是数组"]; var obj2: any = { name: "我是对象" }; var str3: string = "我是字符"; //添加到字典 dic.add(arr1, arr1); dic.add(obj2, obj2); dic.add(str3, str3); //打印字典内部的数据 dic.dump(); //申明一个广播对象“dispatchSprite” this.dispatchSprite = new egret.Sprite(); //添加一个自动会移除监听事件 BC.addOnceEvent(this, this.dispatchSprite, egret.Event.ENTER_FRAME, this.onEnterFrameOnce); //创建和监听一个Timer事件 var timer: egret.Timer = new egret.Timer(50); BC.addEvent(this, timer, egret.TimerEvent.TIMER, this.onEnterTimer); timer.start(); } /** * dispatchSprite的帧事件 */ public onE
Egret实现滚动排行榜
Cleve_baby的博客
10-24 4555
首先用EUI布局做好两个皮肤，主要就是列表的使用，主要代码： class Rank extends eui.Component {     private listGoods: eui.List;         constructor() {         super();         this.addChild(new PlayMusic());         thi
horizontalCenter textAlign
domzhao2的博客
07-20 144
horizontalCenter ：适合Canvas组件     textAlign : 适合 Text 组件
Egret Scroller + List 实现滑动列表
热门推荐
wuhaishengxxx的专栏
02-04 1万+
eui.Scroller 滚动控制容器,是一个常用的组件，详见官方链接： http://developer.egret.com/cn/github/egret-docs/extension/EUI/container/scroller/index.html Scroller 滑动列表是在UI中常用的一个组件之一，比如在背包物品列表、商品列表、成就列表、任务列表等，通常会有许多项，少的几个多者上百
Egret 按钮点击缩放效果
weixin_30443895的博客
03-14 702
非代码设计，exml直接操作 设计模式下选中对象，之后[源码]，会直接定位到该对象在exml源码中的位置 width.down = "100%" 表示当按钮按下的时候宽度为 100%，其他情况下宽度90%horizontalCenter="0" verticalCenter="0" 表示让图片以中心放大实现按钮的点击缩放效果 TypeScript入门教程 https://t...
最简单的界面弹窗提示
ko289830707的博客
12-21 1282
这两天接到一个需求，需要在界面上面做一个来电提示，找了很多博客都没有找到自己想要的效果，干脆就自己写了一个简单的模型。 模型很简单只实现以下几个功能： 1.当有电话进来的时候，界面右下角弹出小窗体。 2.当同时来电超过2个时，默认将最底下的提示去除。 &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; .mydiv ...
学习笔记（1):SAP ABAP 开发入门-第一个ABAP程序
06-02
好的，你的问题是关于SAP ABAP开发入门的第一个ABAP程序。那么，让我来回答你的问题。 在SAP ABAP开发中，第一个ABAP程序可以是一个简单的“Hello World”程序，用于验证您的开发环境是否正确设置。 以下是一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值