前言：游戏项目中经常会需要全局性质的通知事件，例如某个组件通知主界面UI进行变化，公司里的项目用一个比较常用的GameDispatcher类进行统一管理，这里我借鉴过来了，还是基于笔记一中建立的scene。
源代码：笔记四Egret全局通知事件
这里用GameDispatcher实现一个：关闭基本界面时，发送一个通知给主界面，让主界面上的按钮的状态发生改变，并打印出收到通知的log。
注意：原生的addEventlistener以及dispatcher都得绑定到同一个Object才能正常运作，这里的GameDispatcher也是基于这个。
（注意观察左下角的按钮，在界面关闭瞬间，由指向左边变成了指向右边）
1.建立一个\src\example\module\game\GameDispatcher.ts：
class GameDispatcher extends egret.EventDispatcher {
private static _instance: GameDispatcher;
public constructor() {
super();
}
public static getInstance(): GameDispatcher {
if (GameDispatcher._instance == null) {
GameDispatcher._instance = new GameDispatcher();
}
return GameDispatcher._instance;
}
public addEventListener(eventName: string, func: Function, thisObj: any, useCapture: boolean = false, priority: number = 1): void {
super.addEventListener(eventName, func, thisObj, useCapture, priority);
}
public removeEventListener(eventName: string, func: Function, thisObj: any, useCapture: boolean = false): void {
super.removeEventListener(eventName, func, thisObj, useCapture);
}
public hasEventListener(eventName: string): boolean {
return super.hasEventListener(eventName);
}
public once(eventName: string, func: Function, thisObj: any, useCapture: boolean = false): void {
super.once(eventName, func, thisObj, useCapture)
}
public dispatchEvent(event: egret.Event): boolean {
var t1: number = egret.getTimer();
var result: boolean = super.dispatchEvent(event);
var gap:number = egret.getTimer() - t1;
if (gap > 5) {
//console.log(StringUtil.substitute("send Evt gap = {1} name = {0}", event.type, gap));
}
return result;
}
public willTrigger(eventName: string): boolean {
return super.willTrigger(eventName);
}
}
2.打开\src\example\module\friend\FriendView.ts 为界面的关闭按钮绑定发送事件代码
FriendView.ts参考代码:
/**
* Created by egret on 15-1-7.
*/
class FriendView extends BasePanelView {
public constructor(controller: BaseController, parent: eui.Group) {
super(controller, parent);
this.icon = "table_tittle"; //好友的图片
}
protected closeBtnClickHandler(e: egret.TouchEvent): void {
App.ViewManager.playcloseView(2, this);
GameDispatcher.getInstance().dispatchEvent(new egret.Event(EventName.MAINBAR_CLOSE));
//App.ViewManager.open(ViewConst.Home);//rongqingmei
}
}注意：FriendView的基类BasePanelView中的closeBtnClickHandler函数得把限定符改为protected，不然FriendView没法重写这个方法，就不能添加关闭之后执行更多的功能了。
中心是重写的关闭按钮触发函数，以及这句发送事件的代码
GameDispatcher.getInstance().dispatchEvent(new egret.Event(EventName.MAINBAR_CLOSE));3.打开\src\example\module\demo\DemoView.ts 为主菜单栏添加监听这个事件的代码
组件的设置：
button: eui.ToggleButton;在 public initUI(): void 函数中添加上这一句，就是监听的代码：
GameDispatcher.getInstance().addEventListener(EventName.MAINBAR_CLOSE, this.restoreButton, this);//监听界面的关闭监听事件触发的函数：
//关闭窗口时候的按钮恢复状态
private restoreButton(): void {
console.log("restoreButton");
this.button.selected = false;
}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(2, 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);
}
}\resource\skins\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>
4.建立文件\src\example\event\EventName.ts 添加事件的列表
class EventName {
public constructor(){
}
//公共模块
public static MAINBAR_CLOSE: string = "1";//关闭主菜单的按钮按下显示
}以后的公共事件都需要在这个地方进行登记，按照以上的格式
5.测试运行
3899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
