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

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

[ビットマップ]
Bitmap
このクラスは、画像そのものを表します。
このクラスの機能を使って画像や文字を描画します。
画像クラスは、これ1つしかありませんので、画像を表示するには必ず使用します。
[スプライト]
Sprite
純粋に画像のみを表示するクラスです。
画像の拡大・縮小や回転など、特殊な効果を与えられます。
Window
ウィンドウスキンを設定することで、ウィンドウを表示すると同時に
指定された画像をウィンドウ内に表示します。
ただし、実際のサイズより 32px 小さいものしか表示できず、
画像のサイズが大きいと切れて、縁に三角のマークがつきます。
Window クラスは画像を額に入れて表示するようなイメージですね。
Plane
このクラスは、ちょっと特殊で、指定した画像を敷き詰めて表示します。
マップのようにスクロール(ループ)することもできます。
[ビューポート]
Viewport
スプライトのクラスを1つのグループにまとめ、表示範囲の設定を行うクラスです。
このクラスは使わなくても画像を表示することは可能です。
2.画像の表示
では、実際に表示してみたいと思います。
画面に表示するには、表示するためのオブジェクトにビットマップオブジェクトを渡すだけです。
それぞれ次のようなプロパティが用意されています。
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 で切ってしまえば表示も消えるんですけどね。。。
3.ビューポートの割り当て
割り当て方法は、ビットマップを関連付ける方法と変わりません。
しかし、オブジェクトの作成時に引数に渡すことができます。
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)
ビューポートが割り当てられると、スプライトの座標系はビューポート内でのものとなります。
x座標50、z座標100のスプライトに、x座標50、z座標30のビューポートを割り当てると、
実際に表示される座標は、x座標100、z座標30となります。
スプライトの座標を変更するとどうなるかも確認してみてください。

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

イメージとしては、次のような感じになります。
うさぎがスプライトで、青い四角がビューポートです。
スプライトにビューポートを設定すると、青い部分のみが画面に表示されます。

左上の数字が座標を表しているので、ビューポートをドラッグして、位置を変更してみてください。
スプライトも一緒に移動しますが、スプライトの座標は変わりません。

今度は、うさぎをドラッグしてみてください。
スプライトの座標が、ビューポート内でのものだと分かると思います。
4.転送元原点
ox と oy は、転送元原点を設定できます。
初期状態では、0で左上を指します。画像の赤点のところです。
画像の表示位置として指定するx座標とy座標は、この赤点の画面上の位置です。
そして、ox と oy は画像上の位置を指します。
もし、画像サイズと同じにすると右下を基準に位置を調整するようになります。

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

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

Window クラスでは、ウィンドウ内容の転送元原点を設定します。
基本的には同じことですが、ウィンドウの位置を変更するためのものではなく、
ウィンドウ内に表示している文字や画像を移動させるために使用します。
ウィンドウの内容をスクロールさせるということですね。
5.今回のポイント
・Bitmap は、画像そのものであり、それだけは画面に表示されない。
・画像を表示するには、Sprite, Window, Plane のいずれかを使用する。
・文字や画像は、Bitmap オブジェクトに描画している。
・dispose メソッドの定義されているクラスのインスタンスは使用後解放する。
・ビューポートを設定すると、スプライトの座標はビューポート内のものとなる。