RPGツクールMVでWindowに画像(Image)を貼り付ける方法

この記事では、RPGツクールMVのプラグイン開発にて、Windowに画像を貼り付ける方法を解説する。

Windowに画像を貼り付ける方法

以下のようにImageManager.loadBitmapから画像データを取得して、this.contents.bltで描画をすればよい。 サンプルコードではWindow_Baseを継承しているが、どのWindowでも同じようにできる。

class Window_Sample extends Window_Base {

    constructor(x, y, width, height, img_path) {
        super(x, y, width, height);
        this._img_path = img_path;
        this.refresh();
    }

    refresh() {
        const img = ImageManager.loadBitmap('img/pictures/', this._img_path, 0, true);

        img.addLoadListener(() => {
            this.contents.blt(img, 0, 0, img.width, img.height, drawX, drawY, drawWidth, drawHeight);
        });  
    }
}

その後は、任意のSceneのcreateメソッド内などで、refreshメソッドを実行するなどをすればよい。

this.contents.blt について

実際に画像を描画する処理はthis.contents.bltにて行うが、この引数が多くわかりにくい。

this.contentsとはBitmapクラスのインスタンスだが、bltメソッドは以下のように定義されている。

/**
* Block Transfer (ブロック転送)処理をするメソッド。
*
* @method blt
* @param {Bitmap} source 描画元のビットマップ
* @param {Number} sx 描画元のx座標
* @param {Number} sy 描画元のy座標
* @param {Number} sw 描画元の幅
* @param {Number} sh 描画元の高さ
* @param {Number} dx 描画先のx座標
* @param {Number} dy 描画先のy座標
* @param {Number} [dw=sw] 描画先での幅(省略時は元の幅)
* @param {Number} [dh=sh] 描画先での高さ(省略時は元の高さ)
*/
Bitmap.prototype.blt = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {};

実際の処理はコアスクリプトを読むと良い。