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：这里的ru