Html5 Egret遊戲開發 成語大挑戰（三）開始界面

本篇須要在前面的素材準備完畢，才能夠開始，使用egret的eui結合代碼編輯，快速完成基本的界面搭建，這裏寫的可能比較細，目的是減小你們對於其中一些操做疑問，我去掉了不少無用的步驟，以最精簡的流程來完成，若是比較熟練的話，這些操做只須要不到15分鐘就徹底能夠搞定。

特別說明：若是已經對EUI 有基礎瞭解的童鞋，能夠直接跳過這篇，由於實在是太簡單了。

建立一個exml的皮膚，這裏特別說一下，到如今仍然對於項目中的「包」和「目錄」有什麼具體區別仍然仍是不是很清晰，反正對我來講就是一個目錄，習慣性的會把同一種操做或系統放在一塊兒，因此在src的目錄下，建立了一個名爲Game的包，什麼名字不重要，在本項目中是Game而已，而後右鍵選擇新建「EXML皮膚文件」，關於EXML有興趣仔細研究的話，能夠參考：官方的EUI概述

簡單解釋來講，就是以xml描述配置界面元素的一種模式，這和微軟的WPF XAML相似，使用eui的好處就是所見即所得，配合代碼開發很是直觀高效，好比說這裏，就建立了一個名爲SceneBeginSkin的exml，用來作開始界面，大小設置爲和遊戲尺寸同樣，注意「主機組件」，使用的是Component，其餘的先不要試，一下子在按鈕時候會說明。

開始界面比較簡單，只有背景圖片和一個開始按鈕，在設計師模式下，直接能夠拖拽右側的資源庫裏資源扔進主窗口，就能夠看到以下效果：

 

背景圖片位置上本身的調整，而後點開左側的組件窗口，選擇按鈕拖進主界面，此時因爲沒有了默認組件皮膚，而顯示爲一個控件標記：

 

這時候看右側的屬性欄，找到「皮膚快捷模板」，把資源名稱放進去，資源名稱不是文件名，而是資源庫中的標記名，爲了更好的操做這個按鈕，將它的ID給起名爲「btn_begin」，注意「標籤」這個選項，並非指的是tag而是Label，默認會有「標籤」文本在上面，刪除便可。

將按鈕和背景圖片擺放整齊，能夠在預覽裏面看看效果：

操做比較簡單吧，若是是exml源碼則是這個樣子：

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="SceneBeginSkin" width="720" height="1136" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing">
    <e:Image source="GameBG1_jpg" x="0" y="0"/>
    <e:Button label="按鈕" x="57" y="826"/>
    <e:Button id="btn_begin" x="182" y="997">
        <e:skinName>
            <e:Skin states="up,down,disabled">
                <e:Image width="100%" height="100%" source="StartBtn_png" source.down="StartBtn1_png"/>
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
            </e:Skin>
        </e:skinName>
    </e:Button>
</e:Skin>

下面建立一個名字爲SceneBegin的ts類，一樣，名字不重要，起aaaaa也沒問題，主要是你可以清楚其中的關係。

刪除沒用的信息，輸入extends繼承自eui.Component，在類中聲明btn_begin，構造函數中，將skinName指定到剛纔建立的exml，這樣就能夠直接將這個類的皮膚呈現爲SceneBeingSkin的效果，同時能夠獲得ID命名的對象，爲按鈕添加一個點擊事件，如今已經完成了

class SceneBegin extends eui.Component {
    private btn_begin:eui.Button;
    public constructor() {
          super();
          this.skinName = "src/Game/SceneBeginSkin.exml";
          this.btn_begin.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onclick_begin,this);
    }
    private onclick_begin(){
        console.log("game begin!");
    }
}

那麼咱們如何看到效果呢，打開Main.ts，關於這個結構就很少囉嗦，它的流程最後都會到startCreateScene()方法，刪掉模板自帶的代碼，輸入：this.addChild(new SceneBegin());

最後運行一下看看效果吧，是否是獲得你想要的了呢？就這麼簡單。

基本上本篇演示瞭如何用eui建立簡單的UI界面，並應用到代碼中，所謂按部就班，一步一步的往上走較爲靠譜。

本篇項目源碼：ChengyuTiaozhan0.zip（因爲博客園的文件大小限制，resource資源方面請到第二篇的後面下載）