babylonjs游戏教程 – 设置状态机

我心飞翔 分类:javascript

在整个应用程序中使用单个场景是完全可能的,但在我的游戏中,我想将这些状态划分为单独的场景。所以,我创建了一个状态机来处理整个游戏的不同场景的渲染。

App.ts

这将是我们处理场景创建和渲染的主文件。从构造函数开始,我们将把我们的场景创建和渲染循环调用分解成单独的函数。

状态

我是通过列出我在游戏中需要的所有不同场景来实现这一点的:

  • 启动
  • 场景画面
  • 游戏
  • 失败

没有胜利和暂停状态的原因是,这些实际上仍然在使用游戏场景,所以它仍然需要能够渲染游戏场景。我将这两个“状态”作为GUI的叠加。现在我们知道了我们想要的状态,我们可以继续并为它们创建一个枚举。enum所做的就是为这些状态分配名称,并将它们编码为数字。我们还希望创建一个类变量_state来存储我们所处的当前状态。现在,我们的app.ts应该是这样的:

//...这里是入口

//枚举的状态

enum State { START = 0, GAME = 1, LOSE = 2, CUTSCENE = 3 }
class App {
    // 完整的应用程序
    private _scene: Scene;
    private _canvas: HTMLCanvasElement;
    private _engine: Engine;
    //场景相关
    private _state: number = 0;
    constructor() {
        this._canvas = this._createCanvas();
        // 初始化巴比伦场景和引擎
        this._engine = new Engine(this._canvas, true);
        this._scene = new Scene(this._engine);
        var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), this._scene);
        camera.attachControl(this._canvas, true);
        var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), this._scene);
        var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, this._scene);
        // 隐藏/显示 Inspector
        window.addEventListener("keydown", (ev) => {
            // Shift+Ctrl+Alt+I
            if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.keyCode === 73) {
                if (this._scene.debugLayer.isVisible()) {
                    this._scene.debugLayer.hide();
                } else {
                    this._scene.debugLayer.show();
                }
            }
        });
        // 运行主渲染循环
        this._engine.runRenderLoop(() => {
            this._scene.render();
        });
    }
}
new App();

 

我还创建了一个单独的函数来创建我们的画布,名为_createCanvas。此外,我们将从这里开始使用类变量(由this关键字表示)。

转场功能

场景设定

转场功能将负责设置场景,并包含只发生一次的事情。
让我们从_goToStart开始,这是一个如何设置场景的简单例子。

this._engine.displayLoadingUI();

 

在开始场景加载时显示加载UI。

this._scene.detachControl();
let scene = new Scene(this._engine);
scene.clearColor = new Color4(0, 0, 0, 1);
let camera = new FreeCamera("camera1", new Vector3(0, 0, 0), scene);
camera.setTarget(Vector3.Zero());

 

创建场景和相机。任何相机都应该没问题,因为它会在场景中心被修复,所以我只使用FreeCamera。

//...做gui相关的事情
//--完成场景加载--
await scene.whenReadyAsync();
this._engine.hideLoadingUI();
//lastly set the current state to the start state and set the scene to the start scene
this._scene.dispose();
this._scene = scene;
this._state = State.START;

 

当场景准备好后,我们隐藏加载UI,处理当前存储的场景,然后切换场景,改变状态来渲染新的场景。

VSCode用户:在任何时候,如果你看到一个错误的巴比伦特定组件(如Color4和FreeCamera…)悬停它,你应该看到一个快速修复选项,这将为你的导入添加它。如果您没有看到这一点,您可以手动将其添加到文件顶部的导入中

GUI 设置

现在,我们将制作一个简单的全屏幕ui,带有一个按钮来切换场景。GUI元素需要从“@babylonjs/ GUI”导入。

