Laya Scene

LayaAir项目开发中无论是创建场景Scene、页面View、对话框Dialog、3D场景Scene3d，它们的文件类型和文件后缀都使用的是.scene。

视图View是继承自场景Scene的，视图View比场景Scene多了相对布局，如果希望在设计界面中使用相对布局就需要使用视图View。

LayaAir2开发思路为组件化、脚本化、场景管理开发，项目采用Scene管理方式来管理场景。LayaAir已经对Scene做了一系列方案，使开发者无需考虑场景、关卡、页面的资源和内存管理，只需要单纯的调用接口来管理场景，其它的交给引擎去做，开发者只需要关注游戏逻辑开发即可。

例如：在开始场景中点击按钮切换至登录场景

1. 创建项目选择编辑模式，使用Ctrl+N打开创建场景对话框，创建开始场景并命名为Start.scene开始场景。
2. 创建项目选择编辑模式，使用Ctrl+N打开创建场景对话框，创建开始场景并命名为Login.scene登录场景。
3. 开始场景Start.scene中添加按钮Button组件
4. 创建脚本文件Start.js并注册

$ vim src/GameConfig.js

import Start from "./scripts/Start"

export default class GameConfig {
    static init() {
        //注册Script或者Runtime引用
        let reg = Laya.ClassUtils.regClass;
        reg("scripts/Start.js",Start);
    }
}
GameConfig.width = 1136;
GameConfig.height = 640;
GameConfig.scaleMode ="fixedheight";
GameConfig.screenMode = "horizontal";
GameConfig.alignV = "top";
GameConfig.alignH = "left";
GameConfig.startScene = "Start.scene";
GameConfig.sceneRoot = "";
GameConfig.debug = false;
GameConfig.stat = false;
GameConfig.physicsDebug = false;
GameConfig.exportSceneToJson = true;

GameConfig.init();

5. 编写脚本点击事件

$ vim Start.js

export default class Start extends Laya.Script {
    constructor() { 
        super(); 
    }
    onEnable() {
    }
    onDisable() {
    }

    onStart(){
        console.log("StartScript onStart");
    }
    onClick(){
        console.log("StartButton onClick");

        var url = "Login.scene";
        Laya.Scene.open(url);
    }
}

TS写法

onClick(e:laya.events.Event):void{
    console.log("StartButton onClick");
    let url:string = "Login.scene";
    Laya.Scene.open(url);
}

6. 为按钮添加代码组件

加载并打开场景

Laya.Scene.open(url)

/*
* 加载并打开场景
* @param url 场景地址
* @param closeOther 是否关闭其他场景，默认为true（可选），【注意】被关闭的场景，如果没有设置autoDestroyAtRemoved=true，则资源可能不能被回收，需要自己手动回收
* @param param 打开页面的参数，会传递给onOpened方法（可选）
* @param complete 打开完成回调，返回场景实例（可选）
* @param progress 加载进度回调（可选）
*/
static open(
  url:string,
  closeOther?:boolean,
  param?:any,
  complete?:laya.utils.Handler,
  progress?:laya.utils.Handler
):void;

具体流程

1. Scene.open
2. Scene.load
3. Scene.createView
4. SceneUtils.createByData 使用createComp递归创建节点

场景发布

进入编辑模式，使用Ctrl+N新建，在场景的导出类型中会包含4种发布模式，分别是内嵌模式、加载模式、分离模式、文件模式（默认）。也可以在编辑模式中按快捷键F9进入项目设置，选择场景设置中的发布模式。场景的四种发布模式的区别在于场景UI数据保存的位置。

场景导出类型

内嵌模式

内嵌模式会将编辑器的UI内容生成一个场景类代码脚本文件，代码脚本中包含IDE创建的UI场景信息。在轻游戏和小游戏未出现时不用考虑JS文件大小，是开发H5最常用的选择，而且不涉及异步加载打开 页面速度也是最快的。

内嵌模式下会生src/ui/layaMaxUI.js中成场景类，并且场景数据会内嵌到类中。当游戏发布后，UI数据会打包在bin/js/bundle.js文件中。在微信小游戏下，使用内嵌模式会占用宝贵的初始包4MB的资源，因此并不推荐。

当需要打开场景时，可使用类提供的createView()方法来使用UI数据。

加载模式

加载模式会成成场景类，其他的UI数据信息会存放到ui.json文件内，使用时需要预加载ui.json文件。在没有小游戏的时代不常用。由于场景信息可以不在JS文件中，因此可以节省JS包体大小，给小游戏4MB包节省更多空间，使用时可以以作为资源加载。

分离模式

分离模式是在加载模式基础上生成场景类，但会将每个场景生成单独的场景数据文件，每次单独加载场景文件，区别在于加默模式会一次性将所有场景都加载。在LayaAir2以后开发小游戏或轻游戏，为了减少在主包大小并提升加载速度，分离模式是最佳的选择。

文件模式

文件模式是LayaAir2.0特有的，为了开发小游戏而创建，文件模式不会生成场景类，因此进一步减少了JS包的大小。使用时使用Scene.load方式加载。文件模式不能直接调用场景内的变量，需要getchild获取之后才能操作。而其它三种模式的场景类中声明了变量，有代码提示直接可以操作内部的变量。

文件模式下不会创建场景类，只会生成场景数据，也就是说在src/ui/layaMaxUI.js文件中不会自动生成场景所对应的类。UI数据会生成一个单独的bin/*.json文件，其中包含场景数据。当需要打开场景时，可使用loadScene()方法加载UI数据。

需要注意的是，在使用JavaScript开发时，分离模式和文件模式是没有区别的，因为都没有场景类。

进入编辑模式后，新建场景Ctrl+N或项目设置F9中在场景设置中，如果选择内嵌模式和分离模式，在使用导出F12或清理导出Ctrl+F12时，会在代码模式下的src/ui/layaMaxUI.ts文件中生成对应的UI类。