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

时间：2022-07-14 08:39:26

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

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

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

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

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

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

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

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

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

首先，有一个正解图片底板，还有两个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并将题目刷新，同时将关卡地图也刷新推进一个关卡。
最重显示效果如下：

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

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

相关文章