相信选择laya游戏引擎等h5游戏引擎的开发者或多或少都有前端开发经验。 在开始开发小游戏后，他们会尝试寻找与过去开发经验的相似之处。 最后你会发现两者的关系类似于Web开发和node.js服务器开发的关系。 虽然他们都使用前端开发语言（JS或TS），但背后涉及的知识点却完全不同。
所有的小游戏都是通过canvas或者webgl在页面上绘制的，而web开发则是通过浏览器渲染来完成的。 很多我们在Web开发中认为理所当然的事情，在H5游戏开发中必须付出很大的努力才能实现。 例如网页中父容器的高度可以由内部内容支持，自定义列表本身支持鼠标拖动。 滚动事件和浏览器都会记录我们的网页访问记录。 如果你想在小游戏中实现这些功能白鹭引擎游戏开发，你需要自己开发和实现。
即使有很多不一样的地方，我们在开发小游戏的过程中，还是可以借鉴一些以前开发h5网页的经验，比如小游戏的性能优化、小游戏内部的UI组件开发思路、常用的设计等。 Web 开发中的模式。 。 我们可以继续在小游戏中使用这些。 甚至我们平常在Web开发中使用的类库也可以在小游戏中使用，比如lodash、md5等工具库。 不过要注意不要引入像vue、jquery这样操作DOM树的类库，因为小游戏本身并没有DOM或者BOM环境。
在开始小游戏开发之前，我先介绍一下小游戏、Laya引擎、OPPO快游戏相关的一些关键术语。
游戏：
拉雅引擎：
OPPO快游戏
用户界面开发
了解了基础知识后，我们就可以尝试开发自己的UI了。 目前主流的三大游戏引擎Laya、Cocos、Egret都支持IDE拖拽和编码生成界面。
通过IDE生成UI
我们先从一个简单的IDE拖拽开始，准备实现改变输入框中的文本以及在界面中实时改变文本的效果。
创建一个新项目并在左侧菜单栏中选择IDE的编辑模式。
右键单击test文件夹创建一个新场景
将组件添加到场景中并通过编辑器分配一些样式属性
在脚本目录下新建InputDemo.ts作为场景的运行时类
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;
});
}
}
完毕！
从代码生成 UI
通过代码生成UI，只是将生成界面的全部过程转移到业务逻辑中。 通过API创建UI组件，然后通过Laya.stage.addChild(ui)方法直接将ui插入到页面中。 其他绑定事件逻辑不变，这里不再赘述。 有兴趣的同学可以尝试自己写一下。
场景发布模式
在编辑模式下创建新场景时，有一个选项“导出类型”。 刚开发的时候你可能会有疑问2d素材，这到底是什么？
嵌入模式：生成场景类并将UI数据嵌入到类中。
加载方式：生成场景类会将所有UI数据放入ui.json中，使用时需要加载。
分离模式：生成场景类的同时生成单个场景数据文件，一次加载一个场景文件
文件模式：仅生成场景数据文件
这里摘录了laya官方文档中的解释。 我们通过代码来简单解释一下。
嵌入模式下，会在 ui/layaMaxUI.ts 文件中生成场景类。 同时所有场景相关的代码都会放在这个场景类中。 此模式打开页面最快。 然而，小游戏基本上限制了包的大小。 如果所有代码都存放在js/ts文件中，就没有办法通过异步加载场景数据来减少包大小。
加载模式会在ui/layaMaxUI.ts文件中生成场景类。 但是，所有内部场景数据都在 bin/ui.json 目录下定义。 同时，如果要使用场景，则需要在创建场景时手动加载场景文件，然后。
主动加载场景
积极创造观点
分离模式&文件模式，因为这两种模式比较相似，我们就不单独讲了。 两者都会生成场景数据，但文件模式不会生成场景类。 这导致两者在场景中使用UI组件时略有不同。 分离模式可以直接通过this对象找到组件，比如this.input，而文件模式只能通过this.getChildByName('xxx')来获取组件。 个人感觉分离模式比较好用（因为所有UI组件都可以轻松获取），但是官方推荐使用文件模式。
本来想讲多屏适配的，但是发现最近文档更新了，介绍的很详细3D动画，这里就不赘述了。
Laya2.x游戏引擎入门系列介绍
笔者从2019年5月开始深度参与一个项目（类似微信小游戏），从无到有到现在终于进入了H5游戏开发。 目前用Laya引擎开发快速游戏的教程并不多，所以我决定记录一下这几个月我遇到的坑、解决的问题以及获得的经验，以便其他准备的同学进坑可以提前避开。
Laya2.x游戏引擎入门系列预计会写以下文章，记录如何从头开始开发并上线一款快游戏：
同时，Laya2目前通过TypeScript重构引擎代码。 如果您在编写代码时遇到任何问题白鹭引擎游戏开发，可以直接在 GitHub 源代码中找到答案。 以后我也会写一些关于Laya2源码分析的文章。 有兴趣的朋友可以关注。
这是我第一次尝试写一篇完整的教学文章。 如果有任何错误或者不准确的地方，请务必指正。 非常感谢！
关于我
