橙光代码模式

Appearance

Scene ​

前言 ​

scene是使用代码模式制作的功能相对完整的场景，如 视频教程 里的收集组件。

scene可以插入到橙光剧情中使用，scene可以实现不方便用剧情表现的功能，如背包、画画、行程安排等。

1、scene的结构 ​

在创建Scene时，需要注意两点：

  1. 类名尽量和文件名相同
  2. 类名尽量和LM.Class的参数相同，使用@LM.Class(${类名})装饰器注册类名。注册后，在橙光中的呼叫Scene里，可以看到该Scene。
  3. 可在注册LM.Class时添加传入传出参数类型和备注，可在工具端添加scene时方便添加传入传出参数。
typescript
//注册类名
@LM.Class("TestScene",{
    IN: [{ TYPE: "INT", DES: "备注1", DEFAULT: 100 }],
    OUT: [
        { TYPE: "STR", DES: "备注2" },
        { TYPE: "OBJ", DES: "备注3" },
        { TYPE: "LIST", DES: "备注4" }
    ]
})
export default class TestScene extends LM.Scene {
    // 场景初始化方法
    init() {
        // 在这里添加场景内容
        // 例如：背景、UI元素等
        
    }
    //update可以没有，初始化之后每一帧都会调用，不推荐写得太复杂
    update() {
        // 更新场景内容
        // 例如：更新UI、更新状态等
    }
}

1.1 悬浮组件scene(FloatingPanel) ​

注意事项:

  1. 悬浮组件scene，可以悬浮在橙光剧情之上。仅能通过橙光剧情呼叫
  2. 通过addChild添加的图片和按钮组件，默认不会穿透，如果想穿透，需要设置LM.Scene的属性isPenetrable: true;
  3. 通过killAllScenesToParent()接口无法关闭悬浮组件scene，仅能通过橙光事件和this.close()接口关闭
  4. 使用@LM.FloatingClass(${类名})装饰器注册类名，注册后，在橙光中的悬浮组件开关scene里，可以看到该Scene。
  5. 与注册scene类似，也可以为悬浮组件scene添加传入传出参数类型和备注，可在工具端添加scene时方便添加传入传出参数。
typescript
//注册类名
@LM.FloatingClass("TestScene",{
    IN: [{ TYPE: "INT", DES: "备注1", DEFAULT: 100 }],
    OUT: [
        { TYPE: "STR", DES: "备注2" },
        { TYPE: "OBJ", DES: "备注3" },
        { TYPE: "LIST", DES: "备注4" }
    ]
})
export default class TestScene extends LM.FloatingPanel {
    // 场景初始化方法
    init() {
        // 在这里添加场景内容
        // 例如：背景、UI元素等
        
    }
    //update可以没有，初始化之后每一帧都会调用，不推荐写得太复杂
    update() {
        // 更新场景内容
        // 例如：更新UI、更新状态等
    }
}

2、呼叫 ​

2.1 在橙光中呼叫scene ​

1.在build完成后，可以在橙光的逻辑→呼叫scene（勾选代码模式），在下拉列表中选择注册为LM.Class的Scene。

scene1.jpg

2.在build完成后，可以在橙光的消息→悬浮组件开关（选择单独组件、代码模式悬浮组件），在下拉列表中选择注册为LM.FloatingClass的Scene。（多次打开同一个悬浮组件Scene时，需要把前一个先关闭。） scene2.jpg

2.2 在scene呼叫 ​

使用如下代码即可呼叫另一个scene。

LM.showScene("TestScene");

3、关闭 ​

关闭scene ​

使用如下代码可以关闭当前scene。

this.close([]);

回橙光剧情 ​

使用如下代码可以关闭所有scene并回到剧情。

typescript
LM.killAllScenesToParent();

跳转橙光剧情 ​

跳转橙光剧情，剧情id，下面的001，也就是1 为剧情id jumpStory.png

typescript
//跳转到id为1的橙光剧情
LM.jumpStory(1);

4、传入参数 ​

接收传入参数如下所示

typescript
let A = this.params[0];//将第1个传入参数赋值给A
let B = +this.params[1];//将第2个传入参数赋值给B +号可以将字符串转换为数值 确保类型正确

注：在数值类传入参数前面加“+”可将字符串转换为数值，确保类型正确。

测试使用小技巧 ​

我们在使用npm run dev开发时，因为脱离了橙光环境，所以传入参数会没有值，我们可以通过获取运行环境判断是否为dev环境。 具体使用方式按工程需求处理。

typescript
const testInData = [
    '测试字符串',
    1234
]
export class TestScene extends LM.Scene{
    /**
     * 测试参数
     */
    private inData:[string,number];
    init(){
        // 获取当前运行环境 使用npm run dev 获取到的环境就是dev 以此进行测试，这里非dev环境就是用传入的参数
        this.inData = LM.getRunEnv() === "dev" ? testInData : this.params;
    }
}

5、传出参数 ​

在关闭scene时传出，如下

typescript
let A = 1;
let B = "ok";
this.close([A,B]);//将A,B作为传出参数 A位传出参数1 B为传出参数2

两个Scene，SceneA呼叫SceneB，SceneB关闭后，SceneA如何知晓SceneB关闭，并拿到SceneB的传出参数？

在SceneA中添加onSceneClose方法，一旦有Scene关闭，此方法会被调用，传入的参数包含关闭Scene的id和关闭Scene的传出参数。

typescript
@LM.Class("SceneA")
export class SceneA extends LM.Scene {
    private _sceneBId:string = '';
    init(): void {
        const button = new LM.Button();
        button.text = "Open SceneB";
        button.fontSize = 40;
        button.fontColor = "#ffffff";
        button.y = 200;
        button.onClick(async ()=>{
            this._sceneBId = await LM.showScene("SceneB");
        })
        this.addChild(button);
    }
    onSceneClose(data: LM.LMSceneCloseData): void {
        if(data.id == this._sceneBId){ // 是SceneB关闭 两个id相同，多个scene同时存在时可以用来判断是哪个关闭了
            this._sceneBId = '';
            console.log(data.outData); // 打印sceneB的传出参数
        }
    }
}
@LM.Class("SceneB")
export class SceneB extends LM.Scene {
    init(): void {
        const button = new LM.Button();
        button.text = "Close SceneB";
        button.fontSize = 40;
        button.fontColor = "#ffffff";
        button.y = 400;
        button.onClick(()=>{
            this.close(["SceneB的传出参数1"])
        })
        this.addChild(button);
    }
}

6、在橙光中传入和接收参数 ​

在橙光的呼叫中，需要传入传出参数的数量和类型都对应上，参数顺序不可变化。 传出后，数值和字符串会被赋值到橙光剧情内对应的变量中。

scene2.jpg