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

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

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

Small Basic 入門

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

 

これまでテキストの文字や数字を 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 を指定しています。
絵を見て分かるように正円になります。
幅と高さを同じにすることで正円も描けるのです。