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

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

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

Small Basic 入門

13.グラフィックス機能を使ってみよう

 

これまではテキストの文字や数字を TextWindow に表示してきました。
Small Basic では図形を描画する機能もあります。
その描画には GraphicsWindow を使います。
どのようなことができるのか見ていきましょう。

 

グラフィックスを使うために

まず、GraphicsWindow.Show() と入力して実行してみましょう。
すると白い背景のウィンドウが開きます。

 

small basic のグラフィックスを使うために

 

このウィンドウに図形などが描画されることになります。
今までの黒い背景のウィンドウはテキスト専用だった訳です。

 

次のようにプログラムを変更して実行しましょう。
今度はグラフィックスウィンドウとテキストウィンドウの2つが開きます。

テキストウィンドウとグラフィックスウィンドウ

TextWindow を使えばテキスト専用のウィンドウに
GraphicsWindow を使えばグラフィックス専用のウィンドウに表示されます。

 

 

グラフィックスウィンドウはテキストウィンドウと違い、ウィンドウの幅 Width や
高さ Height 、背景色 BackgroundColor を指定することができます。
当然、タイトル Title も指定できます。

グラフィックスウィンドウは幅や高さや背景色を指定できる

指定しなければデフォルトの状態で表示されます。

 

 

線を引いてみよう

それでは線を引いてみます。プログラミング的には直線を描くと言った方が
正しいのかもしれません。
まぁ、ここは初心者向けのサイトなのでどちらでもいいですね。

 

次のプログラムを入力して実行しましょう。

直線を描く

DrawLine() を使うことで、2本の黒い線が描けました。
カッコの中の数は座標です。
ウィンドウの中のどの位置に線を描くか指定しているのです。

DrawLine(始点x座標、始点y座標、終点x座標、終点y座標)

始点と終点の2つのxy座標を指定して線を描いてます。

 

ウィンドウの左上が座標(0,0)となります。

ラインの引き方

 

DrawLine() を使って様々な座標から線を描いてみて下さい。
これからグラフィックスを使う上で座標の認識はとても重要です。

 

 

線に色を付けてみよう

線に色を付ける方法です。
線を描く前に PenColor に色を代入します。

 

線に色を付けるプログラム

 

 

RGB(red 赤、green 緑、blue 青)を16進数の文字列で指定する方法もあります。

RGBで色を指定する方法

 

 

RGBを0から255までの値で色を指定する方法もあります。

0から255の値で色を指定する

 

 

ランダムな色で指定する方法もあります。
GetRandomcolor() は実行の度に違う色を出してきます。

ランダムな色で指定する方法

 

 

線の太さを変えてみよう

線の太さを指定する方法です。
線を描く前に PenWidth を指定します。

 

線の太さを指定する方法

 

 

長方形を描いてみよう

長方形の描き方には2種類あります。
中を塗らない DrawRectangle と、中を塗りつぶす FillRectangle です。

 

長方形の描き方

 

 

長方形を描く時のパラメータは(x座標、y座標、幅、高さ)です。
座標は長方形の左上を基点とします。

長方形の描き方

 

 

色を付けて描く方法です。
DrawRectangle には PenColor
FillRectangle には BrushColor
を使って色を付けます。

長方形に色を付けて描く方法

ちなみに DrawRectangle には PenWidth で線の太さを指定することも可能です。

 

 

楕円を描いてみよう

楕円の描き方には2種類あります。
中を塗らない DrawEllipse と、中を塗りつぶす FillEllipse です。

 

楕円を描く方法

 

 

楕円を描く時のパラメータは(x座標、y座標、幅、高さ)です。
座標は長方形と同じく左上を基点とします。
次のプログラムを見てください。

楕円と長方形を描く

楕円を描く DrawEllipse と長方形を描く DrawRectangle を同じパラメータで
実行したものです。
どちらも基点は左上であり、幅と高さの指定方法が同じなので
このように絵が重なります。

 

 

色を付けて描く方法です。
DrawEllipse には PenColor
FillEllipse には BrushColor
を使って色を付けます。
ちなみに DrawEllipse には PenWidth で線の太さを指定することも可能です。

楕円に色を付けて描く方法

上のプログラムのパラメータを見てください。
幅と高さ、どちらも 100 を指定しています。
絵を見て分かるように正円になります。
幅と高さを同じにすることで正円が描けるのです。