ＲＧＳＳ２講座

画像を表示するためには、以下のような３種類のクラスを使用します。
・画像そのものを指すビットマップのクラス (Bitmap)
・その画像を画面に表示するスプライトのクラス (Sprite, Window, Plane, Tilemap)
・そのスプライトの表示範囲を設定するビューポートのクラス (Viewport)
このうち、ビットマップのクラスとスプライトのクラスは、必須となります。

喩えるなら、ビットマップが画像ファイルで、スプライトがビューアソフトです。
画像ファイルがあっても、それを表示するソフトが無ければ画像が見れないのと同じですね。

[ビットマップ]

Bitmap

このクラスは、画像そのものを表します。
このクラスの機能を使って画像や文字を描画します。
画像クラスは、これ１つしかありませんので、画像を表示するには必ず使用します。

[スプライト]

Sprite

純粋に画像のみを表示するクラスです。
画像の拡大・縮小や回転など、特殊な効果を与えられます。

Window

ウィンドウスキンを設定することで、ウィンドウを表示すると同時に
指定された画像をウィンドウ内に表示します。
ただし、実際のサイズより 32px 小さいものしか表示できず、
画像のサイズが大きいと切れて、縁に三角のマークがつきます。
Window クラスは画像を額に入れて表示するようなイメージですね。

Plane

このクラスは、ちょっと特殊で、指定した画像を敷き詰めて表示します。
マップのようにスクロール(ループ)することもできます。

[ビューポート]

Viewport

スプライトのクラスを１つのグループにまとめ、表示範囲の設定を行うクラスです。
このクラスは使わなくても画像を表示することは可能です。

では、実際に表示してみたいと思います。
画面に表示するには、表示するためのオブジェクトにビットマップオブジェクトを渡すだけです。
それぞれ次のようなプロパティが用意されています。
Sprite#bitmap, Window#contents, Plane#bitmap, Tilemap#bitmaps[index]
今回は、Sprite クラスを使用します。

# ビットマップの準備 (画像を読み込む)
bitmap = Bitmap.new("Graphics/Battlers/Captain")
# スプライトの作成
sprite = Sprite.new
sprite.bitmap = bitmap
Graphics.wait(120)
sprite.bitmap.dispose
sprite.dispose

解放する処理 dispose を行わなくても参照が切れたオブジェクトは自動で解放されるのですが、
基本的に dispose という解放するためのメソッドが用意されているクラスは、
不要になった場合に明示的に解放するようにしています。
わざわざ用意してあるってことは、解放してくれって事ですよね？

スプライトのクラスに関しては、解放しないと画像がずっと表示されたままになっちゃいます。
でも、ビットマップへの参照を nil で切ってしまえば表示も消えるんですけどね。。。

割り当て方法は、ビットマップを関連付ける方法と変わりません。
しかし、オブジェクトの作成時に引数に渡すことができます。

v = Viewport.new(0, 0, 544, 416)
# 初期ビューポートの割り当て
sp = Sprite.new(v)
# 新しいビューポートの割り当て
sp.viewport = Viewport.new(100, 100, 344, 216)

表示範囲を指定するサンプルです。
ビューポートを設定しないと顔グラ全体が表示されますが、
ラルフだけの顔グラを表示するように設定しています。

sp = Sprite.new
sp.bitmap = Cache.face("Actor1")
sp.viewport = Viewport.new(0, 0, 96, 96)

ビューポートが割り当てられると、スプライトの座標系はビューポート内でのものとなります。
ｘ座標５０、ｚ座標１００のスプライトに、ｘ座標５０、ｚ座標３０のビューポートを割り当てると、
実際に表示される座標は、ｘ座標１００、ｚ座標３０となります。
スプライトの座標を変更するとどうなるかも確認してみてください。

また、複数のスプライトに同じビューポートを割り当てることで、スプライトのグループ化を行うこともできます。
ビューポートを操作するだけで、複数のスプライトを移動させたり消したりできるようになります。

ox と oy は、転送元原点を設定できます。
初期状態では、０で左上を指します。画像の赤点のところです。
画像の表示位置として指定するｘ座標とｙ座標は、この赤点の画面上の位置です。
そして、ox と oy は画像上の位置を指します。
もし、画像サイズと同じにすると右下を基準に位置を調整するようになります。

普通は変更する必要はありませんが、拡大縮小するときや
不特定サイズの画像を同じ位置に表示したい場合に変更します。

例えば、左上を基点に拡大すると右下へ大きくなることになります。
中央に表示している場合など、これだと表示位置も変更する必要があります。
もし、中心を基点に拡大すれば、四方に広がるので位置を変更する必要もなくなります。
バラバラのサイズの画像を右寄せで表示したい場合なども右下を基点にしておけば、
どのようなサイズでも位置がズレることはありません。

Window クラスでは、ウィンドウ内容の転送元原点を設定します。
基本的には同じことですが、ウィンドウの位置を変更するためのものではなく、
ウィンドウ内に表示している文字や画像を移動させるために使用します。
ウィンドウの内容をスクロールさせるということですね。