Html5 Egret遊戲開發成語大挑戰（六）遊戲界面構建和設計

時間 2019-11-06

標籤 html5 html egret 遊戲開發成語挑戰界面構建設計欄目 HTML5 简体版

原文原文鏈接

本篇將主要講解遊戲界面的構建和設計，會應用到egret.eui的自定義組件，能夠很直觀的構建一個遊戲總體，這裏咱們仍然只須要使用EgretWing就能夠達到目的，本篇多是篇幅最少的一個，可是涉及自定義組件和類繼承，但願可以讀者可以看明白，這對未來的遊戲開發的思惟幫助很是大。html

自定義控件佈局typescript

首先先建立一個名爲SceneGameSkin的exml皮膚，直接在這裏面拖拖拽拽拼出初步的界面：
編輯器

上面是題目區，下面是回答區，此時，找了了一下資源，發現字的方塊沒有放進資源文件，不要緊，咱們能夠直接使用eui.Rect這個基本空間創造一個字塊出來，exml描述以下：ide

<e:Rect ellipseWidth="20" fillColor="0xFFFFFF" strokeColor="0x0276D0" strokeWeight="4" ellipseHeight="20" right="0" left="0" bottom="0" top="0"/>

看看是否是和圖片上的很像，在編輯器裏的基本面板屬性中是沒有ellipseWidth、ellipseHeight等等這些屬性的，須要點屬性欄右上角的全部屬性標籤才能顯示，而後微調便可。佈局

但是，只有這個字塊背景是沒用的，還須要增長Label來顯示文字，但若是一個一個的匹配就很麻煩了，能不能使用skin來本身作一個自定組件本身管理並處理邏輯呢？這個很簡單，先構造一個skin而後配上一個自定義組件的代碼就能夠實現了。學習

新建一個基於eui.Component的皮膚，大小設置爲80x80：ui

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="WordSkin" width="80" height="80" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
    <e:Rect ellipseWidth="20" fillColor="0xFFFFFF" strokeColor="0x0276D0" strokeWeight="4" ellipseHeight="20" right="0" left="0" bottom="0" top="0"/>
    <e:Label id="lb_text" text="字" horizontalCenter="0" verticalCenter="0" textColor="0x000000" size="60"/>
</e:Skin>

新建一個typescript類，這裏的名字就叫Word，繼承自eui.Component，處理代碼以下：this

//普通的一個字，用來作問題的字塊使用
class Word extends eui.Component {
    protected lb_text:eui.Label;
    public constructor() {
          super();
          this.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onclick_tap,this);
    }
    protected onclick_tap(){
        console.log(this.lb_text.text);
    }
    //這裏沒有作成屬性的緣由是由於當應用到eui的時候，Skin還未指定，運行時候會出現報錯，若是指定了SkinName，那麼就會產生兩次eui的構建浪費內存
    public setWordText(value:string){
        this.lb_text.text = value;
    }
    public getWordText():string{
        return this.lb_text.text;
    }
}

保存編譯一下，而後在UI設計器的組件裏就能看到一個Word自定義組件，而後將它拖進SceneGameSkin裏，奇怪，怎麼什麼都沒有呢，由於尚未指定皮膚：spa

指定好皮膚後，就會顯示正確了，下面開始進行佈局操做，拖放擺好Group到SceneGameSkin的界面中，這裏就能夠用上Group的佈局特性，好比下面的回答字裏一共是20個漢字，可使用Tile的方式排列成一個有序的陣列：設計

一樣上面的問題欄中，可使用Group的橫向排列，調整你的界面直到滿意。

繼承的方式擴展自定義組件

那麼好了，自此基本上已經完成，通常來講，後面就能夠徹底靠代碼控制來實現字塊的顯示和處理了，但這還不夠，由於下面的字和上面的字雖然樣子同樣，但處理的邏輯不同，好比說，下面的字是一點就本身消失，同時將文本放置到上面的答案中，而上面的字點擊就會移除本身的文本顯示，同時將下面的對應字塊顯示出來，若是用比較笨的方法，就是在代碼中加一個字典對應起來，而後增長一大堆，看起來很繞圈的代碼，其實這裏的遊戲邏輯很簡單，一個答案字只會對應一個回答字，若是在組件上帶上回答字塊的對象，不就好處理了嗎？若是每一個Word控件都增長一個變量保存選定太顯得暴力，這裏可使用繼承增長一個SelectWord變量，而其餘的邏輯能夠經過重載方法來保持代碼的簡潔性，下面就是實現了一個繼承自Word的AnswerWord類，這個類一樣在保存編譯後，也會出如今自定義組件中，

