Html5 Egret游戏开发 成语大挑战开始界面

Posted 2020-06-08

本篇需要在前面的素材准备完毕，才可以开始，使用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/SceneBeingSkin.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界面，并应用到代码中，所谓循序渐进，一步一步的往上走较为靠谱。

本篇项目源码：ChengyuTiaozhan1.zip（由于博客园的文件大小限制，resource资源方面请到第二篇的后面下载）