DXライブラリで図形描画してみました

今週のブログ担当の白羽と申します。
私は前回のブログ記事でDXライブラリで簡単なプログラムを作成いたしましたが、
今回も引き続き、DXライブラリの機能の紹介と、簡単なプログラムの作成のお話をしたいと思います。
今回紹介いたしますのは、図形描画の関数についてです。
まずは関数の簡単な紹介をいたします。

序章:関数紹介

DXライブラリの図形描画の関数は以下の6つがあります。
DrawLine 　線を描画
DrawBox 　四角を描画
DrawCircle 　円の描画
DrawOval 　楕円の描画
DrawTriangle 　三角形の描画
DrawPixel　　点の描画
ちなみに、DXライブラリには3D関連の機能もありますが、3D関連の図形描画の関数は今回は扱いません。(というより扱えません)
では、それぞれの関数の例などを見ていきましょう。

1:線を描画する関数DrawLine

宣言　int DrawBox( int x1 , int y1 , int x2 , int y2 ,unsigned int Color , int FillFlag ) ;
引数：x1 , y1　:　描画する線の起点座標
x2 , y2　:　描画する線の終点座標
Color　　:　描く線の色
例：DrawLine( 100 , 100 , 300 , 300 , color );//線を描画
f:id:ipx-writer:20160514111558p:plain

2:四角形を描画する関数DrawBox

宣言 int DrawBox( int x1 , int y1 , int x2 , int y2 ,
　　　　　　　unsigned int Color , int FillFlag ) ;
引数：x1 , y1　:　描画する四角形の左上の頂点座標
x2 , y2　:　描画する四角形の右下＋１の頂点座標
Color　　:　描画する四角形の色
FillFlag :　四角の中身を塗りつぶすか、のフラグ。TRUEで塗りつぶし、FALSEで塗りつぶさない
例：DrawBox( 100 , 100 , 300 , 300 , color , TRUE);//四角を描画
f:id:ipx-writer:20160514111603p:plain

3:円を描画する関数DrawCircle

宣言int DrawCircle( int x , int y , int r , unsigned int Color, int FillFlag ) ;
引数 x , y　:　描く円の中心座標
r　　　:　描く円の半径
Color　:　円の色
FillFlag : TRUE(1の意)で円の中身も塗りつぶし、FALSE(0の意)で輪郭のみ
例:DrawCircle( 100 , 100 ,100 ,color , TRUE ) ;//円を描画
f:id:ipx-writer:20160514111541p:plain

4:楕円を描画する関数DrawOval

宣言 int DrawOval( int x , int y , int rx , int ry , unsigned int Color , int FillFlag ) ;
引数 x , y : 描く楕円の中心座標
rx,ry : 描く楕円のＸ軸に対する半径とＹ軸に対する半径
Color : 楕円の色
例:DrawOval( 200 , 200 ,150 ,100,color , TRUE ) ;//楕円を描画
f:id:ipx-writer:20160514111549p:plain

5:三角形を描画する関数DrawTriangle

宣言 int DrawTriangle( int x1, int y1, int x2, int y2,
　　　　　　　　　　　　　 int x3, int y3, unsigned int Color , int FillFlag ) ;
引数 int x1, y1, x2, y2, x3, y3 : 三角形を描く３つの座標
unsigned int Color : 描画に使う色
int FillFlag : 三角形の中身を塗りつぶすかフラグ
　　　　　　　　　　(TRUE:塗りつぶす FALSE:塗りつぶさない)
例:DrawTriangle( 100 , 100 ,150 ,300,300,50,color , TRUE ) ;//三角形を描画
f:id:ipx-writer:20160514111610p:plain

6:点を描画する関数DrawPixel

宣言 int DrawPixel( int x , int y , unsigned int Color ) ;
引数 x , y :　点を描画する座標
Color :　描画する点の色
例:DrawPixel(100 ,100 , Color ) ;//点を描画
f:id:ipx-writer:20160514112335p:plain

本題:簡単なプログラム作成

それぞれの関数の宣言や例を示したところで、
これらの関数を使って簡単なプログラムを作成してみようと思います。
今回作るのは、任意の点を指定して三角形を描画するプログラムです。
任意の点の決め方は、マウスで左クリックした場所とします。
ロジックとしては、
①マウスで左クリックしたときの座標を取得する。
②取得した座標に点を打つ。(無くても三角形は描画できるが、見やすくなるため採用)
①・②を3回繰り返したら
③これまでに取得した3点の座標を引数としてDrawTriangleを使用する。

