ICTメディア編集U 2025年12月19日
【参考】サイコロのプログラムへのグラフィック表示の追加
前回までに,サイコロを模擬するシミュレーションのプログラムとして,ボタンを押すことによって,ルーレットのように画面にサイコロの目の値をランダムに表示させ,また,ボタンを押すとサイコロが止まって値が表示されるような,動きのあるプログラムを作成しました.
ボタンが押されるまで繰り返しサイコロの目を表示するには,プログラムの中で繰り返しの処理が必要となり、タイマー関数を使用しました。
さらに、以下のようにサイコロの目として,画像を表示させることを追加しました。.
電子サイコロを以下のように作成していきましょう。
1)Visual Basicを起動します。
a. ディスクトップ上の「スタート」メニューの「Visual Studio 2022」(もしくは各自インストールしたソフト)を立ち上げる。
b.
ウインドウが開いたら,メニューバーの「ファイル」、「新規作成」、「プロジェクト」の順に選択して開く。
新しいプロジェクトの種類は,「Visual Basic ディスクトップ」,テンプレートは「Windowsフォームアプリケーション」,プロジェクト名は「dice1」にして,「OK」ボタンをクリックします.
2)先週と同じく,ツールボックスのLabelやButtonを使って,以下のようなフォームをデザインします.Labelはサイコロの目の数が表示されますので,字の大きさなどもプロパティで変更しておきましょう.

3)フォームのデザインができたら,「サイコロを振る」ボタンをクリックして,コードエディタで乱数を発生させる命令を書き込みます.このとき,表示させるのは,Label1.Textになります.乱数を用いて,1〜6までの整数をランダムに発生させるようにします. 「終了」ボタンも終了命令を書き込みます.
例) Private Sub
Button1_Click(ByVal
sender As System.Object, ByVal e As System.EventArgs)
Handles Button1.Click
Label1.Text = Int(Rnd() * 6 + 1)
End Sub
Private Sub
Button2_Click(ByVal
sender As System.Object, ByVal e As System.EventArgs)
Handles Button2.Click
End
End Sub
4)サイコロをここまで入力をおえたら,実行してみましょう.

5)上記のプログラムを実行してみて、気がついたことがありますか。プログラムを終了しサイコロを振ってみてください.
プログラムを終了して再度サイコロを振ると先ほどと同じ順番でサイコロの目が出てきます.すなわち,でたらめの数の出る順番がいつも同じなのです.
これでは、サイコロにはなりません。そこでこれを解決するのがRandomize() という命令です。これは、乱数の関数を使う前に一度だけ実行すれば良い命令です。そのため、フォームがロード(呼び出し)された時にこの命令を実行するようにしましょう。
フォーム部分を選択してクリックします。表示されたコードに、以下のようにRandomize() という命令を加えます。完成したら、実行してみましょう。
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Randomize()
End Sub
入力したら,再度,実行してみましょう.
サイコロを振るというボタンをおすことで,サイコロの目の値がランダムに表示されれば,完成です.また,終了ボタンで終了させ,再度サイコロを振ったときに,同じサイコロの目の繰り返しでないかを確認して下さい.
6)次にまずは,ツールの ButtonのTextを動作に合わせて“サイコロを振る/止める”にしましょう.

7)ツールボックスからTimer(タイマー関数)を選択し,ウインドウ上の適当な位置に配置します.

8)このTimer1のプロパティを設定します.まず,Enabledは,プログラムを起動したときにはタイマー関数を動かさないということで“False”とします.また,Intervalは,サイコロの目の切り換わる時間間隔になりますが,ここでは“20”としておきます.
9)先ほどのプログラムでは,サイコロを振る/止めるボタン(Button1という名前)に,乱数を用いてサイコロの目を表示させるコード(動作命令)を入力しました.今回のプログラムでは,タイマー関数(Timer1という名前)に対して,この動作命令を入力します.これによって,タイマー関数がtrueの時に乱数を発生させるようにします.まずは,Timerをクリックして,プロジェクトエディタウインドウで,編集しましょう.そして,サイコロを振る/止めるボタン(Button 1という名前)には,if文を使って,タイマー関数の動作を書き入れます.終了ボタンも終了命令を書き入れます.

Private Sub Form1_Load(ByVal
sender As System.Object, ByVal e As System.EventArgs)
Handles MyBase.Load
Randomize()
End Sub
Private Sub Timer1_Tick(ByVal
sender As System.Object, ByVal e As System.EventArgs)
Handles Timer1.Tick
Label1.Text = Int(Rnd() * 6 + 1)
End Sub
Private Sub
Button1_Click(ByVal
sender As System.Object, ByVal e As System.EventArgs)
Handles Button1.Click
If (Timer1.Enabled = False)
Then
Timer1.Enabled = True
Else
Timer1.Enabled = False
End If
End Sub
Private Sub Button2_Click(ByVal
sender As System.Object, ByVal e As System.EventArgs)
Handles Button2.Click
End
End Sub
if文では,タイマー関数(Timer1)のEnabledによって,タイマー関数が動作(サイコロの目が回転)していないとき(False)は,Trueとしてサイコロの目の表示をさせ,そうでないとき(True)は,Falseとして動作を止めるようにしています.
10)完成しましたら,動作を確認してみましょう.

