「Visual Basic.NET」の「WPF」でデスクトップゲーム「Color」を開発してみよう

はじめに

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

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

Colorゲームについて

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

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

Visual Basic.NETはMicrosoftが提供するVisual Basic(VB)を.NET環境で動作するように発展させた言語です。VB.NETでできることは、Windows向けのデスクトップアプリ開発、Webアプリケーション開発、データベースを使った業務システム、ファイル操作やExcelなどとの連携、.NETのライブラリを利用した各種プログラムなどです。

WPFについて

「WPF」は「Windows Presentation Foundation」の略で、Microsoftが提供するWindows向けデスクトップアプリのUIフレームワークです。簡単に言うと、VB.NETやC#でWindowsアプリの「画面」を作るための仕組みです。例えば、ボタンや入力フォームがある業務アプリ、顧客管理システム、在庫管理システム、グラフや表を表示するアプリなど、複数画面を持つWindowsアプリが作れます。

WPFでは「VB.NET / C# → プログラムの処理」と「XAML → 画面のレイアウトや見た目」という役割分担をします。

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

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

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

VS2026を起動したら「Create a new project」をクリックし、コンボボックスで「Visual Basic」「Windows」「Desktop」を選び「WPF Application」をダブルクリックします。

「Project name」を「colorVbWPF」とタイプして「Next」ボタンをクリックし、「.NET 10.0」などを選択して「Create」ボタンをクリックするとプロジェクトが作成されます。

次の階層図のように、画像アセットの入った「images」フォルダを「colorVbWPF」フォルダにコピー＆ペーストします。今回は“images/Title.png”ファイルを右クリックして「Properties」メニューで「Build Action」→「Resource」、「Copy to Output Directory」→「Do not copy」を選択します。サウンドは省略します。

・階層図

colorVbWPFフォルダ
┠Dependenciesフォルダ(関連ファイルフォルダ)
┠imagesフォルダ(素材フォルダ)
┃┠0.pngファイル(赤の色ブロック画像)
┃┠1.pngファイル(緑の色ブロック画像)
┃┠2.pngファイル(青の色ブロック画像)
┃┠GameOver.pngファイル(ゲームオーバー画像)
┃┠StageClear.pngファイル(ステージクリア画像)
┃┗Title.pngファイル(タイトル画像)
┠Application.xaml
┃┗Application.xaml.vbファイル
┠AssemblyInfo.vb
┠ColorBlock.vb
┗MainWindow.xaml(メインウィンドウのUIファイル)
　┗MainWindow.xaml.vbファイル(メインファイル)

タイトル画像を表示する

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

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

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:colorVbWPF"
        mc:Ignorable="d"
        Title="Color" Height="900" Width="1800">
    <Grid x:Name="RootGrid">
        <Grid x:Name="TitleGrid" Background="White">
            <Image
                Source="images/Title.png"
                Width="447"
                Height="190"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                MouseLeftButtonUp="Title_MouseLeftButtonUp" />
        </Grid>
        <Canvas x:Name="ImageCanvas" />
    </Grid>
</Window>

【サンプルコードの解説】
Windowタグの属性はおまじないのようなものです。Title属性にタイトルを、Height属性にウィンドウの高さを、Width属性にウィンドウの幅をセットします。
GridタグはHTML5でいうdivタグのような見えないレイアウト矩形を表します。
Imageタグはタイトル画像を等倍で画面中央に配置し、マウス左ボタンが離されたら"Title_MouseLeftButtonUp"メソッドを呼び出します。
Canvasタグに色ブロックを複数描画します。

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

Class MainWindow
    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub Title_MouseLeftButtonUp(sender As Object, e As MouseButtonEventArgs)
    End Sub
End Class

【サンプルコードの解説】
「MainWindow」クラスはMainWindow.xamlのUIを操作します。
「New」コンストラクタでMainWindow.xamlを読み込み(InitializeComponent)ます。
「Title_MouseLeftButtonUp」メソッドはタイトル画面がマウス左ボタンのクリックが離されたら呼ばれます。