Html5 Egret游戏开发成语大挑战（八）一般性二级页面处理

在游戏中，我们一般会有各种各样的二级页面，比如游戏暂停界面或者游戏结束界面，这些界面组成了对玩家交互主要手段，在游戏开发中，对于这些界面的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 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/nowpaper/p/5220112.html

Html5 Egret游戏开发成语大挑战（八）一般性二级页面处理相关推荐

Html5 Egret游戏开发成语大挑战（一）开篇
最近接触了Egret白鹭引擎,感觉非常好用,提供了各种各样的开发工具让开发者和设计者更加便捷,并且基于typescript语言开发省去了很多学习成本,对于我们这种掉微软坑许久的童鞋来说,确实很有吸引力 ...
Html5 Egret游戏开发成语大挑战（五）界面切换和数据处理
Html5 Egret游戏开发成语大挑战(五)界面切换和数据处理经过前面的制作,使用Egret的Wing很快完成了开始界面和选关卡界面,下面通常来说就是游戏界面,但此时界面切换和关卡数据还没有准备 ...
Html5 Egret游戏开发成语大挑战（二）干净的eui项目和资源准备
Html5 Egret游戏开发成语大挑战(二)干净的eui项目和资源准备现在我们使用egret来起步开发一个名叫<成语大挑战>的小游戏,关于egret的开发环境就不在这里啰嗦了,直接去 ...
Html5 Egret游戏开发成语大挑战（四）选关界面
Html5 Egret游戏开发成语大挑战(四)选关界面通过前面的开始界面基本上了解了eui的使用方法,可以简单快速的制作一个UI界面,本篇使用第二界面选关界面展示更为难一点的代码控制,来展现关卡地 ...
Html5 Egret游戏开发成语大挑战（六）游戏界面构建和设计
Html5 Egret游戏开发成语大挑战(六)游戏界面构建和设计本篇将主要讲解游戏界面的构建和设计,会应用到egret.eui的自定义组件,可以很直观的构建一个游戏整体,这里我们仍然只需要使用Eg ...
Html5 Egret游戏开发成语大挑战（七）游戏逻辑和数据处理
Html5 Egret游戏开发成语大挑战(七)游戏逻辑和数据处理本篇在前面的基础上,将进行逻辑的编码开发让游戏能够正式的玩起来,这里没有注重太多的体验细节,而是直接实现游戏的规则逻辑,将分成两个部 ...
Html5 Egret游戏开发成语大挑战（九）设置界面和声音管理
Html5 Egret游戏开发成语大挑战(九)设置界面和声音管理在上一篇中,简单的使用界面元素快速实现了一个游戏中的二级页面,这种直接在游戏页面上做UI的做法并不太好,原因是,UI会让游戏的压力变 ...
Html5 Egret游戏开发成语大挑战（三）开始界面
Html5 Egret游戏开发成语大挑战(三)开始界面本篇需要在前面的素材准备完毕,才可以开始,使用egret的eui结合代码编辑,快速完成基本的界面搭建,这里写的可能比较细,目的是减少大家对于其 ...
微信小游戏腾讯课堂《白鹭教育 - 成语大挑战小游戏开发》学习笔记
腾讯课堂<白鹭教育 - 成语大挑战小游戏开发>:https://ke.qq.com/course/287266 学习笔记首先这个视频课程简单介绍了一个小游戏的制作,包括新建项目.适配模式 ...

Html5 Egret游戏开发成语大挑战（八）一般性二级页面处理

Html5 Egret游戏开发成语大挑战（八）一般性二级页面处理相关推荐

最新文章

热门文章

Html5 Egret游戏开发 成语大挑战（八）一般性二级页面处理

Html5 Egret游戏开发 成语大挑战（八）一般性二级页面处理相关推荐

最新文章

热门文章

Html5 Egret游戏开发成语大挑战（八）一般性二级页面处理

Html5 Egret游戏开发成语大挑战（八）一般性二级页面处理相关推荐