BabylonJS and Blazor - Setting Up A State Machine
For this article we will go over creating a State Machine implemented in C#, we will use the logic from the BabylonJS Guided Learning, link provided below.
Checkout BabylonJS and Blazor - Simple Game State, the next step in the series!
Demo and Source Code
A running Demo of what should be seen when the application is Set Up and running. You can open the below demo or by going to the BabylonJS Blazor Step 02 website.
You can also see the full source code in GitHub here: canhorn/BabylonJS.Blazor.Game.Tutorial/tree/step/02_Setting-Up-A-State-Machine
Compare the original step in the Series here: Setting Up A State Machine | Babylon.js Documentation (babylonjs.com)
Implementation Overview
The State Machine has four main states that it will put the game in; Start, Game, Lose and Cut Scene. The implementation was just a rough in, and the triggers are just done by UI buttons, but we really lay the ground work for the game transitions. The State Machine is part of the GameApp.cs so from here we will load in assets, trigger transitions through state changes, and build scenes.
The first thing we should probably go over is what a Scene is, these can be thought of as buckets. These buckets are where assets like the Player, NPCs, lights, the environment, and logic can be grouped together in. We load in a multiple scenes at once, all built using a single BabylonJS Engine, so we can load the next Scene while the other is playing.
Each state creates a Scene separate from the other states and after the loading is finished the State Machine transitions to the next active scene. This active scene will then start rendering right away, so having some type of transition overlay can help with the scene change for the user. For the scene change we can use the BabylonJS loading view, we do this for a few transitions, but will be more flushed out in future steps.
What Changed?
Not much is different between the way the original code for the state machine and the C# version, the BabylonJS was pretty basic GUI so it was mostly the same. The biggest change was just using the BlazorPro.BlazorSize package to hook into the browsers window resize event to trigger the BabylonJS Engine resize function.
