直接描画

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

- 目次 -

直接描画

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

直接描画は、メモリー使用量が少なくて済むので、 描画するものが比較的少なく、かつ静的な内容を描画するのに向いています。 使用方法も手軽で直感的です。

直接描画の弱点として、アニメーションなどで時間あたりの描画頻度が多い場合、 描画速度が低下する事が挙げられます。この弱点は、 特に描画するものが非常に多い場合に顕著となります。 これは、描画するものの個数だけ描画関数をコールしなければならないため、 関数コールの負荷が効いてくるためです。 その場合は、後の章で扱うスプライト描画を使用した方が有利となります。

描画色の設定

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

- 関数仕様 -
void setDrawColor (
  int rendererID,
  int red, int green, int blue, int alpha
)

最初の引数rendererID でレンダラーのID を、 続く引数で描画色の色成分を指定します。 色成分は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, x には点の中心の座標を、radius には点の半径を指定します。 最後の引数fillは、trueの場合に塗りつぶし描画、falseの場合に境界線のみの描画となります。

線の描画

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

- 関数仕様 -
void drawLine (
  int rendererID,
  int x1, int y1, int x2, int y2
)

最初の引数rendererID には、レンダラーのID を指定します。続く引数x1, x2 には始点の座標を、x2, y2 には終点の座標を指定します。

長方形の描画

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

- 関数仕様 -
void drawRectangle (
  int rendererID,
  int x, int y, int width, int height
  bool fill
)

最初の引数rendererID には、レンダラーのID を指定します。続く引数x, y には左上頂点の座標を、幅と高さを指定します。最後の引数fill は、true の場合に塗りつぶし描画、false の場合に境界線のみの描画となります。

楕円の描画

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

- 関数仕様 -
void drawEllipse (
  int rendererID,
  int x, int y, int width, int height
  bool fill
)

最初の引数rendererID には、レンダラーのID を指定します。続く引数x, y には左上頂点の座標を、幅と高さを指定します。ここで指定した頂点領域に内接する楕円が描画されます。最後の引数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[ ] には、多角形を構成する頂点の座標を、配列で指定します。

テキストの描画

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

- 関数仕様 -
void drawText (
  int rendererID,
  int x, y, int linewidth, int lineheight
)

最初の引数rendererID には、レンダラーのID を指定します。続く引数x, x には、テキスト始点のアンダーライン(下線)の座標を指定します。座標は画面左上を原点( 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, x には、画像を描画する左上頂点の座標を、width, height には幅と高さを指定します。最後の引数graphicsID には、描画するグラフィックスデータのID を指定します。

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

プログラム例

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

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

Sample.vcssl

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

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

» 使用方法 / コード解説

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