Laya2.0 内嵌模式 加载模式 分离模式 文件模式 使用教程

一、差异

内嵌模式:内嵌模式会把编辑器的UI内容生成一个场景类代码文件,代码脚本里包含IDE创建的UI场景的信息,在小游戏和轻游戏还没有问世的时候,不用考虑js 的大小,正常开发h5最常用的选择,而且不涉及异步加载打开页面速度也最快。

加载模式: 加载模式也会生成场景类,其他的UI数据信息会放到一个ui.json内,使用时需要加载这个json,同样在没有小游戏的时代不常用,场景信息可以不在js中,可以节省js包体大小,给小游戏4m包节省更多空间。使用时可以作为资源加载。

分离模式: 分离模式是在加载模式基础上,同样也会生成场景类,但他会把每个场景生成单独的场景数据文件,每次单独加载场景文件,区别于加载模式一次把所有场景都加载。在2.0以后,开发小游戏或轻游戏,为了减少主包大小和提升加载速度都是常用的模式。

文件模式(Laya2.0默认为文件模式):文件模式是2.0特有的,为了开发小游戏而创建的,他不生成场景类,也就是能进一步减少js包的大小,使用的时候用Scene.load方式加载,区别于前三种最大的的不同就是,文件模式不能直接调用场景内的变量,需要getchild获取之后进行操作。前三种的场景类里声明了变量,有代码提示直接可以操作内部的变量。

需要注意的是,在选择js 语言开发时, 分离模式和文件模式是没有区别的,都没有场景类。

内嵌模式import View=laya.ui.View;import Dialog=laya.ui.Dialog;module ui {
    export class APageUI extends View {
        public static  uiView:any ={"type":"View","props":{"width":150,"height":31},"child":[{"type":"Image","props":{"y":2,"x":22,"skin":"comp/bg.png"}}]};
        constructor(){ super()}
        createChildren():void {
            super.createChildren();
            this.createView(ui.APageUI.uiView);
        }
    }}加载模式和分离模式import View=laya.ui.View;import Dialog=laya.ui.Dialog;module ui {
    export class APageUI extends View {
        constructor(){ super()}
        createChildren():void {
            super.createChildren();
            this.loadUI("APage");
        }
    }}

对比一下,在内嵌模式下,uiView那些JSON都在layaUI里,可以直接调用createView传进去。而在分离模式和加载模式下,则被分离出去了。
加载模式:


加载模式统一放到了ui.json文件里


加载模式生成的ui.json结构

分离模式:


分离模式建议放到ui文件夹下,直接放bin目录下会很乱
UI文件夹下的json文件

看一下源码就知道使用方式了

//在View.as中/**存储UI配置数据(用于加载模式)。*/public static var uiMap:Object = {};/**
 * @private
 * 装载UI视图。用于加载模式。
 * @param path UI资源地址。
 */protected function loadUI(path:String):void {
    var uiView:Object = uiMap[path];
    uiView && createView(uiView);}加载模式和分离模式import View=laya.ui.View;import Dialog=laya.ui.Dialog;module ui {
    export class APageUI extends View {
        constructor(){ super()}
        createChildren():void {
            super.createChildren();
            this.loadUI("APage");
        }
    }}

这里也能看到加载模式和分离模式的区别所在:如果uiMap里有JSON数据,则在createChildren时就调用了createView,达到了与内嵌模式一致的效果。而uiMap里如果没有JSON数据,则需要自己调用了。
看一下加载模式的写法:

// 程序入口Laya.init(600, 400);Laya.loader.load([{ url: "res/atlas/comp.json", type: Loader.ATLAS },{ url: "res/ui.json", type: Loader.JSON }], Handler.create(this, this.onLoaded));function onLoaded(): void {
    View.uiMap = Laya.loader.getRes("test/ui.json");
    //实例UI界面
    var testUI: TestUI = new TestUI();
    Laya.stage.addChild(testUI);}

注意View.uiMap = Laya.loader.getRes("test/ui.json");
分离模式则不需要处理View.uiMap,而是在自己的单独页面里用createView调用自己的json文件

class TestUI extends ui.test.TestPageUI {

