「DJGL-図形の描画」の編集履歴（バックアップ）一覧はこちら

「DJGL-図形の描画」(2016/10/06 (木) 23:16:35) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

*図形の描画
----
この章では図形の描画について解説します。とりあえず画面になにか表示させないことには始まりません。
とりあえず図形を書いてみましょう。

以下のソースコードを打ち込んでください。[[DJGL-環境構築]]で打ち込んだプログラムを流用しています。
変更箇所は
 //------------
 //変更点開始
 /////////////////
で始まり
 /////////////////
 //変更点終了
 //------------
で終わっている箇所です。
実行結果に関係ないコメントの修正とかは変更点扱いにはしていません。

**ソースコード
----

#highlight(linenumber,java){{
//------------
//変更点開始
/////////////////
import java.awt.Color;
/////////////////
//変更点終了
//------------
import densan.s.game.drawing.Drawer;
import densan.s.game.manager.GameManager;
import densan.s.game.manager.Updatable;


public class TestGame implements Updatable {

	//初期化
	public TestGame() {
		// まだ使わない
	}
	//描画
	@Override
	public void draw(Drawer d) {
		//------------
		//変更点開始
		/////////////////
		//色の設定
		//青に
		d.setColor(Color.BLUE);
		//塗りつぶした四角形を描画(X座標、Y座標、幅、高さ)
		d.fillRect(100, 200, 100, 200);
		//色を赤に
		d.setColor(Color.RED);
		//円の輪郭を描画(X座標、Y座標、半径)
		d.drawCircle(200, 400, 100);
		/////////////////
		//変更点終了
		//------------

	}
	//更新
	@Override
	public void update() {
		// まだ使わない

	}
	//初期化
	public static void main(String[] args) {
		//ゲームを管理するクラスを取得
		GameManager gm = GameManager.getInstance();
		//このメソッドでウインドウを表示する
		//引数はそれぞれ(幅, 高さ, タイトルバーに表示する文字)
		gm.createFrame(800, 600, "テストゲーム");
		//更新と描画を担うオブジェクトを設定
		gm.setUpdatable(new TestGame());
	}

}

}}

このコードを実行して以下の様な画面が出てきたら成功です。
青の四角形と赤の円が描画されています。

#ref(draw01.png)


主に書き加えたのはdrawメソッドの中身です。(25~33行目)
drawメソッドでは引数で渡されたDrawerのメソッドを呼び出すことで画面に図形や画像を描画できます。

