[ 前へ | 目次 | 次へ ]
Japanese English

直接描画

レンダラーが描画を行う方法には、直接描画とスプライト描画の2 通りが存在します。この章では直接描画を扱います。

スポンサーリンク


直接描画

直接描画とは、グラフィックスデータに線や幾何学図形などを直接描画していく、 単純な描画方法です。直接描画では、描画関数をコールするたびに、 グラフィックスデータ上に図形が描画されていき、すでに描画されていた箇所と重なると上描きされます。 ちょうど画用紙の上にペンで絵を書いていくような手順に似ています。

直接描画は、使い方が素直でわかりやすく、自由度も高い、便利な方式です。VCSSLでの2D描画も、恐らく大抵の用途では直接描画を使用する事になります。

一方で、例えば「色々なものが、それぞれアニメーションで動く」といった場合だと、毎時刻の画面を直接描画でゼロから描くのは、処理が必要以上に複雑になってしまう場合もあります。その場合は、後の章で扱うスプライト描画を使用した方が便利な場合もあります

描画色の設定

直接描画を行う前に、まず描画する色を指定します。これにはsetDrawColor 関数を使用します。

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

引数は以下の通りです:

  • rendererID: レンダラーのIDを指定します。
  • red, green, blue, alpha: 描画色の色成分を指定します。 色成分はRGBA形式(すぐ後で解説)で、それぞれ 0 〜 255 の範囲の値を指定します。

この setDrawColor 関数は、描画色を変更したいタイミングでコールします。 コール後、この関数で設定した色で直接描画が行われます。 再度コールすると、それ以降は新しい色で直接描画が行われます。

RGBA形式とは

RGBA 形式とは、色の三原色である赤(Red)、緑(Green)、青(Blue)の色成分に、 アルファ値(Alpha)を加えた形式です。 アルファ値は色の透明度を表す数値で、0 で完全透明になり、最大にすると不透明になります。

それぞれの色成分からの色の合成は、加法混色によって行われます。 これは光の重ね合わせと同じ混色方式であり、 絵の具の混ぜ合わせ(減法混色)では無い事にご注意ください。 例として:

  • (赤,緑,青) = ( 255, 255, 255 )は、黒ではなく白になります。
  • (赤,緑,青) = ( 255, 255, 0 ) は黄色になります。
  • (赤,緑,青) = ( 0, 255, 255 ) は鮮やかな水色(シアン)になります。
  • (赤,緑,青) = ( 255, 0, 255 ) はマゼンタ(ピンクっぽい紫色)になります。

描画関数のコール

描画色の設定が完了したら、実際にグラフィックスデータに図形などを描画していきます。 これには描画関数をコールします。

描画関数は、レンダラーに描画を指示するための関数で、 以下に列挙するように、描画する図形に応じて様々な種類のものが存在します。

点の描画

点を描画するには、drawPoint 関数を使用します。

- 関数の形式 -
void drawPoint (
  int rendererID,
  int x, int y, int radius
)

引数は以下の通りです:

  • rendererID: レンダラーのID を指定します。
  • x, y: 点の中心の座標を指定します。
  • radius: 点の半径を指定します。

線の描画

線を描画するには、drawLine 関数を使用します。

- 関数の形式 -
void drawLine (
  int rendererID,
  int x1, int y1, int x2, int y2
)

引数は以下の通りです:

  • rendererID: レンダラーのID を指定します。
  • x1, y1: 始点の座標を指定します。
  • x2, y2: 終点の座標を指定します。

長方形の描画

長方形を描画するには、drawRectangle 関数を使用します。

- 関数の形式 -
void drawRectangle (
  int rendererID,
  int x, int y, int width, int height
  bool fill
)

引数は以下の通りです:

  • rendererID: レンダラーのID を指定します。
  • x, y: 左上頂点の座標を指定します。
  • width, height: 幅と高さを指定します。
  • fill: true の場合に塗りつぶし描画、false の場合に境界線のみの描画となります。

楕円の描画

楕円(だえん)を描画するには、drawEllipse 関数を使用します。

- 関数の形式 -
void drawEllipse (
  int rendererID,
  int x, int y, int width, int height
  bool fill
)

引数は以下の通りです:

  • rendererID: レンダラーのID を指定します。
  • x, y: 左上頂点の座標を指定します。
  • width, height: 幅と高さを指定します。ここで指定した頂点領域に内接する楕円が描画されます。
  • fill: true の場合に塗りつぶし描画、false の場合に境界線のみの描画となります。

多角形の描画

多角形を描画するには、drawPolygon 関数を使用します。

- 関数の形式 -
void drawPolygon (
  int rendererID,
  int x[ ], int y[ ],
  bool fill
)

