「C#」の「WinUI」でデスクトップゲーム「Color」を開発してみよう

はじめに

この連載では、さまざまなプログラミング言語やライブラリで同じゲームを開発することで、容易にそのプログラミング言語に入門します。

第12回の今回はプログラミング言語「C#」を使って、次のURLのようなColorゲームを作ります。こちらからアセットをダウンロードしておいてください。

Colorゲームについて

Colorゲームの内容は第1回でも解説した通り、ゲームを開始したら、赤緑青の色ブロックをクリックします。すると背景色にその色が混ぜられるので、どんどんクリックして真っ白な背景にしていこうというゲームです。

プログラミング言語について

C#はMicrosoftが開発した言語で、デスクトップアプリ(Windows)、Webアプリ(ASP.NET)、ゲーム開発(特にUnity)などに使われています。一度「中間言語(IL)」にコンパイルし、実行時にJITコンパイルするハイブリッド型のコンパイラ言語で、オブジェクト指向でデータ型が厳密に管理されるためバグが起きにくく、「.NET」という仕組みで多くのライブラリの機能がすぐに使えます。

WinUIについて

「WinUI」は「Windows UI Library」の略で、Microsoftが提供するWindowsアプリ向けのUIフレームワークです。2026年現在は主に「WinUI 3」を指すことが多く、Windows App SDKの一部として使われます。

C# / .NETでWindowsデスクトップアプリを作ることができ、UIはXAMLで記述します。Windows 11に合ったモダンなUIを作りやすく、Button、TextBox、ListViewなどのUI部品も用意されています。UWPの後継的な位置づけのフレームワークです。

開発のために必要となる環境の準備

今回必要となる、無料版の「Visual Studio 2026」(以下、VS2026)を準備します。次のURLからVisual StudioインストーラーをダウンロードしてVS2026のC#をインストールしてください。

プロジェクトを作成しよう

VS2026を起動したら「Create a new project」をクリックし、コンボボックスで「C#」と「Windows」を選び「WinUI Blank App(Packaged)をダブルクリックします。

「Project name」を「colorWinUI」とタイプし、「Create」ボタンをクリックしてプロジェクトを作成します。

次の階層図のように「images」フォルダ内の画像ファイルと「sounds」フォルダ内の音声ファイルを「Assets」フォルダに配置します。

・階層図

colorWinUIフォルダ
┠Dependenciesフォルダ(関連ファイルフォルダ)
┠Properties
┠Assetsフォルダ(素材フォルダ)
┃┠0.pngファイル(赤の色ブロック画像)
┃┠1.pngファイル(緑の色ブロック画像)
┃┠2.pngファイル(青の色ブロック画像)
┃┠GameOver.ogg(ゲームオーバーサウンド)
┃┠GameOver.pngファイル(ゲームオーバー画像)
┃┠GameStart.ogg(ゲームスタートサウンド)
┃┠Mix.ogg(混色サウンド)
┃┠StageClear.ogg(ステージクリアサウンド)
┃┠StageClear.pngファイル(ステージクリア画像)
┃┠Title.pngファイル(タイトル画像)
┃┗など
┠app.manifest
┠App.xaml
┠DeploymentManagerAutoInitializer.cs
┠MainWindow.xaml(メインウィンドウのUIファイル)
┃┠MainWindow.xaml.csファイル(メインファイル)
┃┗Package.appmanifest
┠Sprite.csファイル(色ブロックファイル)
┗WindowsAppSDK-VersionInfo.cs

次のサンプルコードをコーディングし、「Debug」→「Start Debugging」メニューを実行するとウィンドウにタイトル画像だけ表示されます(図1)。XAMLは.NET版のHTML5ファイルのようなXML形式のファイルです。

・サンプルコード「MainWindow.xaml」ファイル

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="colorWinUI.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:colorWinUI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="Color">

    <Window.SystemBackdrop>
        <MicaBackdrop />
    </Window.SystemBackdrop>

    <Grid x:Name="RootGrid">
        <Grid x:Name="TitleGrid" Background="White">
            <Image
                Source="Assets/Title.png"
                Width="447"
                Height="190"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                PointerPressed="TitleImage_PointerPressed" />
        </Grid>
        <Canvas x:Name="ImageCanvas" />
    </Grid>
</Window>

【サンプルコードの解説】
「Window」タグに書かれた属性はおまじないのようなもので、特に変更しません。
「Grid」タグはHTML5でいう「div」タグのような見えない矩形を表します。RootGridがルートでTitleGridがタイトル画像を配置します。
「Image」タグでタイトル画像を中央に配置します。
「Canvas」タグで複数の色ブロックを配置します。

・サンプルコード「MainWindow.xaml.cs」ファイル

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Input;
using System;

namespace colorWinUI
{
    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var appWindow = this.AppWindow;
            appWindow.Resize(new Windows.Graphics.SizeInt32(1800, 900));
        }

        private void TitleImage_PointerPressed(object sender, PointerRoutedEventArgs e)
        {
        }
    }
}

【サンプルコードの解説】
MainWindowクラスのコンストラクタでウィンドウサイズを幅高さ1800×900にセットします。
「TitleImage_PointerPressed」メソッドはxamlファイルのImageタグがマウスで押された時に呼ばれるメソッドです。