網絡遊戲開發-客戶端3（封裝按鈕按下效果和一個模態對話框）

因爲本項目使用的是EUI，EUI提供了一個Panel和Button控件，我大致看了一下Panel控件，感覺不太喜歡。我個人更喜歡模態框的那種風格，可能是因爲我本質工作是做web開發的吧。。。

EButton控件的封裝

EUI控件裏面的Button給按鈕提供了三種狀態，填充三種資源進去就可以使用按鈕的不同形態

因爲我們選擇Egret引擎，就是想以後發佈到微信小程序，Facebook小遊戲等平臺，所以，我們能少用圖片就少用圖片。打算按鈕的按下效果使用純代碼來改變按鈕大小來實現。

新建一個名爲EButton的ts文件

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();
    }

}

在ADDED_TO_STAGE事件裏面首先記錄下當前控件的默認寬高，然後分別再touch事件的begin裏面，縮小或者放大當前按鈕的寬高，我這裏選擇的是縮小。然後分別在TOUCH_END，TOUCH_CANCEL，TOUCH_RELEASE_OUTSIDE三個事件裏面把寬高還原。這樣就會點擊的時候，有一個按下的效果，然後擡起手來的時候，按鈕又恢復的原狀。

如果寫的正確的話，把Egret wing切換到設計師視圖，就會看到在自定義的控件位置，會顯示出自定義的控件。然後拖出來就可以使用了

 

Dialog的封裝

看起來來是一個模態對話框，但是實際上是一個半透明的效果的背景+一個對話框的圖片實現。使用半透明背景圖這樣就能通過半透明的圖片看到後面的容器。給人一種視覺上的對話框。。。

半透明背景不一定要用一整張，可以切一個像素的半透明圖片，然後通過Image控件的Repeat模式，平鋪這個圖片。以達到節約內存和網絡帶寬的目的。

<?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" horizontalCenter="0" verticalCenter="0">
        <e:Image top="0" bottom="-137.02999999999997" 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="今天是個好日子，今天血戰到天亮今天是個好日子，今天血戰到天亮" 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>

大致煜預覽效果就是這樣，具體的佈局方式，可以參考一下Egret的官方文檔。（不得不說Egret的文檔寫的真是的好。基本直接讀文檔就能看懂。不懂的問題去論壇發帖。基本都能得到官方的回答----此處廣告五毛，請Egret官方的的大佬們記得打給我）

既然是對話，那麼我們就要把相應的事件都處理了。

比如點擊上面的叉叉。關閉當前對話框。觸摸旁邊的半透明遮罩層，也關閉掉當前對話框。當然這些就得自己寫代碼實現了

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);
    }

}

最後使用

let dialog = new Dialog();
                dialog.Show(this);

看些GIF效果。。

 源碼地址:

https://gitee.com/QingChengCoder/EQipai

---

 

差點忘了求打賞，趕緊加上