引数は以下の通りです:

  • rendererID: レンダラーのID を指定します。
  • x[], y[]: 多角形を構成する頂点の座標を、配列で指定します。
  • fill: true の場合に塗りつぶし描画、false の場合に境界線のみの描画となります。

折れ線の描画

折れ線を描画するには、drawPolyline 関数を使用します。

- 関数の形式 -
void drawPolyline (
  int rendererID,
  int x[ ], int y[ ],
  bool fill
)

引数は以下の通りです:

  • rendererID: レンダラーのID を指定します。
  • x[], y[]: 多角形を構成する頂点の座標を、配列で指定します。

最初の引数rendererID には、レンダラーのID を指定します。続く引数x[ ], y[ ] には、多角形を構成する頂点の座標を、配列で指定します。

テキストの描画

テキストを描画するには、drawText 関数を用します。

- 関数の形式 -
void drawText (
  int rendererID,
  int x, y, int linewidth, int lineheight
)

引数は以下の通りです:

  • rendererID: レンダラーのID を指定します。
  • x, y: テキスト始点のアンダーライン(下線)の座標を指定します。座標は画面左上を原点( 0, 0 )とし、右方向にX 軸、下方向にY 軸で指定します。
  • lineWidth, lineHeight: テキストの行幅と行間隔を指定します。描画時に行幅を超えた長いテキストは、自動で改行されて次の行に描画されます。

フォントサイズの設定

テキストの描画に使用するフォントの大きさを変更したい場合は、setDrawFontSize 関数を使用します。

- 関数の形式 -
void setDrawFontSize ( int rendererID, int fontSize )

引数は以下の通りです:

  • rendererID: レンダラーのID を指定します。
  • fontSize: フォントの大きさをpt(ポイント、すぐ下で説明)単位で指定します。

pt というのはフォントの大きさを指定する一般的な単位で、画面表示する際に一つの基準となるのは大体 12pt 前後でしょう。 10pt だとやや細かい文字、15pt だと少し大きめの文字となります。ここで注意しなければならないのは、1pt が何ピクセルに対応するかというのは環境によって異なるという点です。 著しく異なる事はありませんが、一文字あたり数ピクセルずれる事はよくあります。 従って、グラフィックスデータ内にテキストを描画する際は、あまりシビアではなく、ある程度ずれる事を想定したレイアウトをする事が推奨されます。

画像の描画

画像を描画するには、drawImage 関数を用します。

- 関数仕様 -
void drawImage (
  int rendererID,
  int x, y, int width, int height
  int graphicsID
)

引数は以下の通りです:

  • rendererID: レンダラーのID を指定します。
  • x, y: 画像を描画する左上頂点の座標を指定します。
  • width, height: 画像の幅と高さを指定します。
  • graphicsID: 描画するグラフィックスデータのID を指定します。

最初の引数rendererID には、レンダラーのID を指定します。続く引数x, x には、画像を描画する左上頂点の座標を、width, height には幅と高さを指定します。最後の引数graphicsID には、描画するグラフィックスデータのID を指定します。

引数に指定するグラフィックスID には、Graphics ライブラリのnewGraphics( stringfileName )関数で画像ファイルから読み込んだものや、別のレンダラーで描画したものなどが利用できます。

プログラム例

それでは、上で扱った各種描画関数を使用してみましょう。以下のように記述し、実行してみてください。

なお、画像の描画を行う場合は、プログラムと同じフォルダに「Test.png」という名前のPNG 形式画像ファイルを置いてから実行してください(こちらからダウンロードできます)。


import Graphics;
import Graphics2D;
import GUI;

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

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

// 背景色を白に設定してクリア
setGraphics2DColor( rendererID, 255, 255, 255, 255 );
clearGraphics2D( rendererID );


// =========================
// 描画処理 ここから
// =========================


// (0,0)と(100,100)を結ぶ線を描画(赤色)
setDrawColor( rendererID, 255, 0, 0, 255 );
drawLine( rendererID, 0, 0, 100, 100 );


// (100,100)を左上とする(500×300)の長方形を描画(青色)
setDrawColor( rendererID, 0, 0, 255, 255 );
drawRectangle( rendererID, 100, 100, 500, 300, true );


// (100,300) を左上とする(300×200)の楕円を描画(マゼンタ)
setDrawColor( rendererID, 255, 0, 255, 255 );
drawEllipse( rendererID, 100, 300, 300, 200, true );


// 多角形、折れ線スプライト用のx 配列、y 配列を用意
int x[ 3 ];
x[ 0 ] = 100;
x[ 1 ] = 300;
x[ 2 ] = 300;

