BlazorCanvas

I started this project with the intention of learning/exploring what can be done with Blazor and 2d graphics. I am an old-time videogames lover and I always enjoyed coding small games and prototypes in my spare time.

The goal is to create small examples, built one on top of the other, showing how easy it is to render 2d elements using Blazor. Eventually I might end up writing a full game, it highly depends on how much time I'll have.

The repository is divided into numbered subfolders, each one with a single example.

Every example is also published on GitHub Pages via GitHub Actions using the approach outlined here . The master branch is used to host the published pages. The main branch is development.

There is a new library for 2D development with Blazor, Blazorex. Check it out!

Examples

I haven't yet updated all the examples to use Blazorex instead, but the base concepts are exactly the same.

• Example1 shows how to initialize the 2d canvas
• Example2 shows how to render a sprite and react to the window resize event
• Example3 shows how to move a sprite on the screen
• Example4 builds on top of the previous one, refactoring and cleaning up the code
• Example5 shows how to handle mouse inputs
• Example6 shows how to animate a sprite. Spritesheets were downloaded from here and combined using a custom tool
• Example7 shows how to control animations using the keyboard
• Example8 shows how to use a FSM to control animations and move the character on the screen
• Example9 refactors the code and introduces the Scene Graph
• Example10 adds the Assets Resolver
• Example11 shows how to do collision detection

Tutorials

Every example will be explained in detail by an article on my personal blog:

• part 1: intro
• part 2: canvas initialization
• part 3: sprite rendering
• part 4: moving a sprite
• part 5: composition
• part 6: mouse input
• part 7: animations
• part 8: keyboard input
• part 9: introducing the Finite State Machine
• part 10: the Scene Graph
• part 11: improved assets loading