となります。では順に考えていきましょう。

①マウスで左クリックしたときの座標を取得する

マウスで左クリックした瞬間の判定と、その時の座標を取得したいと思います。
ちなみに、左クリックした’瞬間’の判定というのは、
仮にマウスの左ボタンを押したままにしたら、いつの間にか3回クリックしたことになっていた、というものを防ぐためのものです。
では、まずは左クリックの判定と座標の取得から。
といっても、実は前回の記事でも使っているので後で例を示すだけとします。
あとは、左クリックした瞬間の判定についてですが、
今回は左クリックしているときは1、していないときは0として考えます。
そして左クリックしているときの1連の流れを図示すると、以下のようになります。
f:id:ipx-writer:20160514113225p:plain
上図では、左から右に時間が経過しているとします。(0s⇒1s⇒2s・・・と時間経過しているイメージ)
このように表した場合、0から1に変わったところだけがマウスを左クリックした瞬間と考えられます。
考えることはまとまったので、プログラムを書くわけですが、
今回のプログラムは比較的短いので後でまとめて示そうと思います。
というわけで、先に

②取得した座標に点を打つ

について考えていきます。
左クリックしたときの座標は①で取得してあるので、その座標を用いて
点を打ちます。点を打つときはDrawPixel関数を使用します。
例：DrawPixel( 100 , 100 , Color ) ;//点を描画する。

あとは、①・②を3回繰り返します。
そうしたら、

③これまでに取得した3点の座標を引数としてDrawTriangleを使用する

について考えます。
ですが、もう座標は取得済みなので
冒頭で紹介した三角形を描画する関数DrawTriangle を使うだけです。

というわけで、ここまでの流れを実際にプログラムとして書いてみました。
ちなみに、変数の宣言は省略します。(変数はすべてint型で宣言しています)
while( ScreenFlip()==0 && ProcessMessage()==0 && ClearDrawScreen()==0 &&gpUpdateKey()==0){ //全体ループ

if( ( GetMouseInput() & MOUSE_INPUT_LEFT ) != 0 )//左クリックした時の処理を記述
{
GetMousePoint( &MouseX , &MouseY ) ;//マウスの位置を取得する。
left_click[1]=1;

if(left_click[0]==0&&left_click[1]==1)//左クリックした瞬間
{
pointX[count]=MouseX;//クリックしたときのX座標(点)
pointY[count]=MouseY;//クリックしたときのY座標(点)
TX[count]=MouseX;//クリックしたときのX座標(三角)
TY[count]=MouseY;//クリックしたときのY座標(三角)
count++;
}
left_click[0]=left_click[1];//前回値に今回値を代入
}
else {left_click[0]=0,left_click[1]=0;}//左クリックしたときの処理end

DrawFormatString( 10, 10, Color, "%d",count ) ;//おまけ
　　　　 left_click[0]=left_click[1];//前回値に今回値を代入
for(i=0;i<2;i++) DrawPixel( pointX[i] , pointY[i] , Color ) ;//点を描画する。

if( Key[ KEY_INPUT_A ] == 1)reset=1;//リセットフラグ
if(reset==1||count==3)break;//Aキーを押すか3回左クリックした
}
　　 DrawTriangle( TX[0], TY[0], TX[1], TY[1], TX[2], TY[2], Color, TRUE ) ;
　ScreenFlip();
　　　　WaitKey();

後は、実行するだけです。
実行したときの画面も張っておきます。

f:id:ipx-writer:20160514113828p:plain
プログラムを開始して最小の画面です。わかりやすいように、左上に現在の左クリックした回数を表示しています。まだプログラム開始直後なので値は0となっています。

f:id:ipx-writer:20160514113441p:plain 　
2回クリックしたところです。見づらいですが、2つ点が描画されています。
DrawPixel関数は描画する点の大きさは変えられないので、DrawPixelで隣接する座標にも点を打って大きく見えるようにしたり、 DrawGraph関数で点の代わりに画像を使ったり見やすくする方法を考える必要があります。その方法はまた別の機会にでも。