//... 场景设置
//为我们所有的GUI元素创建一个全屏ui
const guiMenu = AdvancedDynamicTexture.CreateFullscreenUI("UI");
guiMenu.idealHeight = 720; //fit our fullscreen ui to this height
//创建一个简单的按钮
const startBtn = Button.CreateSimpleButton("start", "PLAY");
startBtn.width = 0.2;
startBtn.height = "40px";
startBtn.color = "white";
startBtn.top = "-14px";
startBtn.thickness = 0;
startBtn.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
guiMenu.addControl(startBtn);
//这处理与开始按钮附加到场景的交互
startBtn.onPointerDownObservable.add(() => {
    this._goToCutScene();
    scene.detachControl(); //observables disabled
});

 

这里我们做的是创建一个AdvancedDynamicTexture fullscreenUI。这是用来保存所有gui元素的。然后,我们创建了一个简单的按钮,并添加了一个可观察对象,以便在点击它时进行检测。这将触发我们的场景调用goToCutScene。我们想要确保我们分离了控制,因为当我们按住鼠标时,goToCutScene可能会被调用多次。

其他状态

失败状态将遵循类似的格式,但出于组织和表现目的,过场动画和游戏状态的结构略有不同。

转场失败

private async _goToLose(): Promise<void> {
    this._engine.displayLoadingUI();
    //--SCENE SETUP--
    this._scene.detachControl();
    let scene = new Scene(this._engine);
    scene.clearColor = new Color4(0, 0, 0, 1);
    let camera = new FreeCamera("camera1", new Vector3(0, 0, 0), scene);
    camera.setTarget(Vector3.Zero());
    //--GUI--
    const guiMenu = AdvancedDynamicTexture.CreateFullscreenUI("UI");
    const mainBtn = Button.CreateSimpleButton("mainmenu", "MAIN MENU");
    mainBtn.width = 0.2;
    mainBtn.height = "40px";
    mainBtn.color = "white";
    guiMenu.addControl(mainBtn);
    //this handles interactions with the start button attached to the scene
    mainBtn.onPointerUpObservable.add(() => {
        this._goToStart();
    });
    //--SCENE FINISHED LOADING--
    await scene.whenReadyAsync();
    this._engine.hideLoadingUI(); //when the scene is ready, hide loading
    //lastly set the current state to the lose state and set the scene to the lose scene
    this._scene.dispose();
    this._scene = scene;
    this._state = State.LOSE;
}
 

转场动画_goToCutScene

转场动画通常与gui一起设置;然而,我们在这种状态下所做的是让我们的游戏能够正确加载。如果你看一下_goToCutScene函数,场景设置是一样的,但场景完成加载略有不同。注意我们没有hideLoadingUI。现在,我们需要添加它,但在最终版本中,我实际上删除了它,因为我在动画加载完成后隐藏它,然后在我们完成对话后触发它显示,但游戏仍在加载中。

最重要的方面是我们在那之后做什么:

var finishedLoading = false;
await this._setUpGame().then((res) => {
    finishedLoading = true;
});

 

本质上,这是告诉代码等待直到_setUpGame完成了它的任务,然后设置finishhedloading为true。在这一点上,这似乎是不必要的,因为我们还没有引入动画,也没有加载任何重资产,但一旦我们进入开发过程的这一阶段,这就非常重要了。

这是一个重要的发现,最终促使我改变了游戏导入和加载资产的结构。如果我们不等待我们的资产完成导入,异步函数将告诉我们的代码继续在后台加载。这最终会破坏我们在场景之间的转换,因为我们需要在内容完全加载之前继续前进。我在测试游戏的网页托管版本时发现了这种情况:

  1. Safari有几个与声音和场景转换有关的问题
  2. 资产需要很长时间来加载,因此显示未定义的网格错误

出于测试目的,我们将添加一个next按钮,直接使用到游戏状态:

//--对话进展--
const next = Button.CreateSimpleButton("next", "NEXT");
next.color = "white";
next.thickness = 0;
next.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
next.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
next.width = "64px";
next.height = "64px";
next.top = "-3%";
next.left = "-12%";
cutScene.addControl(next);
next.onPointerUpObservable.add(() => {
    this._goToGame();
});
 

