BlazorGamePad

This is a component library for using gamepads with blazor. The goal was to learn some of the internals of Blazor but now it might be useful to others and have decided to publish. It is based on the Gamepad API. I have only done minimal testing from one computer using Blazor-Server side and have not tested with Blazor Client Side (WASM) nor have I tested it with multiple, gamepad enabled clients. Both these scenarios are TBD (to be done).

The GamePad does contain the signalr connectionid so that we do know, the differences between devices. I do not have a sample with user authentication and gamepad association. Mark that as TBD also.

Getting Started

Configuring the project

Add this package to a new Blazor Application.
Update _Imports.razor to include these namespaces.

@using DanielCarey.Blazor.Gamepad
@using DanielCarey.Blazor.Gamepad.Services

Reference the javascript client code in _Host.cshtml.

<script src="/_content/DanielCarey.Blazor.Gamepad/blazor_gamepad.js"></script>

Update ConfigureServices in Startup.cs

public void ConfigureServices(IServiceCollection services) {
    services.AddSignalR();
    services.AddGamepadServices(); 
}

Update Configure in Startup.cs

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
    app.UseStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints => {
        endpoints.MapHub<GamepadServiceHub>(GamepadServiceHub.ChannelName);
    });
}

Using the component

Add the component to the page.

<GamePad Index="@Index" OnClientGamepadUpdate="@ClientGamepadUpdate" 
         ShowDebug="true" OnlyNotifyOnChange="true">
</GamePad>

Handle events from the gamepad.

private void ClientGamepadUpdate(ClientGamePadUpdateArgs args) {
}

See: ClientGamePadUpdateArgs

Sample Screenshots

Home Page Iterations

The home page iterates through each gamepad object and displays it's debug ui.

Component Test: Navigate Previous/Next Gamepads

This shows how to cycle through the attached gamepads using previous and next buttons.

Press a Button then use that Gamepad

This is an example of asking the user to select the controller they wish to use by selecting a button on that contoller. After the selection, we switch to the debug view for that controller.

How it Works

The framework creates a signalr backchannel that pumps gamepad information from the web browser to a signalr gamepad hub, GamepadServiceHub. The GamePad control is also a client to the gamepad hub and receives the update events.

The javascript client is blazor_gamepad.js.

The GamePad component is GamePad.razor.

What's Next?

Bug Fixes
More Samples
Client-Side Blazor
Associate gamepad with User
Performance Tuning
Unit testing ¯\_(ツ)_/¯

danielwcarey/BlazorGamepad