Nowpaper 十五英寸的世界

Rich Games Developer

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

公告

在游戏中,我们一般会有各种各样的二级页面,比如游戏暂停界面或者游戏结束界面,这些界面组成了对玩家交互主要手段,在游戏开发中,对于这些界面的coding组织是非常有学问的,如果倒退到十年前,游戏开发的老前辈们一定孜孜不倦的上课如何设计好“易读”“可维护”“逻辑清晰”的界面代码,本人曾深陷其中变得对代码抠抠索索,结果事倍功半,原因是什么?老前辈们的一个项目或一段代码可能是长期维护长期使用的,而现在的高速code和超短的产品生命周期,使得完全不用规划那么好的交互代码,有时候可能过几个月自己的代码都不认得了,怎么可能给别人去看明白。前面讲那么多,目的是说,这篇实现方式暴力简单,只想快速完成不要搞那么复杂的组件设计,UI规划,现在讲究的是速度,可能你会觉得和第9篇有点冲突,其实不然,等下篇出了我再告诉你为啥。

现在打开春节前的项目吧,说实话,我也有点陌生了,这次只是现实一个gamewin的界面,直接在游戏场景中实现胜利界面,在Wing先打开SceneGameSkin.exml文件,此时“可能”会出现界面不显示,在输出栏里是这样的:

对于这个情况,不知道为什么,似乎是自定义控件造成的类解析错误,解决它很简单,点击上面的刷新按钮:

一下就好了,现在找到组件拖进去一个Group来当Win界面的父容器。

然后,在设计界面里设计好胜利的UI界面,在这里直接将最终做好的结果给大家看吧:

首先,有一个正解图片底板,还有两个Label来显示解释和出处,还有一个按钮下一题,奖励的UI是原版有的,由于我们不实现奖励,所以,有兴趣的可以自己实现,界面的底层,加了一个半透明的eui.Rect来解决遮挡,让UI看起来更加立体,下面是增加到scenegame.exml里面的描述:

<e:Group id="group_win" left="0" top="0" bottom="0" right="0" visible="false">
    <e:Rect left="0" top="0" bottom="0" right="0" fillAlpha="0.53"/>
    <e:Image source="Result_png" horizontalCenter="0" verticalCenter="260"/>
    <e:Button id="btn_next" x="432" y="941">
        <e:skinName>
            <e:Skin states="up,down,disabled">
                <e:Image width="100%" height="100%" source="ResultBtn_png" source.down="ResultBtn1_png"/>
                <e:Label id="labelDisplay" horizontalCenter="0" verticalCenter="0"/>
            </e:Skin>
        </e:skinName>
    </e:Button>
    <e:Label id="lb_from" text="标签" x="113" y="700" textColor="0x000000" multiline="true" width="501" height="65"/>
    <e:Label id="lb_explain" multiline="true" textColor="0x000000" text="标签" height="127" y="805" width="501" x="113"/>
</e:Group>

下面是实现界面的代码控制,打开SceneGame.ts文件,增加成员变量,和exml设计对应:

private group_win:eui.Group;//胜利界面的group控件
private btn_next:eui.Button;//下一个题目
private lb_explain:eui.Label;//解释
private lb_from:eui.Label;//来源

实现两个方法,一个是用来跳转到下一个题目的,一个是显示结果的:

private onclick_next(){
    //下一个题目
    this.group_win.visible = false;
    SceneLevels.Shared().OpenLevel(this.levelIndex + 1);
    this.InitLevel(this.levelIndex + 1);
     
}
private showWin(){
    this.group_win.visible = true;
    var leveldata = LevelDataManager.Shared().GetLevel(this.levelIndex);
    this.lb_from.text = leveldata.tip;
    this.lb_explain.text = leveldata.content;
}

在构造函数中增加下一个题目的事件注册:

this.btn_next.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onclick_next,this);

在onclick_word方法里替换之前的“console.log("win");”

this.showWin();

因为之前预留好了接口,只需要把逻辑实现即可,当游戏胜利的时候将group_win组件visible为true,并将Label赋值,当点击下一题时,隐藏group_win并将题目刷新,同时将关卡地图也刷新推进一个关卡。
最重显示效果如下:

好了,本篇就已经结束,现在一个几乎完整的游戏已经差不多,只需要活用visible就可以在一个UI下组织出所有的操作,在这里没有说到使用“状态”,状态可以更加方便的设计UI操作,但本游戏界面简单,就不做详细的讲解。
本篇项目源码:ChengyuTiaozhan5.zip(由于博客园的文件大小限制,resource资源方面请到第二篇的后面下载) 

posted on 2016-02-26 13:29 nowpaper 阅读(...) 评论(...) 编辑 收藏