BabylonJS and Blazor - Character Movement Part 2

For this article we will go over Character Movement (Part 2) implemented on Blazor with C#, this article go over adding the Jumping and Dashing Player Abilities.

Checkout BabylonJS and Blazor - Importing Meshes, the next step in the series!

Demo and Source Code

Below is a running demo of the application in its finished state for Step 6, you can also open the demo in a new tab by going to BabylonJS Blazor Step 06.

Use the Arrow keys to move the around the map. Space key to Jump and the Shift key to Dash while in the Air.

You can see the full source code in GitHub: canhorn/BabylonJS.Blazor.Game.Tutorial at step/06_Character-Movement-Part-2

Checkout the original step in the Series: Character Movement Part 2 | Babylon.js Documentation (babylonjs.com)

Implementation Overview

Character Movement Part 2 gave the player access to the Jump and Dash abilities, also included changes to the movement logic for Slop detection. Using mesh.moveWithCollisions(Vector3) to apply force in the movement direction the Player will move and if a Slop is detected will move up/down it. A Slop is created by overlaying a collision mesh in the same location as the displayed mesh.

The Dash Ability was added with a 10 frame duration, and required to be off the ground to trigger. Dash can only be triggered once every 10 frames and only after they have landed on the ground first. So if in the air the Player will only be able to Dash once, until after they land on a ground surface.

The Demo show's both the Jump and Dash abilities as special actions, also the the Environment was updated with a larger area. Since Gravity affects the player they can easily fall off the stage when using the new Abilities, so be careful moving around. The Environment also includes a "Slop" mesh that shows how the stairs affect movement.

Source Code Example(s)

With the SlopRaycastFrom method logic we are taking the Players location and checking around them for a mesh with "stair" in the name. This is a convention used by the models to signify to the system that a mesh is Slop and should be treated as the Ground for the Player. When the Player moves a stair check is done at 4 location around the Player location, so even if the center of the Player is not on the ground the check will say if the Player is on the ground.

// Client/Pages/Game/Player.cs:SetupPlayerCamera
private PickingInfo SlopeRaycastFrom(
    ActionResultCallback<AbstractMesh, bool> predicate,
    decimal x,
    decimal z
)
{
    // Here we create a point in 3D space of where the origin of the Ray will be.
    // The x and z are passed in so the caller can reuse the logic here.
    var raycast = new Vector3(
        x,
        // This is the current location of the player, but with a sligh offset.
        _mesh.position.y + PLAYER_OFFSET,
        z
    );
    var ray = new Ray(
        raycast,
        // Cast the Ray straight down 
        Vector3.Up().scale(-1),
        // This is the distance from the orign raycast point.
        // Anything within this distance will be considered picked.
        1.5m
    );
    // Using the currently acitve Scene/Models to check. 
    return _scene.pickWithRay(
        ray,
        predicate
    );
}