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资源方面请到第二篇的后面下载）