int y[ 3 ];
y[ 0 ] = 100;
y[ 1 ] = 100;
y[ 2 ] = 300;

// x 配列、y 配列を頂点とする多角形を描画(黄色)
setDrawColor( rendererID, 255, 255, 0, 255 );
drawPolygon( rendererID, x, y, true );


// x 配列、y 配列を頂点とする折れ線を描画(赤色)
setDrawColor( rendererID, 255, 0, 0, 255 );
drawPolyline( rendererID, x, y );


// (300,50)にテキストを描画(黒色)
setDrawFontSize( rendererID, 30 ) ; //文字サイズを30pt に
string text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
setDrawColor( rendererID, 0, 0, 0, 255 );
drawText( rendererID, 300, 50, 250, 35, text );


// 画像ファイル「Test.png」を読み込んで描画
int testGraphics = newGraphics( "Test.png" );
drawImage( rendererID, 300, 100, 300, 300, testGraphics );


// =========================
// 描画処理 ここまで
// =========================


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

このプログラムを実行すると、白いウィンドウが表示され、その上に様々な図形が表示されます。

実行結果
各種描画関数で描き込んだ内容が表示される。

※ 文字に使用されるフォントは、環境によって異なります。 フォントを明示したい場合には setDrawFont( string fontName ) 関数を使用してください。



スポンサーリンク



Japanese English
この階層の目次
RINEARN からのお知らせ
※ VCSSL は RINEARN が開発しています。

VCSSLの最新版をリリース: 外部プログラムとの連携機能を少し強化、他
2025-05-25 - VCSSL 3.4.52をリリースしました。外部プログラム(C言語製の実行ファイル等)との連携機能を少し強化し、文字化け対策やOS判別などを可能にしました。他にも細かい機能追加があります。詳細をお知らせします。

VCSSLの最新版をリリース、Java 24上での非互換な挙動を対処
2025-04-22 - VCSSL 3.4.50をリリースしました。Java 24環境上でのネットワークドライブ関連のファイルパス解決で、従来環境とは異なる挙動が生じていたのを解消しました。詳細をお知らせします。

リニアングラフやVCSSLの最新版をリリース、目盛りの位置や内容を自由に指定可能に!
2024-11-24 - リニアングラフ3D/2Dを更新し、自由な位置に、自由な表記内容の目盛りを描けるようになりました! 併せて、Java言語やVCSSLでの、プログラム制御用APIも拡張しています。詳細をお知らせします。

Exevalator 2.2 をリリース、TypeScript 対応によりWebブラウザ上で動作可能に
2024-10-22 - オープンソースの式計算ライブラリ「Exevalator(エグゼバレータ)」の2.1をリリースしました。新たに TypeScript に対応し、Webブラウザ上での式計算にも使えるようになりました。詳細を解説します。

アシスタントAI作成の舞台裏(その2、作成編)
2024-10-12 - アシスタントAIの作成方法解説の後編です。実際にChatGPTの「GPTs」機能を用いて、アシスタントAIを作成する手順や、独自の知識をもたせたり、精度を出すためのノウハウなどを解説しています。

アシスタントAI作成の舞台裏(その1、基礎知識編)
2024-10-07 - アシスタントAI作成方法解説の前編です。今回はまず、アシスタントAIを作る前に抑えておきたい、基礎知識を延々と解説しています。そもそもLLM型AIとはどんな存在か? RAGとは何か? 等々です。

ソフトの利用をサポートしてくれるアシスタントAIを提供開始!
2024-09-20 - RINEARN製ソフトの使い方の質問応答や、一部作業のお手伝いをしてくれる、アシスタントAIを提供開始しました。ChatGPTアカウントさえあれば、誰でも無料で使用できます。使い方を解説します。

Exevalator 2.1 をリリース、新たに Visual Basic に対応
2024-07-28 - オープンソースの式計算ライブラリ「Exevalator(エグゼバレータ)」の2.1をリリースしました。今回から、新たに Visual Basic(VB.NET)でも使用できるようになりました。詳細を解説します。

関数電卓 RINPn(りんぷん)、Esc キーで計算式の一発クリアが可能に
2024-07-20 - 関数電 RINPn の Ver.1.0.2 をリリースしました。今回から、キーボードの「 Esc 」キーを押すと、入力中の計算式を一発でクリアできるようになりました。詳細を解説します。

Exevalator 2.0 をリリース、互換性に注意が必要なバグ修正が 1 件
2024-07-14 - オープンソースの式計算ライブラリ「Exevalator (エグゼバレータ)」の2.0をリリースしました。今回の更新では、互換性に注意を要する 1 件のバグ修正があります。詳細を解説します。