-27・31行目のDrawerのsetColorメソッドは図形を描画する色を指定します。
--引数に描画したい色を指定します。
--引数の型は4行目でインポートしているjava.awt.Colorです。javaの標準ライブラリに含まれています。
---Colorというクラスは複数あるのでインポート先を間違えないようにしてください。
--Colorは本来RGB値を指定して色を作成しますが、Colorクラスには標準で簡単な色の定数が用意されています。コードで使っているのもその定数です。Color.色の名前とすることで基本的な色は使えます。
---定数として用意されているのは以下の通りです。小文字の定数もありますが、Javaの命名規則上定数は大文字にするべきなので大文字のものを使ってください。(小文字は互換性のために残されてるだけ)
----BLACK
----BLUE
----CYAN
----DARK_GRAY
----GRAY
----GREEN
----LIGHT_GRAY
----MAGENTA
----ORANGE
----PINK
----RED
----WHITE
----YELLOW
---Colorについてもっと詳しいことは[[>>https://docs.oracle.com/javase/jp/8/docs/api/java/awt/Color.html]]に載っています。
--色を指定しないと前の色のままで描画されます。ただしdrawメソッドが終了すると色が白(というか背景色)に初期化されるので毎回色は設定してください。

-29・33行目のfillRectとdrawCircleがそれぞれ四角形と円を描画しています。
--基本的に「fill」だと塗りつぶし、「draw」だと輪郭を描画します。
---例えば29行目のfillRectをdrawRectに変更してみましょう。四角形から塗りつぶしが無くなるはずです。
--引数の意味はコメントに書いてあるとおりです。
--画面上の座標系は&bold(){左上が(0,0)}になります。数学の座標とは上下が逆なので気をつけてください。
--描画は上書き方式なので、あとから描画したものが上にきます。なので円が前面に存在します。
--
--図形の基本的な描画メソッドは以下のとおりです。
---drawRect・fillRect
----矩形を描きます。
----引数は(X座標、Y座標、幅、高さ)
----左上の頂点が引数で指定した座標になります。
---drawOval・fillOval
----引数で指定した矩形に収まるような楕円を描きます。
----正方形なら円になります。
----引数は&u(){矩形の}(X座標、Y座標、幅、高さ)
----矩形の左上の頂点が引数で指定した座標になります。
---drawCircle・fillCircle
----円を描きます。
----引数は(X座標、Y座標、半径)
----円の&u(){中心}が引数で指定した座標になります。
---drawLine
----直線を描きます。
----引数は(始点X、始点Y、終点X、終点Y、太さ)
---drawArc
----円弧を描きます。drawOvalで描画される楕円を切り取った用な感じです。
----引数は矩形の(X座標、Y座標、幅、高さ、始点角度、終点角度)
----これについての詳しいことは[[javadoc>>http://kiki33.bitbucket.org/densan/s/game/drawing/Drawer.html#drawArc-double-double-double-double-double-double-]]を見てください。
-Drawerに関するもっと詳しいことは [[>>http://kiki33.bitbucket.org/densan/s/game/drawing/Drawer.html]] を見てください。

**まとめ
----
今回は図形の描画について解説しました。ゲームでは主に画像を使うのであまり出番はありませんが、デバッグや簡単なエフェクト、情報表示に使ったり出来ます。

*図形の描画
----
この章では図形の描画について解説します。とりあえず画面になにか表示させないことには始まりません。
とりあえず図形を書いてみましょう。

以下のソースコードを打ち込んでください。[[DJGL-環境構築]]で打ち込んだプログラムを流用しています。
変更箇所は
 //------------
 //変更点開始
 /////////////////
で始まり
 /////////////////
 //変更点終了
 //------------
で終わっている箇所です。
実行結果に関係ないコメントの修正とかは変更点扱いにはしていません。

**ソースコード
----

#highlight(linenumber,java){{
//------------
//変更点開始
/////////////////
import java.awt.Color;
/////////////////
//変更点終了
//------------
import densan.s.game.drawing.Drawer;
import densan.s.game.manager.GameManager;
import densan.s.game.manager.Updatable;


public class TestGame implements Updatable {

	//初期化
	public TestGame() {
		// まだ使わない
	}
	//描画
	@Override
	public void draw(Drawer d) {
		//------------
		//変更点開始
		/////////////////
		//色の設定
		//青に
		d.setColor(Color.BLUE);
		//塗りつぶした四角形を描画(X座標、Y座標、幅、高さ)
		d.fillRect(100, 200, 100, 200);
		//色を赤に
		d.setColor(Color.RED);
		//円の輪郭を描画(X座標、Y座標、半径)
		d.drawCircle(200, 400, 100);
		/////////////////
		//変更点終了
		//------------

	}
	//更新
	@Override
	public void update() {
		// まだ使わない

	}
	//初期化
	public static void main(String[] args) {
		//ゲームを管理するクラスを取得
		GameManager gm = GameManager.getInstance();
		//このメソッドでウインドウを表示する
		//引数はそれぞれ(幅, 高さ, タイトルバーに表示する文字)
		gm.createFrame(800, 600, "テストゲーム");
		//更新と描画を担うオブジェクトを設定
		gm.setUpdatable(new TestGame());
	}

}

}}

このコードを実行して以下の様な画面が出てきたら成功です。
青の四角形と赤の円が描画されています。

#ref(draw01.png)


主に書き加えたのはdrawメソッドの中身です。(25~33行目)
drawメソッドでは引数で渡されたDrawerのメソッドを呼び出すことで画面に図形や画像を描画できます。

-27・31行目のDrawerのsetColorメソッドは図形を描画する色を指定します。
--引数に描画したい色を指定します。
--引数の型は4行目でインポートしているjava.awt.Colorです。javaの標準ライブラリに含まれています。
---Colorというクラスは複数あるのでインポート先を間違えないようにしてください。
--Colorは本来RGB値を指定して色を作成しますが、Colorクラスには標準で簡単な色の定数が用意されています。コードで使っているのもその定数です。Color.色の名前とすることで基本的な色は使えます。
---定数として用意されているのは以下の通りです。小文字の定数もありますが、Javaの命名規則上定数は大文字にするべきなので大文字のものを使ってください。(小文字は互換性のために残されてるだけ)
----BLACK
----BLUE
----CYAN
----DARK_GRAY
----GRAY
----GREEN
----LIGHT_GRAY
----MAGENTA
----ORANGE
----PINK
----RED
----WHITE
----YELLOW
---Colorについてもっと詳しいことは[[>>https://docs.oracle.com/javase/jp/8/docs/api/java/awt/Color.html]]に載っています。
--色を指定しないと前の色のままで描画されます。ただしdrawメソッドが終了すると色が白(というか背景色)に初期化されるので毎回色は設定してください。

-29・33行目のfillRectとdrawCircleがそれぞれ四角形と円を描画しています。
--基本的に「fill」だと塗りつぶし、「draw」だと輪郭を描画します。
---例えば29行目のfillRectをdrawRectに変更してみましょう。四角形から塗りつぶしが無くなるはずです。
--引数の意味はコメントに書いてあるとおりです。
--画面上の座標系は&bold(){左上が(0,0)}になります。数学の座標とは上下が逆なので気をつけてください。
--描画は上書き方式なので、あとから描画したものが上にきます。なので円が前面に存在します。
--
--図形の基本的な描画メソッドは以下のとおりです。
---drawRect・fillRect
----矩形を描きます。
----引数は(X座標、Y座標、幅、高さ)
----左上の頂点が引数で指定した座標になります。
---drawOval・fillOval
----引数で指定した矩形に収まるような楕円を描きます。
----正方形なら円になります。
----引数は&u(){矩形の}(X座標、Y座標、幅、高さ)
----矩形の左上の頂点が引数で指定した座標になります。
---drawCircle・fillCircle
----円を描きます。
----引数は(X座標、Y座標、半径)
----円の&u(){中心}が引数で指定した座標になります。
---drawLine
----直線を描きます。
----引数は(始点X、始点Y、終点X、終点Y、太さ)
---drawArc
----円弧を描きます。drawOvalで描画される楕円を切り取った用な感じです。
----引数は矩形の(X座標、Y座標、幅、高さ、始点角度、終点角度)
----これについての詳しいことは[[javadoc>>http://kiki33.bitbucket.org/densan/s/game/drawing/Drawer.html#drawArc-double-double-double-double-double-double-]]を見てください。
-Drawerに関するもっと詳しいことは [[>>http://kiki33.bitbucket.org/densan/s/game/drawing/Drawer.html]] を見てください。

**まとめ
----
今回は図形の描画について解説しました。ゲームでは主に画像を使うのであまり出番はありませんが、デバッグや簡単なエフェクト、情報表示に使ったり出来ます。
----
#comment_num2