游戏设置 _setUpGam

现在我们唯一需要担心的是:


private async _setUpGame() {
    let scene = new Scene(this._engine);
    this._gamescene = scene;
    //...资源加载
}

 

_setUpGame是我们预创建游戏场景的地方,也是我们开始加载所有资产的地方。

转场游戏_goToGame

如果你看一下_goToGame函数,我们实际上已经将相机设置和gui设置封装到它们自己的函数中。现在你可以像这样使用默认的UI和摄像头:

private async _goToGame(){
    //--场景设定--
    this._scene.detachControl();
    let scene = this._gamescene;
    scene.clearColor = new Color4(0.01568627450980392, 0.01568627450980392, 0.20392156862745098); // 一种更适合整体配色方案的颜色
    let camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);
    camera.setTarget(Vector3.Zero());
    //--GUI--
    const playerUI = AdvancedDynamicTexture.CreateFullscreenUI("UI");
    //当游戏加载时,不要检测任何来自这个ui的输入
    scene.detachControl();
    //创建一个简单的按钮
    const loseBtn = Button.CreateSimpleButton("lose", "LOSE");
    loseBtn.width = 0.2
    loseBtn.height = "40px";
    loseBtn.color = "white";
    loseBtn.top = "-14px";
    loseBtn.thickness = 0;
    loseBtn.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
    playerUI.addControl(loseBtn);
    //这里处理与开始按钮附加到场景的交互
    loseBtn.onPointerDownObservable.add(() => {
        this._goToLose();
        scene.detachControl(); //禁用可见
    });
    //临时场景对象
    var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);
    var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
    //离开开始场景,切换到游戏场景并改变状态
    this._scene.dispose();
    this._state = State.GAME;
    this._scene = scene;
    this._engine.hideLoadingUI();
    //游戏已经准备好了,重新控制
    this._scene.attachControl();
}
 

我们在这里所做的是正常地设置场景,并添加一个简单的按钮来测试是否进入丢失状态。

我们也使用这个特定的场景,将我们的光和球体物体移动到这个函数中。

开关状态

现在我们已经设置好了场景,我们如何在它们之间进行渲染和切换呢?在App.ts的构造函数中,我们需要调用main。

主函数main

main函数是我们设置状态机的地方。这将取代我们第一次创建场景时设置的This ._engine. runrenderloop

private async _main(): Promise<void> {
    await this._goToStart();
    // 注册一个渲染循环来重复渲染场景
    this._engine.runRenderLoop(() => {
        switch (this._state) {
            case State.START:
                this._scene.render();
                break;
            case State.CUTSCENE:
                this._scene.render();
                break;
            case State.GAME:
                this._scene.render();
                break;
            case State.LOSE:
                this._scene.render();
                break;
            default: break;
        }
    });
    //如果屏幕被调整大小/旋转,则调整大小
    window.addEventListener('resize', () => {
        this._engine.resize();
    });
}
 

我们首先调用await _goToStart来确保我们的场景已经准备好被渲染了。

switch语句所做的是,它告诉渲染循环根据我们所处的状态进行不同的操作。似乎没有必要总是调用它。_scene在每个状态,但这实际上保存了对我们当前场景的引用。回想一下,我们处理的是。_scene was,对那个场景进行其他分离,创建一个新场景,然后重新分配这个。场景到新的场景。你当然可以使用变量来引用不同的场景,但我认为这样会更好,因为我们会在不使用的时候处理场景,这确保了我们的渲染

现在,当我们运行游戏并通过状态时,我们应该看到我们的领域!ts文件现在应该是这样的。这是一个简单的工作状态机!您可以根据需要对其进行修改。

如果您在通过这些状态时遇到了麻烦,请打开浏览器的检查器,查看控制台中显示了什么错误(您可能需要注释掉画布的样式,以便能够打开检查器)。

回复

我来回复
  • 暂无回复内容