スプライト描画
レンダラーが描画を行う方法には、これまでに扱ってきた直接描画の他に、 スプライト描画という方法が存在します。ここでは、このスプライト描画について説明します。
スポンサーリンク
スプライト描画
スプライト描画とは、本来ゲームなどでの2DCG 全盛期に、ハードウェアで実装されていたスプライト描画という機能を、 ソフトウェア的に実装したものです。 スプライト描画の概念は、アニメ映像の制作過程における、 セル画の概念と非常によく似ています。 具体的には、まず描画する図形や画像の数だけ、 スプライト（またはスプライト）と呼ばれる「層」をレンダラーに登録しておきます。 そして、描画時にそれらのスプライトをレンダラーで重ねて合成し、1 枚の絵を生成します。
スプライト描画が特に威力を発揮するのは、 アニメーション処理などを行う時です。 例えば、アニメーションの中に、動く図形（や画像）と動かない図形があったとしましょう。 この場合、1 回の画面に表示する絵を直接描画で用意すると、まず背景をクリアし、 そして全ての図形をdraw系関数で描画しなければなりません。そこでスプライト描画を使用すると、 最初に全ての図形をスプライトとして登録しておき、あとは毎回の描画時に、 動かしたいスプライトだけを動かせば済むので、プログラムの記述が簡単になりますし、 処理速度の面でも有利となります。
スプライト描画と直接描画は、組み合わせて使用する事も可能です。 それにはレンダラーを複数用意し、あるレンダラーの描画したグラフィックスデータを、 別のレンダラーにスプライトとして登録する、またはdrawGraphics で描き込むなどの方法を使用します。 適材適所でそれぞれの描画方法を組み合わせる事で、効率的なプログラミングが可能となります。
スプライトの基本操作
直接描画と異なり、スプライトはプログラム実行中に動かしたり、 色を変えたりなど、動的に活用します。 そこで、具体的なスプライトの生成を扱う前に、 スプライトを動的に活用するための基本操作について述べておきます。
スプライトの生成
実際のスプライトには様々な種類のものがありますが、それらは全てnew〜Sprite 関数で生成し ます。〜の部分にはスプライトの種類に固有の名称が入ります。具体的な生成は次章で扱います。
- 関数仕様 -この関数は、スプライトを生成し、そのスプライトに固有の識別番号を返します。
スプライトの登録
生成したスプライトは、レンダラーに登録しなければ描画されません。 レンダラーにスプライトを登録するには、mountSprite 関数を使用します。
- 関数仕様 -最初の引数SpriteID には、登録するスプライトのスプライトID を指定します。 スプライトID とは、スプライトに割り振られる識別番号で、 後に述べるスプライト生成関数が戻り値として返します。 続く引数rendererID には、登録先レンダラーのID を指定します。
スプライトの描画
レンダラーにすべてのスプライトを登録したら、 それらのスプライトを重ね合わせて合成し、1 枚のグラフィックスに描画する必要があります。 これには paintGraphics2D 関数を使用します。
- 関数仕様 -引数のrendererIDには、レンダラーのIDを指定します。 この関数をコールするまで、スプライトの合成は行われないのでご注意ください。
各種スプライト
スプライトには、線や幾何学図形を描画するもの、 テキストを描画するもの、画像を描画するものなど、様々な種類のものが存在します。 以下では、各種スプライトの生成と使用方法を扱います。
点スプライト
点スプライトを生成するには、newPointSprite 関数を使用します。
- 関数仕様 -引数x, y には点の座標を、radius には点の半径を指定します。
線スプライト
線スプライトを生成するには、newLineSprite 関数を使用します。
- 関数仕様 -引数x1, x2 には始点の座標を、x2, y2 には終点の座標を指定します。
長方形スプライト
長方形スプライトを生成するには、newRectangleSprite 関数を使用します。
- 関数仕様 -引数x, y には左上頂点の座標を、幅と高さを指定します。 最後の引数fill は、true の場合に塗りつぶし描画、false の場合に境界線のみの描画となります。
楕円スプライト
楕円スプライトを生成するには、newEllipseSprite 関数を使用します。
- 関数仕様 -引数x, y には左上頂点の座標を、幅と高さを指定します。 ここで指定した頂点領域に内接する楕円が描画されます。 最後の引数fill は、true の場合に塗りつぶし描画、false の場合に境界線のみの描画となります。
多角形スプライト
多角形スプライトを生成するには、newPolygonSprite 関数を使用します。
- 関数仕様 -引数x[ ], y[ ] には、多角形を構成する頂点の座標を、配列で指定します。最後の引数fill は、true の場合に塗りつぶし描画、false の場合に境界線のみの描画となります。
折れ線スプライト
折れ線スプライトを生成するには、newPolylineSprite 関数を使用します。
- 関数仕様 -引数x[ ], y[ ] には、多角形を構成する頂点の座標を、配列で指定します。
テキストスプライト
テキストスプライトを生成するには、newTextSprite 関数を使用します。
- 関数仕様 -最初の引数rendererID には、レンダラーのID を指定します。続く引数x, x には、テキスト始点のアンダーライン（下線）の座標を指定します。座標は画面左上を原点( 0, 0 )とし、右方向にX 軸、下方向にY 軸で指定します。最後のlineWidth とlineHeight には、テキストの行幅と行間隔を指定します。描画時に行幅を超えた長いテキストは、自動で改行されて次の行に描画されます。
フォントサイズの設定
テキストの描画に使用するフォントの大きさを変更したい場合は、setSpriteFontSize 関数を使用します。
- 関数仕様 -最初の引数SpriteID には、スプライトのID を指定します。続く引数fontSize には、フォントの大きさをpt（ポイント）単位で指定します。
pt というのはフォントの大きさを指定する一般的な単位で、画面表示する際に一つの基準となるのは大体12pt 前後でしょう。10pt だとやや細かい文字、15pt だと少し大きめの文字となります。ここで注意しなければならないのは、1pt が何ピクセルに対応するかというのは環境によって異なるという点です。著しく異なる事はありませんが、一文字あたり数ピクセルずれる事はよくあります。従って、テキストを描画する際は、あまりシビアではなく、ある程度ずれる事を想定したレイアウトをする事が推奨されます。
画像スプライト
画像スプライトを生成するには、newImageSprite 関数を用します。
- 関数仕様 -int x, int y, int width, int height, int graphicsID
)
引数x, x には、画像を描画する左上頂点の座標を、width, height には幅と高さを指定します。最後の引数graphicsID には、描画するグラフィックスデータのID を指定します。
引数に指定するグラフィックスIDには、GraphicsライブラリのnewGraphics( string fileName )関数で画像ファイルから読み込んだものや、別のレンダラーで描画したものなどが利用できます。
プログラム例
それでは、上で扱った各種描画関数を使用してみましょう。以下のように記述し、実行してみてください。
なお、画像の描画を行う場合は、プログラムと同じフォルダに「Test.png」という名前のPNG 形式画像ファイルを置いてから実行してください。
このプログラムを実行すると、白いウィンドウが表示され、その上に様々な図形が表示されます。
※文字に使用されるフォントは、環境によって異なります。フォントを明示したい場合にはsetSpriteFont( int SpriteID, string fontName )関数を使用してください。
