Blazor WebAsssembly で SkiaSharp を使用して描画する

はじめに

久しぶりにゲームを作ってみたくなったのですが、どうせなら勉強がてら最新技術を使用してみようということで、Blazor WebAsssembly を選択してみました。

描画処理について調べると、Canvas をラッピングした Blazorライブラリ Blazor.Extensions.Canvas があるのですが、これは JSInterop 毎回呼ぶため遅いことが分かっています。
そこで、Google社のオープンソース 2D CG専用ライブラリ SkiaSharp を使用することにしました。

Blazor で SkiaSharp レンダリングを使用して C# で実装された Flappy Bird

環境

• Windows 11 Pro
• Visual Studio 2026 Insiders
• .NET 10.0(プレビュー)

Blazor WebAssemly スタンドアロン アプリ でプロジェクトを作成しました。

SkiaSharp.Views.Blazor インストール

NuGetで「SkiaSharp.Views.Blazor」をインストールします。

描画

図形

赤い丸を描画します。

Home.razor

@page "/"
@using SkiaSharp
@using SkiaSharp.Views.Blazor

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
<br />
<SKCanvasView OnPaintSurface="@OnPaintSurface" />

@code {
    private void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        var surface = e.Surface;
        var canvas = surface.Canvas;

        // Clear the canvas
        canvas.Clear(SKColors.White);

        // Example drawing: Draw a red circle
        using (var paint = new SKPaint())
        {
            paint.Color = SKColors.Red;
            paint.IsAntialias = true;
            paint.Style = SKPaintStyle.Fill;
            canvas.DrawCircle(e.Info.Width / 2, e.Info.Height / 2, 100, paint);
        }
    }
}

イメージ

ぷよぷよイメージ(160 x 160)ファイルを 40 x 40サイズで描画

@page "/"
@using SkiaSharp
@using SkiaSharp.Views.Blazor

@inject HttpClient Http

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
<br />
<SKCanvasView OnPaintSurface="@OnPaintSurface" />

@code {
    SKBitmap? bitmap;

    protected override async Task OnInitializedAsync()
    {
        bitmap = await LoadPngFromWwwroot("images/puyo_1.png");
    }

    private async Task<SKBitmap> LoadPngFromWwwroot(string path)
    {
        var response = await Http.GetAsync(path);
        response.EnsureSuccessStatusCode();
        using var stream = await response.Content.ReadAsStreamAsync();
        return SKBitmap.Decode(stream);
    }


    private void OnPaintSurface(SKPaintSurfaceEventArgs e)
    {
        if (bitmap is null)
            return;

        var canvas = e.Surface.Canvas;
        canvas.Clear(SKColors.White);
        var destRect = SKRect.Create(0, 0, 40, 40);
        canvas.DrawBitmap(bitmap, destRect);
    }
}

最後に

最近、「すぐわかる！ ぷよぷよプログラミング SEGA公式ガイドブック」の本を購入しました。これ自体は、JavaScript で書かれているので、勉強がてら C# に移植していきます。