//繼承自「問題字」，「答案字」是放在上面回答區域，
//因爲當答案字點擊的時候，答案字會消失並將對應的問題字還原顯示
class AnswerWord extends Word{
    public SelectWord:Word = null;
    public constructor() {
        super();
    }
    protected onclick_tap() {
        if(this.SelectWord != null){
            this.SelectWord.visible = true;
            this.SelectWord = null;
            this.setWordText("");
        }
        console.log("AnswerWord");
    }
    //當一個問題字被選擇添加到回答的時，設置不可見，並保存到本對象中之後使用
    public SetSelectWord(word:Word){
        word.visible = false;
        this.setWordText(word.getWordText());
        this.SelectWord = word;
    }
}

那麼咱們將上面的四個漢字都給替換成AnswerWord，點擊一下試試看看命令欄裏的輸出，不明白的能夠參看上面的註釋。

最終的SceneGameSkin.exml代碼以下：

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="SceneGameSkin" width="720" height="1136" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" xmlns:ns1="*">
    <e:Image source="GameBG3_jpg" left="0" top="0" bottom="0" right="0"/>
    <e:Image source="WordFrame_png" x="39" y="120"/>
    <e:Group id="group_words" width="538" height="417" x="108" y="637">
        <ns1:Word x="80" y="106" skinName="WordSkin"/>
        <ns1:Word skinName="WordSkin" y="116" x="90"/>
        <ns1:Word skinName="WordSkin" y="126" x="100"/>
        <ns1:Word skinName="WordSkin" y="136" x="110"/>
        <ns1:Word skinName="WordSkin" y="146" x="120"/>
        <ns1:Word skinName="WordSkin" y="156" x="130"/>
        <ns1:Word skinName="WordSkin" y="166" x="140"/>
        <ns1:Word skinName="WordSkin" y="176" x="150"/>
        <ns1:Word skinName="WordSkin" y="186" x="160"/>
        <ns1:Word skinName="WordSkin" y="196" x="170"/>
        <ns1:Word skinName="WordSkin" y="206" x="180"/>
        <ns1:Word skinName="WordSkin" y="216" x="190"/>
        <ns1:Word skinName="WordSkin" y="226" x="200"/>
        <ns1:Word skinName="WordSkin" y="236" x="210"/>
        <ns1:Word skinName="WordSkin" y="246" x="220"/>
        <ns1:Word skinName="WordSkin" y="256" x="230"/>
        <ns1:Word skinName="WordSkin" y="266" x="240"/>
        <ns1:Word skinName="WordSkin" y="276" x="250"/>
        <ns1:Word skinName="WordSkin" y="286" x="260"/>
        <ns1:Word skinName="WordSkin" y="296" x="270"/>
        <e:layout>
            <e:TileLayout horizontalGap="30" verticalGap="30"/>
        </e:layout>
    </e:Group>
    <e:Button id="btn_back" x="11" y="8">
        <e:skinName>
            <e:Skin states="up,down,disabled">
                <e:Image width="100%" height="100%" source="BackBtn_png" source.down="BackBtn1_png"/>
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
            </e:Skin>
        </e:skinName>
    </e:Button>
    <e:Image id="img_question" width="390" height="260" y="179" horizontalCenter="0"/>
    <e:Group id="group_answer" width="373" height="95" x="177" y="464">
        <ns1:AnswerWord skinName="WordSkin" y="478" x="185"/>
        <ns1:AnswerWord skinName="WordSkin" y="478" x="284"/>
        <ns1:AnswerWord skinName="WordSkin" y="478" x="378"/>
        <ns1:AnswerWord skinName="WordSkin" y="478" x="475"/>
        <e:layout>
            <e:HorizontalLayout gap="15"/>
        </e:layout>
    </e:Group>
</e:Skin>