Laya2.x游戏引擎入门系列（二）：UI界面开发

前端开发和游戏开发

相信选择laya游戏引擎这类h5游戏引擎的开发者或多或少都有一些前端的开发经验，在开始开发小游戏以后会努力寻找和过往开发经历类似的地方。最后会发现两者之间的关系相似于网页开发和node.js服务端开发之间的关系，虽然都是使用了前端的开发语言（JS或TS），可是背后涉及的知识点却彻底不一样。

小游戏所有是经过canvas或者webgl画在页面中，而网页开发是经过浏览器去作的渲染。咱们在网页开发中不少想固然的事情，在h5游戏开发中就要费很大劲去实现，例如，网页中父容器的高度是能够经过内部内容撑起来的、自定义列表自己就是支持鼠标拖拽滚动事件、浏览器会记录咱们网页访问的记录。若是你想在小游戏中实现这些特性都须要本身去开发实现。

即便有不少东西都不一样，咱们仍是能够在开发小游戏的过程当中借鉴一些以前的开发h5网页的经验，例如，小游戏性能优化、小游戏内部的ui组件开发思路、网页开发中经常使用的设计模式。这些咱们均可以继续在小游戏中使用。甚至咱们平时在网页开发中使用的类库，在小游戏中也是可使用，例如lodash、md5这样的工具库。不过千万要注意不要引入相似vue、jquery这种存在操做dom树的类库，由于小游戏自己并无DOM、BOM环境。

在开始小游戏开发以前，我先来介绍一些和小游戏、laya引擎、oppo快游戏相关的关键术语。

小游戏：

• 舞台：显示游戏元素的平台，相似咱们的html标签是整个游戏的根结点，一切元素必须放到舞台中才能展现出来
• 显示对象：游戏舞台中任何元素都是一个显示对象；

Laya引擎：

• 场景：Laya2提倡场景管理开发，你在界面中新建的任何界面（场景scene，页面view、弹窗dialog）所有都是以scene结尾，同时引擎还会帮助你加载场景相关的资源，你只须要关心场景内部的逻辑开发便可；
• runtime: 这里的runtime指的是场景对应的逻辑类，你能够在构建完ui界面以后在单独编写逻辑；
• 游戏设计宽高：Laya.init时定义的宽高，也能够直接理解成设计稿的宽高；
• 游戏stage宽高：舞台的实际宽高，这里的宽高都是基于Laya提供的缩放模式，针对设计宽高做出缩放、裁剪以后获得宽高；
• 游戏画布宽高: 通常来讲大小等于游戏场景宽高；

OPPO快游戏

• rpk代码包：快游戏的代码包，包含了游戏运行须要的业务逻辑代码和静态资源，整个代码文件以.rpk结尾;
• 快游戏rumtime：这里的runtime指的是小游戏自己的运行环境；

UI开发

了解完基础知识以后咱们能够尝试开发本身的ui了，目前主流的3种游戏引擎Laya、Cocos、白鹭所有都支持IDE拖拽和编写代码这2种方式生成界面。

经过IDE生成UI

咱们先从简单的IDE拖拽开始，准备实现一个在输入框中改变文字，界面中实时更改文字的效果。

建立一个新的项目，在左侧菜单栏选择IDE的编辑模式

在test文件夹中右键新建场景

在场景中添加组件，并经过编辑器赋予一些的样式属性

在script目录中新建InputDemo.ts做为场景的runtime类

InputDemo.ts代码以下：

export default class InputDemo extends Laya.Scene {
    onEnable() {
        let $input: Laya.TextInput = this.getChildByName('input') as Laya.TextInput;
        let $container: Laya.Text = this.getChildByName('container') as Laya.Text;

        $input.on(Laya.Event.INPUT, this, (text, value) => {
            $container.text = $input.text;
        });
    }
}
复制代码

Done!

经过代码生成UI

经过代码生成UI仅仅是将生成界面的过程所有搬运到业务逻辑中完成，经过API新建UI组件，而后经过Laya.stage.addChild(ui)方法将ui直接插入到页面中，其余的绑定事件的逻辑不变，这里咱们就不赘述了，有兴趣的同窗能够本身尝试写一写。

场景发布模式

在编辑模式时新建场景，有一个选项“导出类型”，一开始开发的时候你们可能会有疑问，这究竟是个啥东西？

内嵌模式：生成场景类，同时会把ui数据内嵌到类里面

加载模式：生成场景类，会把全部UI数据放到ui.json里，使用时须要加载

分离模式：生成场景类，同时生成单个场景数据文件，每次加载一个场景文件

文件模式：只生成场景数据文件

这里摘录一下laya官方文档里面的解释，咱们经过代码简单的解释一下。

内嵌模式，会在ui/layaMaxUI.ts文件中生成场景类，同时，会把全部场景相关的代码都放到这个场景类中，这种模式打开页面速度最快。可是，小游戏基本都会限制包体大小，若是全部代码都存放在js/ts文件中，这样没办法经过异步加载场景数据的方式减小包体大小。

加载模式，会在ui/layaMaxUI.ts文件中生成场景类，可是，内部的场景数据所有都定义在bin/ui.json目录下面，同时，若是你想使用场景，则须要手动加载场景文件，而后，在建立场景。

主动加载场景

主动建立view

分离模式 & 文件模式，由于这两种模式比较相似咱们就不分开讲了，两者都会生成场景数据，可是，文件模式并不会生成场景类。这一点致使两者在使用场景中的UI组件时会有一点点小小的差别，分离模式能够直接经过this对象来找到组件，例如this.input，而文件模式只能经过this.getChildByName('xxx')来获取。我的感受分离模式更好用一些（由于全部UI组件所有能够很方便的获取到），不过官方推荐使用文件模式。

原本还想在讲一下多屏幕适配的，不过发现最近文档更新了作了详细介绍这里就不赘述了。

Laya2.x游戏引擎入门系列介绍

笔者19年5月开始深度参与了一个OPPO快游戏项目（相似微信小游戏），从零开始折腾到如今,终于算是入了H5游戏开发的门。目前关于Laya引擎开发快游戏的教程还很少，因而笔者决定把这几个月踩过的坑、解决的问题、总结的经验都记录下来，方便其余准备入坑的同窗提早规避。

Laya2.x游戏引擎入门系列预计会写如下文章，记录如何从零开始完成一个快游戏的开发和上架：

• Laya2.x游戏引擎入门系列（一）：Hello World
• Laya2.x游戏引擎入门系列（二）：UI界面开发
• Laya2.x游戏引擎入门系列（三）：经常使用的动画开发【写做中】
• Laya2.x游戏引擎入门系列（四）：像素级还原文字【构思中】
• Laya2.x游戏引擎入门系列（五）：数据通讯【构思中】
• Laya2.x游戏引擎入门系列（六）：2D物理世界【构思中】
• Laya2.x游戏引擎入门系列（七）：游戏调试【构思中】
• Laya2.x游戏引擎入门系列（八）：项目工程化【构思中】
• Laya2.x游戏引擎入门系列（九）：上架前最后一步准备【构思中】
• Laya2.x游戏引擎入门系列（十）：常见问题汇总【构思中】
• 未完待续。。。

同时，Laya2目前将引擎代码经过TypeScript进行了重构，你们若是在写代码中遇到什么疑问均可以直接在GitHub源码中找到答案，后续笔者也会写一些关于Laya2源码解析的文章，有兴趣的朋友能够关注。

第一次尝试写完整的教学文章，若有错误或不严谨的地方，请务必给予指正，十分感谢！