阅读 770

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源码解析的文章,有兴趣的朋友可以关注。

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

关注下面的标签,发现更多相似文章
评论