    createChildren():void {
        this.createView(Laya.loader.getRes("test/TestPage.json"));
        super.createChildren();
    }

如果希望这个调用json的操作,能在IDE中自动处理,可以参考编辑器选择分离模式生成TS代码时能自动在createChildren里加上createView调用代码么?

自行修改LayaAirIDE生成ui代码所调用的脚本,文件名是LayaAirCmdTool.max.js.打开这个js之后读一下行号为21205:CodeManager.createByDir这个函数。。这个函数是导出ui代码的,重点看一下21281这一行
code=CodeManager.objToUI(obj,tFile);好的,跳转到这个objToUI的函数定义的地方:21425行,是这个函数的开始位置,函数不长,我相信你有一百种方法,在字符串中塞入自己想要的内容呢。

二、Laya1.0项目使用效果

以实际项目为例,在index.html中有<script src="js/ui/layaUI.max.all.js"></script>,如果是内嵌模式,这个js文件有506K。如果使用分离模式,这个JS文件就变成78K,而分离出来的UI文件夹则是364K。如果是加载模式,ui.json是368K大小,和分离模式差不太多。很显然,layaUI.max.all.js这个文件变小,会让index.html加载速度变快很多。

index.html需要加载的目前有几大部分:

NotoSans-Bold.woff 25k

core.min.js 276k
webgl.min.js 157k
filter.min.js 5k
html.min.js 18k
ui.min.js 107k
Laya引擎库合计563k

第三方库:
externalLib.min.js 414k
gameLib.min.js 98k
player.min.js 801k

js/ui/layaUI.max.all.js 506k 可以使用分离模式变成78k(分离出来的json是368k)

纯js的加载页面,太复杂的效果不好控制,并且引入laya引擎后还要移除。好处是能节省laya引擎库的563k。目前考虑用laya做一个首次加载页面,先把自己用的资源加载显示,再把第三方库、项目其它资源加载进来。这样在发布时,用IDE自带的压缩合并JS选项就不适用了,需要把首次加载页面用到的JS使用分离模式单独打包成一个JS文件,把剩余的JS打包成另外的JS文件。这个可以用GULP脚本来做,通过读取index.html标签中引用的JS来进行分离。

三、Laya2.0项目

1.加载模式
内嵌模式加载太慢不说了,这里以上面Laya1.0的加载模式为思路做了测试,发现挺麻烦的。

import {ui} from "./ui/layaMaxUI";.......onConfigLoaded(): void {
    //加载IDE指定的场景
    Laya.loader.load('ui.json',Laya.Handler.create(this, this.gameStart));}gameStart():void{
    Laya.View.uiMap = Laya.Loader.getRes('ui.json');
    var sc = new ui.Hello2UI();
    Laya.stage.addChild(sc);

受laya2.0影响,文件开头要先import那个UI文件,但是运行发现报错,找不到Hello.json。奇怪啊,明明用的加载模式,怎么还像分离模式一样去找那个单独的json呢。

原来layaMaxUI.ts是这样写的:

export class Hello2UI extends Scene {
    constructor(){ super()}
    createChildren():void {
        super.createChildren();
        this.loadScene("Hello2");
    }}

对照一下Scene的源码:

/**
 * @private 兼容老项目
 * 装载场景视图。用于加载模式。
 * @param path 场景地址。
 */public function loadScene(path:String):void {
    var url:String = path.indexOf(".") > -1 ? path : path + ".scene";
    var view:Object = Laya.loader.getRes(url);
    if (view) {
        createView(view);
    } else {
        Laya.loader.load(url, Handler.create(this, createView), null, Loader.JSON);
    }}

这里注释里写着兼容老项目的加载模式,可是createView传入的那个view取值方式不对,应该是Laya.View.uiMap[url],这应该是引擎BUG,估计以后会修复。暂时可以自己创建一个scene:

export default class Hello2Scene extends Laya.Scene {
    constructor() {
        super();
        this.createView(Laya.View.uiMap['Hello2']);
    }}

2.分离模式
分离模式会生成单独的json,所以像上面loadScene找不到单独json文件的引擎BUG就不会出现了。但是写法仍然是差不多的,只是不用再设置Laya.View.uiMap = Laya.Loader.getRes('ui.json');而已。

//layaMaxUI.tsexport module ui {
    export class Hello1UI extends Scene {
        public tesImg:Laya.Image;
        constructor(){ super()}
        createChildren():void {
            super.createChildren();
            this.loadScene("Hello1");
        }
    }}//Hello1Scene.tsimport { ui } from "./ui/layaMaxUI";export default class Hello1Scene extends ui.Hello1UI {
    createChildren():void {
        super.createChildren();
        console.log('this.testImg',this.tesImg);
        this.on('onViewCreated',this,this.onViewCreatedHandler);
    }
    
    onViewCreatedHandler():void{
        console.log("this.testImg:", this.tesImg);
    }}//Main.tsonConfigLoaded(): void {
    //加载IDE指定的场景
    //GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);
    var sc = new Hello1Scene();
    Laya.stage.addChild(sc);}

这里从测试代码里可以看出,createChildren里居然访问不到页面的变量this.testImg,这在laya1.0里是可以正常访问的。只能参考引擎的Scene代码,在onViewCreated事件里,才能访问到。

scene.on("onViewCreated", null, function():void {
    complete && complete.runWith(scene)})scene.createView(obj);

所以,上面的这种写法、思维方式,还是laya1.0时代仿flash时代的套路,是时候改变一下了,laya2.0的组件化封装场景Scene、runtime、prefab


暂无评论

发布评论

分享:

支付宝

微信