初心者のためのゲームプログラミング入門

プログラミングとゲームの杜

初心者のためのプログラミング入門 & ゲームプログラムの作り方入門

VisualBasic 2015 入門

24.グラフィックで絵を描こう

 

30年以上も前の話、Basic 言語の全盛だった時代がありました。
その理由が「人が理解しやすい命令だったから」というのもありますが、
「グラフィック機能で絵が描ける」というのも大きな要因だったと思います。

今回はリファレンス的な説明になります。

 

グラフィック機能のごく一部を紹介

グラフィックスの機能は表示の要(かなめ)となる部分なので、奥が深いです。
ですからここでは、線や四角、円などを簡単に描く方法だけを説明します。
これが役に立つ情報になるのか、少し疑問です。
現実的な話をすれば、外部の絵描きツールを使って用意した絵や
写真のような画像を用意して、それを貼り付けて使うのが一般的だと思います。
ただ、数学で習うグラフを描いたりするのには適してますね。
アイデアしだいでは色々な使い方ができるのかもしれません。

それでは線、四角、円を描いた次の画像を見てください。
今回はこのような絵を描く方法の説明になります。

 

vb グラフィックスで絵を描く 入門

 

プログラムは次のようになります。

 

vb 四角や丸の描き方

 

 

グラフィックの使い方

まずは実際に使ってみましょう。
新しいプロジェクトを作成してください。
プロジェクト名などは適当でかまいません。

プロジェクトが開いたら Form1 のプロパティを見てください。
そして、イベントボタン(稲妻マーク)をクリックします。
下へスクロールすると Paint という項目があるのでダブルクリックします。

 

vb 線を引く 入門

 

コード編集が開き Form1_Paint が追加されます。
これで Form1 に対する Paint イベントが用意されました。
続けて中に
e.Graphics.DrawLine(Pens.Red, 0, 0, 100, 200)
を入力します。

実行してみましょう。
斜めの赤い線が表示されます。

 

vb 線の引き方 入門

 

 

Paint イベントに描く理由

Paint イベントは再描画が必要なときに呼ばれます。
再描画が必要とは?
ウィンドウが最小化されたのち元のサイズに戻される時や
他のアプリで隠されていた部分が表示される時のことです。

Paint イベントで呼ばれるサブルーチン以外でもグラフィックで絵を描くことは
できますが、一度隠れた部分は消えてしまいます。
次の例は Paint イベントを使わずに描画したものです。
他のアプリが重なっていた部分は、再描画されず消えたままになります。

 

vb paint イベントとは何か

 

 

線を描く

直線を描くには DrawLine を使います。
先ほどのサンプルを例に説明します。
Paint イベントで絵を描くときには e.Graphics. を頭に付けると覚えてください。

 

vb 直線を描く

 

Pens.Red は線の色です。
Pens クラスは幅1の線を描くことができます。
使える色は沢山ありますよ。 [ 色の一覧 ]

少しプログラムを変更して3本の直線を描いてみましょう。

 

vb 3本の直線を描く

 

 

線の太さを変えてみよう

先ほどは幅1の太さで直線を描きました。
では線の太さを指定したい時はどうすればいいのでしょうか。
そのためにはペンを作成する必要があります。
変数を作るように Dim で作成します。
使い終わったら Dispose() を使ってリソースを解放します。

 

vb 線の太さを指定して描く

 

幅5の太さの赤いペンを作ってみました。

次は太さや色を変えてみましょう。
太さは Width 、色は Color を使います。

 

vb ペンの太さや色を変える

 

このように1つのペンで太さと色を変更できます。
実際には、目的に合わせて複数のペンを作成して使うのがいいかもしれません。

 

 

四角を描いてみよう

四角を描いてみましょう。
線だけで描く四角と、中を塗る四角の2つを紹介します。

 

vb 四角を描く方法

 

線だけの四角は Pens を使っているのに対し
中を塗る四角は Brushes を使っていることに注意してください。
数値は 始点x、y、幅、高さ となっています。

線だけの四角は、作成したペンが使えます。
つまり、線の幅を変更できます。

 

 

楕円を描いてみよう

今度は楕円を描いてみましょう。
線だけで描く楕円と、中を塗る楕円の2つを紹介します。

 

vb 円の描き方

 

四角のときと同じく、線だけの楕円は Pens を使っているのに対し
中を塗る楕円は Brushes を使っていることに注意してください。
数値は 始点x、y、幅、高さ となっています。

線だけの楕円は、作成したペンが使え幅を指定できます。

 

今回は、描き方の1つを紹介しました。
沢山の方法を説明しても、使わないのであれば忘れてしまうからです。
もし、これらの機能を使いたいと思うときが来たら
もっと詳しい情報をネットで調べてみてください。