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資源方面請到第二篇的后面下載）