ICTメディア編集U 20251219

 

【参考】サイコロのプログラムへのグラフィック表示の追加

 

前回までに,サイコロを模擬するシミュレーションのプログラムとして,ボタンを押すことによって,ルーレットのように画面にサイコロの目の値をランダムに表示させ,また,ボタンを押すとサイコロが止まって値が表示されるような,動きのあるプログラムを作成しました.

ボタンが押されるまで繰り返しサイコロの目を表示するには,プログラムの中で繰り返しの処理が必要となり、タイマー関数を使用しました。

さらに、以下のようにサイコロの目として,画像を表示させることを追加しました。.

 

電子サイコロを以下のように作成していきましょう。

1)Visual Basicを起動します。 

a.    ディスクトップ上の「スタート」メニューのVisual Studio 2022」(もしくは各自インストールしたソフト)を立ち上げる。

b.    ウインドウが開いたら,メニューバーの「ファイル」、「新規作成」、「プロジェクト」の順に選択して開く。

 

新しいプロジェクトの種類は,Visual Basic ディスクトップ」,テンプレートはWindowsフォームアプリケーション」,プロジェクト名はdice1にして,「OK」ボタンをクリックします.

 

2)先週と同じく,ツールボックスのLabelButtonを使って,以下のようなフォームをデザインします.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)次にまずは,ツールの ButtonTextを動作に合わせて“サイコロを振る/止める”にしましょう.

 

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

 

この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です.

PictureBoxSizeと表示したい画像のピクセル数を合わせておく必要があります.PictureBox Sizeが表示したい画像よりも小さいと全体を表示できません.

 

ただし,PictureBoxSizeModeをStretchImageとす ると.PictureBoxSizeに画像が変形されることになります.

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つのさいころの目の画像です.各自のPCVisual Studio 2019のフォルダにダウンロードして保存してください.(ファイル名は、s1.gifs6.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 | グラフィックスを用いたプログラムの作成  | グラフィックを用いたシミュレーションプログラム練習