BabylonJS and Blazor - Series Introduction

The Game Development series will focus on two major technology frameworks, one being Babylon.jsand the other being ASP.NET Core Blazor. The series will be a re-implementation of the Guided Game Introduction to Creating Games which is available on the Babylon.js documentation site.

First Article still in the works, follow me on Twitter @CodyAnhorn to get notified when I publish it!

Overview

The Guided Learning was originally done by capucat, and shares what they learned creating the tutorial we will be following. While going through their provided steps and explanations I will reimplement what work was during these steps but using Blazor as the framework and C# as the language the code will be written in. This is a prof of concept for a tool I created to help abstract Blazor interop code into a simpler API, with less boiler plate and code necessary to maintain the interop.

JavaScript Library Interop

The tutorial will be build on ASP.NET Core Blazor, the WebAssembly flavor, to show off the tool, EventHorizon.Blazor.TypeScript.Interop.Tool. I created this tool to help with the interfacing of the BabylonJS JavaScript library. The tool wraps the JavaScript library making it seamless to access from C#, generating an API that behaves relatively the same. The tool is helps with the maintainability of a large and complex JavaScript library like Babylon.js, by removing all the common interop logic and leave just the API in more or less the same structure.

The tool has the added benefit of being used from the command line to generate a .NET C# library. This library is packaged up in a project, making it portable and specific to the JavaScript libraries API. The library will have just a single dependency, another library created by me, to manage the interop. The library is optimized for Web Assembly, by using low level API of Blazor to make the calls. The tool is also able to generate an API that can be used with Balzor Server, but going over the Blazor Server generation is out of the scope of this series.

The tool does not eliminate the JavaScript, it just make it easier to consume the JavaScript by only having to write C# to interact with the library. You can see the repository below for more details on the project and tool, the repository includes the logic to generate the library proxy and a .NET tool for easier generation. I included a small snippet of TypeScript and what is generated after the tool is executed.

Repository: canhorn/EventHorizon.Blazor.TypeScript.Interop.Generator

export module Blazor.Example {
    export class CustomApi {
        static CallMyApi(): Promise<string>;
    }
}

/// Generated - Do Not Edit
namespace Blazor.Example
{
    // ... Removed Content for Brevity
    [JsonConverter(typeof(CachedEntityConverter<CustomApi>))]
    public class CustomApi : CachedEntityObject
    {
        public static ValueTask<string> CallMyApi()
        {
            return EventHorizonBlazorInterop.Task<string>(
                new object[]
                {
                    new string[] { "Blazor", "Example", "CustomApi", "CallMyApi" }
                }
            );
        }
        // ... Removed Content for Brevity
    }
}

Series Structure

The structure of this series will be broken up into steps, these steps will be the same as the original series steps. I will be committing each step as a branch to canhorn/BabylonJS.Blazor.Game.Tutorial which will also include a completed example per this series. The steps will be complete enough to run locally, a Demo site will also be available including the main and each branch, with a reference to the original step article and code repository.

The code should be pretty close to the original but as I go through the series I will be making changes to the logic to work better with Blazor. Each article will go over what was changed and why it is different than the original. Also some of articles might be quick and others longer, this can come down to how straight forward the code was and if it needed any custom logic for Blazor to work.

The first article will be setting up the development environment, this will be the one step that will not be followed. Because this step goes over setting up a TypeScript development workflow, since we are using C# and .NET this step will focus on what will be needed to get started in Blazor development.

References

Introduction To Creating Games | Babylon.js Documentation (babylonjs.com)

canhorn/BabylonJS.Blazor.Game.Tutorial: A Blazor Game Created from the Guided Learning of BabylonJS. (github.com)