BabylonJS and Blazor - Simple Game State

For this article we will go over a Simple Game State implemented in C#, we will use the logic from the BabylonJS Guided Learning, link provided below.

Checkout BabylonJS and Blazor - The Player Camera, 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 03 website.

You can also see the full source code in GitHub here: canhorn/BabylonJS.Blazor.Game.Tutorial at step/03_Simple-Game-State

Compare the original step in the Series here: Simple Game State | Babylon.js Documentation (babylonjs.com)

Implementation Overview

This was a very straight forward implementation, the logic was forward enough that it is close to a one to one in code layout. The two big areas created are the Environment and the Player objects, these are used to encapsulate the loading of the game environment and player assets. Currently the Environment is just a flat box, created using the Mesh.CreateBox, and the Player encapsulates logic to the player and uses a dictionary of assets passed in during creation/loading.

What Changed?

The only thing to change was not code related, it was a change from what was stated in the main Article. The article had some code pointed out, but was not used just yet, that caused issue with the static typing of .NET. Since TypeScript/JavaScript has a loose nature this was not a problem in the article, but to get around this I just remove it and comment out the code where applicable.

Source Code Example

I like the InitializeGame method in both the C# and TypeScript source, because you can see that these are near identical! The first example is the C# source code and the second is TypeScript, if you could not tell.

private Task InitializeGame(Scene scene)
{
    var light0 = new HemisphericLight(
        "HemiLight",
        new Vector3(0, 1, 0),
        scene
    );

    var light = new PointLight(
        "sparklight",
        new Vector3(0, 0, 0),
        scene
    )
    {
        diffuse = new Color3(
            0.08627450980392157m,
            0.10980392156862745m,
            0.15294117647058825m
        ),
        intensity = 35,
        radius = 1
    };

    var shadowGenerator = new ShadowGenerator(
        1024,
        light
    )
    {
        darkness = 0.4m
    };

    _player = new Player(
        _assets,
        scene,
        shadowGenerator
    );

    return Task.CompletedTask;
}

Compared to the above code block they are almost exactly the same, this is what the canhorn/EventHorizon.Blazor.TypeScript.Interop.Generator tool gives you. Using the tool you can generated a proxy that gives you, relative to .NET, the same API as the original JavaScript library.

private async _initializeGameAsync(scene): Promise<void> {
    //temporary light to light the entire scene
    var light0 = new HemisphericLight(
      "HemiLight", 
      new Vector3(0, 1, 0),
      scene);

    const light = new PointLight(
      "sparklight",
      new Vector3(0, 0, 0),
      scene);
    light.diffuse = new Color3(
      0.08627450980392157,
      0.10980392156862745,
      0.15294117647058825);
    light.intensity = 35;
    light.radius = 1;

    const shadowGenerator = new ShadowGenerator(
      1024,
      light);
    shadowGenerator.darkness = 0.4;

    //Create the player
    this._player = new Player(
      this.assets,
      scene,
      shadowGenerator); //dont have inputs yet so we dont need to pass it in
}