11)完成したら,“すべてを保存”で,保存しておきましょう.
ピクチャーボックスを用いた画像の表示と消去:
画像を表示 するには,ツールボックスにあるPictureBoxをフォーム上の適当な位置に配置し,それに対して表示したい画像ファイルを代入することになります.

PictureBoxのプロパティ設定で重要な ものは,Sizeです.
PictureBoxのSizeと表示したい画像のピクセル数を合わせておく必要があります.PictureBoxの Sizeが表示したい画像よりも小さいと全体を表示できません.

ただし,PictureBoxのSizeModeをStretchImageとす ると.PictureBoxのSizeに画像が変形されることになります.

PictureBoxに画像を表示させたい場合 には,以下のように画像のファイル名を指定して,代入します.
PictureBox1.Image = Image.FromFile("C:\g1.jpg")
また,PictureBoxの画像を消去したいときは, 以下のようにIf文を用いて,Nothingを代入します.
If Not (PictureBox1.Image Is Nothing) Then
PictureBox1.Image.Dispose()
PictureBox1.Image = Nothing
End If
演 習
先ほどのサイコロを模擬した電子サイコロのプログラムに以下のような画像を表示するようにします.背景が白地ですので,わかりにくいですが,6つのさいころの目の画像です.各自のPCのVisual Studio 2019のフォルダにダウンロードして保存してください.(ファイル名は、s1.gif〜s6.gifです。)
ダウンロードをVisual Studio 2022のフォルダの下のProjectsにした場合には、
X:\Documents\Visual Studio 2022\Projects\s1.gif
が呼び出す先になります。
※皆さんが各自のPCにダウンロードしてお使いの場合には、コンピュータ上のフォルダは「C:\Users\****\source\repos」などとして作成されるかと思います(****はユーザ名など)。
ダウンロードしたソフトや場所により、フォルダの位置や名前が異なりますので、ご注意ください。各自のインストール先によって、保存先を変える必要がありますので、ご注意下さい。





“dice2”という名前で先ほどのプログラムが入っていますが,このフォ ルダを丸ごとコピーして,フォルダ名を“dice3”と変え ておきましょう. このフォルダの“dice2.vbproj”を開きます.
1)まずは,ツールの PictureBoxを 適当な位置に配置します.

2)今回のサイコロの目の画像は,100x100のサイズですので,PictureBoxのプロパティでサイズを100, 100にしておきましょう.

3)あとは,タイマー関数で,さいころの目がランダムでLabel1.Textに表示されているところに,If文を用い て,それぞれの数値にあう画像を表示させるようにします.終了ボタンには,一応,画像を消去する命令を書き入れます.画像の消去ボタンを作成してもかまい ません.

Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick
Label1.Text = Int(Rnd() * 6 + 1)
If (Label1.Text = 1) Then
PictureBox1.Image = Image.FromFile("X:\Documents\Visual Studio 2022\Projects\s1.gif")
ElseIf (Label1.Text = 2) Then
PictureBox1.Image = Image.FromFile("X:\Documents\Visual Studio 2022\Projects\s2.gif")
ElseIf (Label1.Text = 3) Then
PictureBox1.Image = Image.FromFile("X:\Documents\Visual Studio 2022\Projects\s3.gif")
ElseIf (Label1.Text = 4) Then
PictureBox1.Image = Image.FromFile("X:\Documents\Visual Studio 2022\Projects\s4.gif")
ElseIf (Label1.Text = 5) Then
PictureBox1.Image = Image.FromFile("X:\Documents\Visual Studio 2022\Projects\s5.gif")
ElseIf (Label1.Text = 6) Then
PictureBox1.Image = Image.FromFile("X:\Documents\Visual Studio 2022\Projects\s6.gif")
End If
End Sub
ファイル名のフォルダ指定の部分は,各自の画像ファイル(s1.gifなど)の所在する場所に修正してください.
Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
If Not (PictureBox1.Image Is Nothing) Then
PictureBox1.Image.Dispose()
PictureBox1.Image = Nothing
End If
End
End Sub
4)完成しましたら,動作を確認してみましょう.

5)すべてを保存で,保存しておきましょう.
前回のプログラムは、GIFの画像ファイルを、貼り付ける形で、画像を用いました。
今回は、サイコロの目の値を、グラフィック表示で、きれいに描くことに挑戦してください.
加藤のページへ | ICTメディア編集U | グラフィックスを用いたプログラムの作成 | グラフィックを用いたシミュレーションプログラム練習