Laya商业级3d实战_017加载过渡页面

本节目标：实现加载过渡页面

laya商业级3d游戏开发

项目有个不完美的地方
看到homeview.ts

onOpened(data) {....
    //场景读取需要时间，所以在文件读取中会有空白间隔
    SceneManager.LoadSceneByName('Home', this, this.OnSceneLoadOk);

解决该问题

新建loadind.scene

制作成如下样式

View.zoder=1;设置渲染顺序

新建脚本LoadingView.ts

import BaseView from “./BaseView”;
import { GameSample } from “…/GameSample”;

export class LoadingViewArg {
subpackgeName = ‘’;
loadokfunc: Function;
callder: any;
}

//在超休闲游戏中，耗时最高的部分是下载资源的时间，本案例的进度条为下载进度
export default class LoadingView extends BaseView {

loadingProgressBar: Laya.ProgressBar;
loadingProgressLabel: Laya.Label;
fileLoadOk = false;
public static instance: LoadingView;
/** 0-1 */
currentProgress = 0;
arg: LoadingViewArg;
onAwake() {
    super.onAwake()
    LoadingView.instance = this;
    this.loadingProgressBar.value = 0;
}

public startLoad() {
    this.fileLoadOk = true;
    Laya.timer.frameLoop(10, this, this.loopUpdate);
}

private loopUpdate() {
    //在编辑模式或者非分包模式直接进度条为1，因为不需要下载任何资源
    if (this.fileLoadOk) {
        this.currentProgress = 1;
    }

    if (GameSample.commonData.OnIOS || GameSample.commonData.OnPc
        || Laya.Browser.onQGMiniGame || Laya.Browser.onVVMiniGame)
        this.currentProgress *= 1;
    else
        this.currentProgress *= 0.01;

    this.loadingProgressBar.value = this.currentProgress;
    this.loadingProgressLabel.text = Math.floor(this.currentProgress * 100) + '%';

    if (this.fileLoadOk) {
        Laya.timer.clear(this, this.loopUpdate);
        this.arg.loadokfunc.call(this.arg.callder)
    }

}
onClosed() {
    LoadingView.instance = null;
    super.onClosed();
    Laya.timer.clear(this, this.loopUpdate);
    this.destroy(true);
    //清空不用的资源
    Laya.Resource.destroyUnusedResources();

}

}

viewMgr.ts

增加
public OpenHome_loadingeffect(callder, callbackFunc: Function) {

    Laya.Scene.open(SceneType.loading, false, Laya.Handler.create(callder, view => {
        let loadingView = view as LoadingView;
        let viewArg = new LoadingViewArg();
        viewArg.subpackgeName = 'Home';
        viewArg.callder = this;

        viewArg.loadokfunc = () => {
            this.OpenHome(callder, callbackFunc);
        }

        loadingView.arg = viewArg;
        loadingView.startLoad();

    }));
}

public OpenGame_loadingeffect(callder, callbackFunc: Function) {
Laya.Scene.open(SceneType.loading, false, Laya.Handler.create(callder, view => {
let loadingView = view as LoadingView;
let viewArg = new LoadingViewArg();
viewArg.subpackgeName = ‘Game’;
viewArg.callder = this;

        viewArg.loadokfunc = () => {
            Laya.Scene.open(SceneType.Game, false, Laya.Handler.create(callder, view => {
                let s = view as GameView;
                if (callbackFunc != null)
                    callbackFunc.apply(callder);
            }));
        }
        loadingView.arg = viewArg;
        loadingView.startLoad();

    }));
}

GameSample.ts
增加
public static GotoHomeLoadEffect() {
ViewMgr.instance.OpenHome_loadingeffect(null, null)
}

public static StartGame_LoadEffect() {

    ViewMgr.instance.OpenGame_loadingeffect(this, (view) => {

        SceneManager.LoadSceneByName('Game', this, this.OnGameSceneLoadOk);
    })

}
修改
static OnGameSceneLoadOk(p_Scene3D: Laya.Scene3D) {
Laya.stage.addChildAt(p_Scene3D, 0);

    SceneManager.game = p_Scene3D;
    p_Scene3D.addComponent(Game);

    //增加
    if (LoadingView.instance != null) {
        LoadingView.instance.close();
    }
}

Iniview.ts
改
onAwake() {
super.onAwake()
// GameSample.GotoHome();
GameSample.GotoHomeLoadEffect();
}

Homeview.ts
加载结束后才关闭页面

OnSceneLoadOk
if (LoadingView.instance != null) {
LoadingView.instance.close();
}

OnStartImageClick
// GameSample.StartGame();
GameSample.StartGame_LoadEffect();

F8 f5

修改Homeview.ts
OnStartImageClick() {

    console.log('OnStartImageClick');
    this.scene3D.destroy(true);
    this.close();
    //GameSample.StartGame();
    GameSample.StartGame_LoadEffect()
}

OverView.ts
noclick() {
console.log(‘noclick’);

    Game.instance.scene.destroy(true)
    this.close()
    //GameSample.GotoHome();
    GameSample.GotoHomeLoadEffect();
}

F8 f5

总结，本节增加了读取页面的过渡方法，解决加载过程中的空白阶段

分别在初始化页,首页，游戏页，结束页返回首页时使用了过渡页面