ピクセル制御描画

この章では、最も直接的な描画方法である、ピクセル制御描画について扱います。

- 目次 -

ピクセル制御描画

ピクセル制御描画の仕組み

これまで扱ってきた直接描画やスプライト描画は、レンダラーに用意されたペイントツール的な機能を用いて、 図形などを描き込んでいく方式でした。それに対してピクセル制御描画は、 そのような高度な機能は使用せず、グラフィックスデータの保持するピクセル情報を直接的に操作する事により、描画を行う方式です。

ピクセルデータ

ピクセルデータとは、画像上の全てのピクセルにおける色情報を表すデータです。各ピクセルの色情報には、赤（Red）、緑（Green）、青（Blue）、不透明度（Alpha）の4つの成分の値があります。

VCSSL では、ピクセルデータは各色成分ごとに独立に、それぞれ [ 高さ ] × [ 幅 ] の2 次元配列として扱います。 配列のインデックスは[ 縦方向の位置 ][ 横方向の位置 ]となり、 縦方向は上から、横方向は左から数えます。配列の型は int 型で、 そのピクセルにおける色の強度を 0 〜 255 の範囲で保持します。

具体的な例を挙げると：

ピクセルデータの操作

任意のピクセルデータの内容を操作するには、レンダラーの setPixel 関数を使用します。

- 関数の形式 -
void setPixel (
  int rendererID,
  int red[ ][ ], int green[ ][ ], int blue[ ][ ], int alpha[ ][ ]
)

引数は以下の通りです：

ピクセルデータ配列のインデックスは[ 縦方向の位置 ][ 横方向の位置 ]でピクセル位置を指定し、 値はその位置のピクセルにおける色強度（0〜255）を表します。

この関数をコールすると、受け取ったピクセルデータの内容に基づいて、 レンダラーがグラフィックスデータの内容更新を行います。

なお、以下のように、一つの配列で全色成分をまとめて指定する事もできます。

- 関数の形式 -
void setPixel ( int rendererID, int color[ ][ ][ ] )

引数は以下の通りです：

ピクセルデータの取得

現在レンダラーが保持しているグラフィックスデータの内容から、 各色成分のピクセルデータを取得するには、色に応じて以下の 4 つの関数を使用します。

- 関数仕様 -
int[ ][ ] getPixelRed ( int rendererID )
int[ ][ ] getPixelGreen ( int rendererID )
int[ ][ ] getPixelBlue ( int rendererID )
int[ ][ ] getPixelAlpha ( int rendererID )

引数 rendererID には、レンダラーのID を指定します。

これらの関数は上から順に、 それぞれ赤（Red）、緑（Green）、青（Blue）、不透明度（Alpha）成分のピクセルデータを、 int 型の2 次元配列で返します。配列のインデックスは[ 縦方向の位置 ][ 横方向の位置 ]となり、縦方向は上から、横方向は左から数えます。

※ なお、既存の画像ファイルの内容からピクセルデータを取得するには、上記のような2Dレンダラーの関数ではなく、Graphics ライブラリの関数を用いて、グラフィックスリソースから直接取得した方が便利です。

例えば、newGraphics(string filePath) 関数でファイルから読み込んだグラフィックスリソースに対して、下記の関数：

int[][] getGraphicsPixelRed(int graphicsID)

で赤色成分のピクセルデータを取得できます。他の色成分についても同様です。

詳細は、Graphics ライブラリの仕様書 をご参照ください。

プログラム例

実際に簡単な模様のピクセルデータを作成し、描画を行って見ましょう。 以下のように記述し、実行してみてください。 


import Graphics;
import Graphics2D;
import GUI;


// グラフィックスデータとレンダラーの生成
int graphicsID = newGraphics( );
int rendererID = newGraphics2DRenderer( 800, 500, graphicsID );

// 表示画面の生成
int windowID = newWindow( 0, 0, 800, 500, "Hello 2DCG !" );
int labelID = newImageLabel( 0, 0, 800, 500, graphicsID );
mountComponent( labelID, windowID );

// ピクセルデータを作成
int red[ 500 ][ 800 ];
int green[ 500 ][ 800 ];
int blue[ 500 ][ 800 ];
int alpha[ 500 ][ 800 ];


// 各ピクセルの色を設定していく
for( int i=0; i<500; i++ ){
	for( int j=0; j<800; j++ ){

		// 赤色成分: 縦位置が500未満、横位置が300未満の領域のみ塗る
		if( j < 500 && i < 300 ){
			red[ i ][ j ] = 255;
		} else {
			red[ i ][ j ] = 0;
		}

		// 緑色成分: 縦位置が200超〜600未満、横位置が100超〜400未満の領域のみ塗る
		if( 200 < j && j < 600 && 100 < i && i < 400 ){
			green[ i ][ j ] = 255;
		} else {
			green[ i ][ j ] = 0;
		}

		// 青色成分: 縦位置が300超、横位置が200超の領域のみ塗る
		if( 300 < j && 200 < i ){
			blue[ i ][ j ] = 255;
		} else {
			blue[ i ][ j ] = 0;
		}

		// 不透明度（Alpha）は常に完全な不透明にする
		alpha[ i ][ j ] = 255;
	}
}

// ピクセルデータの内容を描画
setPixel( rendererID, red, green, blue, alpha );

// GUI の描画
paintComponent( labelID );
paintComponent( windowID );
Sample.vcssl

このプログラムを実行すると、白いウィンドウが表示され、その上にカラフルな長方形が重なって表示されます。

実行結果
カラフルな長方形が重なって表示されます。