Nowpaper 十五英寸的世界

Rich Games Developer

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理
  138 Posts :: 0 Stories :: 866 Comments :: 0 Trackbacks

公告

本篇需要在前面的素材准备完毕,才可以开始,使用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资源方面请到第二篇的后面下载) 

posted on 2016-01-24 00:07 nowpaper 阅读(...) 评论(...) 编辑 收藏