Skip to content

Latest commit

 

History

History
56 lines (41 loc) · 1.67 KB

readme.md

File metadata and controls

56 lines (41 loc) · 1.67 KB
Raw

Blazorex

Nuget

Description

Blazorex is an HTML Canvas wrapper library for Blazor.

Blazorex

It has some interesting functionalities like:

  • multiple canvases
  • background rendering
  • image rendering
  • procedural image generation (yes, the fire on the background is fully procedural! Thanks filipedeschamps for the awesome repository showing how to render the Doom fire! )

Installation

Blazorex can be installed as Nuget package: https://www.nuget.org/packages/Blazorex/

Usage

Simply add the Canvas Component to your Razor page and register to the OnCanvasReady to receive the CanvasBase instance.

Then use OnFrameReady to define your update/render logic:

<Canvas Width="800" Height="600" 
        OnFrameReady="(t) => OnFrameReady(t)"
        OnCanvasReady="(ctx) => OnCanvasReady(ctx)" />

@code{
    CanvasBase _canvas;

    private void OnCanvasReady(CanvasBase canvas)
    {
        _canvas = canvas;
    }

    private void OnFrameReady(float timeStamp)
    {
        // your render logic goes here
    }
}

You might also need to update your index.html to include the library's CSS:

<head>
    <!-- other tags... -->
    <link href="_content/Blazorex/blazorex.css" rel="stylesheet" />
</head>

For a complete sample, check the ./src/Blazorex.Web folder.

A sample game can be found here: Blazeroids