ActionScript
TypeScript
JavaScript

七、用LayaAirIDE制作游戏UI

发布时间:2016-05-14

 

游戏中,少不了UI功能,展示游戏数据信息,LayaAirIDE集成了可视化UI界面编辑工具,制作UI非常方便快捷。

实现目标:制作游戏暂停,关卡,积分,血量等UI界面。

编辑UI

点击编辑器右上角的“编辑模式”,进入可视化设计编辑模式。

图片1.png 

 

右键点击项目面板,弹出菜单,选择新建页面(快捷键Ctrl+N)。

图片1.png 

 

弹出新建面板,设置页面名称为“GameInfo”,点击确定。

图片1.png 

 

右键选择资源面板,弹出菜单,选择“打开所在目录”。

图片1.png 

 

复制按钮等三个资源到war文件夹。

图片1.png 

 

返回到编辑器,F5刷新编辑器,可以看到刚才添加的资源,并被自动识别为button组件(组件是根据资源名称前缀识别)。

图片1.png 

 

打开刚才新建的GameInfo页面,设置宽高属性为480,852。

图片1.png 

 

拖动刚添加的btn_pause到页面内,设置stateNum为1,label为空,设置var为pauseBtn,方便代码控制。

图片1.png 

 

拖动三个Label组件到编辑器内,分别设置字体,颜色,分别命令var为hpLabel,levelLabel,scoreLabel。

图片1.png 

 

在拖动一个Label到舞台,设置字体及颜色,设置var为infoLabel,方便控制,最终UI界面编辑器完毕。

图片1.png 

 

使用快捷键F12,发布刚才设计的界面,点击编辑器右上角,切换到“代码模式”,我们现在就把刚才制作的UI界面放到游戏内。

新建一个GameInfo.ts类,继承至刚才生成的GameInfoUI类。

图片1.png 

 

UI控制类,可以直接使用在编辑器设置的var,直接引用书写代码,并且有很好的代码提示,非常方便。

/**
 * 游戏UI类
 */
class GameInfo extends ui.GameInfoUI {
    constructor() {
        super();
        //注册按钮点击事件,点击后暂停游戏
        this.pauseBtn.on("click", this, this.onPauseBtnClick);
        //初始化UI显示
        this.reset();
    }
    
    public reset():void{
        this.infoLabel.text = "";
        this.hp(5);
        this.level(0);
        this.score(0);
    }
 
    onPauseBtnClick(e: Laya.Event): void {
        //阻止事件冒泡
        e.stopPropagation();
        //暂停游戏
        this.infoLabel.text = "游戏已暂停,任意地方恢复游戏";
        gameInstance.pause();
        Laya.stage.once("click", this, this.onStageClick)
    }
 
    onStageClick(e: Laya.Event): void {
        this.infoLabel.text = "";
        gameInstance.resume();
    }
 
    //显示血量
    public hp(value: number): void {
        this.hpLabel.text = "HP:" + value;
    }
 
    //显示关卡级别
    public level(value: number): void {
        this.levelLabel.text = "Level:" + value;
    }
 
    //显示积分
    public score(value: number): void {
        this.scoreLabel.text = "Score:" + value;
    }
}


为了方便控制游戏层次,我们把之前的所有Role均放到一个roleBox容器内,同时示例一个UI层到上面。为了更好的性能体验,我这里激活了WebGL渲染模式,WebGL渲染模式打开方法:Laya.init(480, 852, Laya.WebGL); 同时记得html里面引用好laya.webgl.js。

constructor() {
        //初始化引擎,设置游戏设计宽高,并且打开WebGL模式
        Laya.init(480, 852, Laya.WebGL);
        //加载图集资源
        Laya.loader.load("res/atlas/war.json", Laya.Handler.create(this, this.onLoaded), null, Laya.Loader.ATLAS);
 
        //显示FPS
        Laya.Stat.show(0, 50);
    }
 
    onLoaded(): void {
        //创建循环滚动的背景
        var bg: BackGround = new BackGround();
        //把背景添加到舞台上显示出来
        Laya.stage.addChild(bg);
 
        //示例角色容器
        this.roleBox = new Laya.Sprite();
        //添加到舞台上
        Laya.stage.addChild(this.roleBox);
 
        //创建游戏信息UI
        this.gameInfo = new GameInfo();
        //添加到舞台上
        Laya.stage.addChild(this.gameInfo);
 
        //创建一个主角(主战斗机)
        this.hero = new Role();
        //把主角添加到舞台上
        this.roleBox.addChild(this.hero);
 
        //开始
        this.restart();
    }


在积分变换后,调用UIapi更改显示。

//积分大于升级积分,则升级
if (this.score > this.levelUpScore) {
        //升级关卡
        this.level++;
        //在UI上显示等级信息
        this.gameInfo.level(this.level);
        //提高下一级的升级难道
        this.levelUpScore += this.level * 5;
}


编译后效果如下:

图片1.png 

 

死亡后:

图片1.png 

  

UI编辑器及使用都是可视化的,策划,美术和程序能够通过IDE轻松配合,是不是很方便呢。

 

本节课程源码下载