Because this project uses EUI, WHICH provides a Panel and Button control, I have a general look at the Panel control, but I don’t like it very much. I personally prefer the modal box style, probably because I do web development at heart…

Encapsulation of the EButton control

EUI control inside the Button provides three states for the Button, fill three resources into the Button can be used in different forms

Because we chose Egret engine, we want to release to wechat mini program, Facebook mini games and other platforms, so we can use as few pictures as possible. The effect of pressing the intended button is achieved using pure code to change the size of the button.

Create a new TS file called EButton

class EButton extends eui.Button implements eui.UIComponent { w: number; h: number; public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, () => { this.w = this.width; this.h = this.height; this.addEventListener(egret.TouchEvent.TOUCH_BEGIN, () => { this.width -= 5; this.height -= 5; }, this) this.addEventListener(egret.TouchEvent.TOUCH_END, () => { this.width = this.w; this.height = this.h; }, this) this.addEventListener(egret.TouchEvent.TOUCH_CANCEL, () => { this.width = this.w; this.height = this.h; }, this) this.addEventListener(egret.TouchEvent.TOUCH_RELEASE_OUTSIDE, () => { this.width = this.w; this.height = this.h; }, this) }, this) } protected partAdded(partName: string, instance: any): void { super.partAdded(partName, instance); } protected childrenCreated(): void { super.childrenCreated(); }}Copy the code

In the ADDED_TO_STAGE event, first record the default width and height of the current control. Then in the begin event of the touch event, reduce or enlarge the width and height of the current button. Then restore the width and height in the three events’ TOUCH_END, TOUCH_CANCEL, and TOUCH_RELEASE_OUTSIDE. This will be clicked, there is a press effect, and then when the hand up, the button is restored to its original state.

If this is done correctly, switch Egret Wing to the Designer view and you will see the custom control displayed in the custom control position. Then drag it out and use it

 

Dialog to encapsulate

It looks like a modal dialog box, but is actually a translucent effect of the background + a dialog box image implementation. Use a translucent background so that you can see the container behind it through the translucent image. Give a visual dialog box…

The translucent background does not have to be a whole one. You can cut a single pixel of the translucent Image and then tile the Image using Repeat mode of the Image control. In order to achieve the purpose of saving memory and network bandwidth.

<? The XML version = "1.0" encoding = "utf-8"? > <e:Skin class="DialogOk" width="1224" height="720" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" xmlns:ns1="*"> <e:Image id="img_dialog_outer" top="0" bottom="0" left="0" right="0" Source ="dialog_bg_png" fillMode="repeat" /> <e:Group width="666.66" height="446.97" anchorOffsetX="0" anchorOffsetY="0" <e:Image top="0" bottom=" -137.029999999997 "left="0" Right =" 0.34000000000003183" source="dialog_panel_png" anchorOffsetY="0" scale9Grid="28,82,518,270"/> <e:Scroller Width ="564" height="188" x="49.33" y="99" anchorOffsetX="0" anchorOffsetY="0"> <e:Group> <e:Label id="lb_dialog_text" Text =" It's a good day, it's a bloody day, it's a good day, "FontFamily ="Microsoft YaHei" anchorOffsetX="0" anchorOffsetY="0" multiline="true" wordWrap="true" lineSpacing="10" left="0" right="0" top="0" bottom="0"/> </e:Group> </e:Scroller> <ns1:EButton y="340" horizontalCenter="0"> <ns1:skinName> <e:Skin states="up,down,disabled"> <e:Image width="100%" height="100%" source="dialog_zhunbei_png"/> <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/> </e:Skin> </ns1:skinName> </ns1:EButton> <ns1:EButton id="btn_dialog_cancel" x="621.32" y="-10.66" anchorOffsetY="0" height="55" width="55"> <ns1:skinName> <e:Skin states="up,down,disabled"> <e:Image width="100%" height="100%" source="dialog_cancel_png"/> <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/> </e:Skin> </ns1:skinName> </ns1:EButton> </e:Group> </e:Skin>Copy the code

This is the general product name preview effect. Please refer to the official Egret document for detailed layout. (I have to say Egret documentation is really great. Basically, you can read the document directly. Do not understand the problem to the forum post. You can almost always get an official answer —- Please call me at Egret

Since this is a conversation, then we need to deal with the corresponding events.
Like clicking on the cross. Close the current dialog box. Touch the translucent mask layer next to it to also close the current dialog. Of course, you have to write your own code
class Dialog extends eui.Component implements eui.UIComponent { public constructor() { super(); this.skinName = "resource/GameSkin/Common/DialogOk.exml"; this.addEventListener(egret.Event.ADDED_TO_STAGE, () => { this.width = this.stage.stageWidth; this.height = this.stage.stageHeight; }, this) } protected partAdded(partName: string, instance: any): void { super.partAdded(partName, instance); } img_dialog_outer: eui.Image; btn_dialog_cancel: eui.Button; protected childrenCreated(): void { super.childrenCreated(); this.img_dialog_outer.addEventListener(egret.TouchEvent.TOUCH_TAP, () => { this.Close(); }, this) this.btn_dialog_cancel.addEventListener(egret.TouchEvent.TOUCH_TAP, () => { this.Close(); }, this) } public Show(view: egret.DisplayObjectContainer) { if (! view.contains(this)) { view.addChild(this); } } public Close() { if (this.parent ! = null) this.parent.removeChild(this); }}Copy the code

Finally using

let dialog = new Dialog();
                dialog.Show(this);
Copy the code

Look at some GIF effects.

Source code address:

Gitee.com/QingChengCo…

 

I almost forgot to ask for a tip. Add it