気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【ツクールMV】Window_Selectableをプロトタイプ継承したWindowでピクチャが表示されず悩んだ話

ツクールMVで、CGの閲覧やシーンの視聴を行うための回想用プラグインが ぼちぼちできあがってきました。 (以下画像参照)

f:id:rinne_grid2_1:20151224073023p:plain

プラグイン作成中に、「ウィンドウにピクチャが表示されない問題」で悩んで、 時間を使ってしまったので、備忘録としてメモを残しておきます。

ピクチャが表示されない問題

  • Scene_Recollection

    • Scene_Baseをプロトタイプ継承したオブジェクト
    • 回想モードを選択したり、CGを表示したりする
  • Window_RecList

    • Window_Selectableをプロトタイプ継承したオブジェクト
    • 閲覧したい回想シーンを一覧から選択する
  • ソースコード(ピクチャが表示されない)

    //=========================================================================
    // ■ Scene_Recollection
    //=========================================================================
    // 回想用のシーン関数です
    //=========================================================================
    function Scene_Recollection() {
        this.initialize.apply(this, arguments);
    }

    Scene_Recollection.prototype = Object.create(Scene_Base.prototype);
    Scene_Recollection.prototype.constructor = Scene_Recollection;

    Scene_Recollection.prototype.initialize = function() {
        Scene_Base.prototype.initialize.call(this);
    };

    Scene_Recollection.prototype.create = function() {
        Scene_Base.prototype.create.call(this);
        this.createWindowLayer();
        this.createCommandWindow();
    };


    Scene_Recollection.prototype.createCommandWindow = function() {

        // 回想リスト
        this._rec_list = new Window_RecList(0, 0, Graphics.width, Graphics.height);
        this._rec_list.visible = false;
        this._rec_list.setHandler('ok', this.commandDoRecMode.bind(this));
        this._rec_list.setHandler('cancel', this.commandBackSelectMode.bind(this));
        this.addWindow(this._rec_list);


    };

    //-------------------------------------------------------------------------
    // ● 開始処理
    //-------------------------------------------------------------------------
    Scene_Recollection.prototype.start = function() {
        Scene_Base.prototype.start.call(this);

    };


    //=========================================================================
    // ■ Window_RecollectionList
    //=========================================================================
    // 回想またはCGを選択するウィンドウです
    //=========================================================================
    function Window_RecList() {
        this.initialize.apply(this, arguments);
    }

    Window_RecList.prototype = Object.create(Window_Selectable.prototype);
    Window_RecList.prototype.constructor = Window_RecList;

    //-------------------------------------------------------------------------
    // ● 初期化処理
    //-------------------------------------------------------------------------
    Window_RecList.prototype.initialize = function(x, y, width, height) {
        Window_Selectable.prototype.initialize.call(this, x, y, width, height);
        this.windowWidth = width;
        this.windowHeight = height;
        this.select(0);
        this._formationMode = false;
        this.refresh();

    };

    //-------------------------------------------------------------------------
    // ● 組み込み関数カスタマイズ
    //-------------------------------------------------------------------------
    Window_RecList.prototype.maxItems = function() {
        return 3;
    };


    Window_RecList.prototype.maxCols = function() {
        return 2
    };


    Window_RecList.prototype.drawItem = function(index) {

        var rect = this.itemRect(index);

        var bmp = ImageManager.loadPicture("hoge")
        this.contents.blt(bmp, rect.x + 16, rect.y + 4 +text_height,
                this.itemWidth() - 36, this.itemHeight() - 8 - text_height);

    };

Window_RecList.prototype.drawItemで、選択リスト1つ1つの表示内容を定義しています。 hoge.pngというファイルから、Bitmapを作成し、画面に表示する想定ですが、ピクチャが表示されません。

解消方法

  • Sceneクラスのstartメソッドで、対象のウィンドウをrefreshする必要がありました。
    //=========================================================================
    // ■ Scene_Recollection
    //=========================================================================
    // 回想用のシーン関数です
    //=========================================================================
    function Scene_Recollection() {
        this.initialize.apply(this, arguments);
    }

    Scene_Recollection.prototype = Object.create(Scene_Base.prototype);
    Scene_Recollection.prototype.constructor = Scene_Recollection;

    Scene_Recollection.prototype.initialize = function() {
        Scene_Base.prototype.initialize.call(this);
    };

    Scene_Recollection.prototype.create = function() {
        Scene_Base.prototype.create.call(this);
        this.createWindowLayer();
        this.createCommandWindow();
    };


    Scene_Recollection.prototype.createCommandWindow = function() {

        // 回想リスト
        this._rec_list = new Window_RecList(0, 0, Graphics.width, Graphics.height);
        this._rec_list.visible = false;
        this._rec_list.setHandler('ok', this.commandDoRecMode.bind(this));
        this._rec_list.setHandler('cancel', this.commandBackSelectMode.bind(this));
        this.addWindow(this._rec_list);


    };

    //-------------------------------------------------------------------------
    // ● 開始処理
    //-------------------------------------------------------------------------
    Scene_Recollection.prototype.start = function() {
        Scene_Base.prototype.start.call(this);
        // 【!】このrefreshをしないと、ピクチャを表示してくれない
        this._rec_list.refresh();

    };


    //=========================================================================
    // ■ Window_RecollectionList
    //=========================================================================
    // 回想またはCGを選択するウィンドウです
    //=========================================================================
    function Window_RecList() {
        this.initialize.apply(this, arguments);
    }

    Window_RecList.prototype = Object.create(Window_Selectable.prototype);
    Window_RecList.prototype.constructor = Window_RecList;

    //-------------------------------------------------------------------------
    // ● 初期化処理
    //-------------------------------------------------------------------------
    Window_RecList.prototype.initialize = function(x, y, width, height) {
        Window_Selectable.prototype.initialize.call(this, x, y, width, height);
        this.windowWidth = width;
        this.windowHeight = height;
        this.select(0);
        this._formationMode = false;
        this.refresh();

    };

    //-------------------------------------------------------------------------
    // ● 組み込み関数カスタマイズ
    //-------------------------------------------------------------------------
    Window_RecList.prototype.maxItems = function() {
        return 3;
    };


    Window_RecList.prototype.maxCols = function() {
        return 2
    };


    Window_RecList.prototype.drawItem = function(index) {

        var rect = this.itemRect(index);

        var bmp = ImageManager.loadPicture("hoge")
        this.contents.blt(bmp, rect.x + 16, rect.y + 4 +text_height,
                this.itemWidth() - 36, this.itemHeight() - 8 - text_height);

    };

Window_Selectableを継承したWindow_Recollectionの問題かと思って、コードを読んでいましたが、 結局はSceneが悪かったようです。

なお、Bitmapの表示はされないのですが、「テキスト」ならばrefreshしなくとも表示可能でした。