マップ上でのウインドウ表示に関する質問（解決済み）

[ビービー]

マップ上で戦闘時のステータスウインドウ（パーティメンバー全員の名前、HP、MP、TPをキャラごとに横一行で表示されたウインドウ）を表示したいと思い、色々な方のプラグインを見ながら挑戦してみたのですが、何が間違っているのかわからず解決しようがないので質問させてください。
コトノハさんのブログ記事をもとにrpg_windows.jsの5439行以降を抜粋しながら下のコードを作成してみたんですがいったい何がどうダメなのでしょうか？
おそらく何もかもがダメな気がするんですが解決方法も教えていただけるとありがたいです。
よろしくお願いします。

コード: 全て選択

(function() {

	// マップ上にウィンドウ表示するよ宣言
	var Scene_map_start = Scene_Map.prototype.start;
	Scene_Map.prototype.start = function() {
		Scene_map_start.call(this);
	    this._InfoWindow = new Window_Info();
	    this.addWindow(this._InfoWindow);
	};
    var _Scene_Map_update = Scene_Map.prototype.update;
    Scene_Map.prototype.update = function() {
        _Scene_Map_update.call(this);
        this._InfoWindow.setText();
    };
	
	// ここからメニューウィンドウ作り始まります。
	function Window_Info() {
        this.initialize.apply(this, arguments);
        }
        Window_Info.prototype = Object.create(Window_Selectable.prototype);
        Window_Info.prototype.constructor = Window_Info;

        Window_Info.prototype.initialize = function() {
            var width = this.windowWidth();
            var height = this.windowHeight();
            var x = Graphics.boxWidth - width;
            var y = Graphics.boxHeight - height;
        Window_Selectable.prototype.initialize.call(this, x, y, width, height);
        this.refresh();
        this.openness = 0;
	};
	
	// ウィンドウに載せる内容
	Window_Info.prototype.refresh = function() {
	    this.contents.clear();
		this.changeTextColor(this.textColor(16));
                this.drawIcon(210, 1, 1);
		this.drawActorName(actor, rect.x + 0, rect.y, 150);
                this.drawActorIcons(actor, rect.x + 156, rect.y, rect.width - 156);
                this.drawActorHp(actor, rect.x + 0, rect.y, 108);
                this.drawActorMp(actor, rect.x + 123, rect.y, 96);
                this.drawActorTp(actor, rect.x + 234, rect.y, 96);

[奏ねこま]

ご提示されているソースコードは全部ではないようなので、見える範囲での指摘となりますが、

1. Window_SelectableはwindowWidth、windowHeightという関数を持っていません。

　Window_BattleStatusを参考にして、windowWidth関数とwindowHeight関数を実装してください。

2. 「this.openness = 0;」は「開いていない状態」

　this.openness = 255;としてください。これで「完全に開いた状態」になります。

以上、参考になれば幸いです。

[ビービー]

@こまさんご返信ありがとうございます。
1でおっしゃられてる部分は↓の事なのかなと思いコピペしてみたんですがどうでしょうか？

コード: 全て選択

Window_BattleStatus.prototype.windowWidth = function() {
    return Graphics.boxWidth - 192;
};

Window_BattleStatus.prototype.windowHeight = function() {
    return this.fittingHeight(this.numVisibleRows());
};

Window_BattleStatus.prototype.numVisibleRows = function() {
    return 4;
};

Window_BattleStatus.prototype.maxItems = function() {
    return $gameParty.battleMembers().length;
};

Window_BattleStatus.prototype.refresh = function() {
    this.contents.clear();
    this.drawAllItems();
};

Window_BattleStatus.prototype.drawItem = function(index) {
    var actor = $gameParty.battleMembers()[index];
    this.drawBasicArea(this.basicAreaRect(index), actor);
    this.drawGaugeArea(this.gaugeAreaRect(index), actor);
};

Window_BattleStatus.prototype.basicAreaRect = function(index) {
    var rect = this.itemRectForText(index);
    rect.width -= this.gaugeAreaWidth() + 15;
    return rect;
};

Window_BattleStatus.prototype.gaugeAreaRect = function(index) {
    var rect = this.itemRectForText(index);
    rect.x += rect.width - this.gaugeAreaWidth();
    rect.width = this.gaugeAreaWidth();
    return rect;
};

Window_BattleStatus.prototype.gaugeAreaWidth = function() {
    return 330;
};

2はそのまま255に変更いたしました。

上記2点をやってみたのですが「actor is not defined]というエラーになってしまいます。
またどこがダメなのか教えていただけるとありがたいですよろしくお願いします。
あと全ソースコードを書いておきます。

コード: 全て選択

//=============================================================================
// InfoWindow.js
//=============================================================================

/*:
 * @plugindesc 情報表示ウィンドウをメニュー画面に追加するプラグイン
 * @author Me
 *
 * @help 情報表示ウィンドウをメニュー画面上に追加します。
 *
 */

(function() {

	// マップ上にウィンドウ表示するよ宣言
	var Scene_map_start = Scene_Map.prototype.start;
	Scene_Map.prototype.start = function() {
		Scene_map_start.call(this);
	    this._InfoWindow = new Window_Info();
	    this.addWindow(this._InfoWindow);
	};
    var _Scene_Map_update = Scene_Map.prototype.update;
    Scene_Map.prototype.update = function() {
        _Scene_Map_update.call(this);
        this._InfoWindow.setText();
    };
	
	// ここからメニューウィンドウ作り始まります。
	function Window_Info() {
        this.initialize.apply(this, arguments);
        }
        Window_Info.prototype = Object.create(Window_Selectable.prototype);
        Window_Info.prototype.constructor = Window_Info;

        Window_Info.prototype.initialize = function() {
            var width = this.windowWidth();
            var height = this.windowHeight();
            var x = Graphics.boxWidth - width;
            var y = Graphics.boxHeight - height;
        Window_Selectable.prototype.initialize.call(this, x, y, width, height);
        this.refresh();
        this.openness = 255;
	};
	
	Window_Info.prototype.windowWidth = function() {
            return Graphics.boxWidth - 192;
        };

        Window_Info.prototype.windowHeight = function() {
            return this.fittingHeight(this.numVisibleRows());
        };

        Window_Info.prototype.numVisibleRows = function() {
            return 4;
        };

        Window_Info.prototype.maxItems = function() {
            return $gameParty.battleMembers().length;
        };

        Window_Info.prototype.refresh = function() {
        this.contents.clear();
        this.drawAllItems();
        };

        Window_Info.prototype.drawItem = function(index) {
            var actor = $gameParty.battleMembers()[index];
            this.drawBasicArea(this.basicAreaRect(index), actor);
            this.drawGaugeArea(this.gaugeAreaRect(index), actor);
        };

        Window_Info.prototype.basicAreaRect = function(index) {
            var rect = this.itemRectForText(index);
            rect.width -= this.gaugeAreaWidth() + 15;
            return rect;
        };

        Window_Info.prototype.gaugeAreaRect = function(index) {
            var rect = this.itemRectForText(index);
            rect.x += rect.width - this.gaugeAreaWidth();
            rect.width = this.gaugeAreaWidth();
            return rect;
        };

        Window_Info.prototype.gaugeAreaWidth = function() {
            return 330;
        };

        // ウィンドウに載せる内容
	Window_Info.prototype.refresh = function() {
	    this.contents.clear();
		this.drawActorName(actor, rect.x + 0, rect.y, 150);
                this.drawActorIcons(actor, rect.x + 156, rect.y, rect.width - 156);
                this.drawActorHp(actor, rect.x + 0, rect.y, 108);
                this.drawActorMp(actor, rect.x + 123, rect.y, 96);
                this.drawActorTp(actor, rect.x + 234, rect.y, 96);
	};
	
	// フォントサイズ
	Window_Info.prototype.standardFontSize = function() {
    	return 20;
    };
	// ウィンドウの透明度
	Window_Info.prototype.standardBackOpacity = function() {
    	return 255;
	};
    // ウィンドウの余白
	Window_Info.prototype.standardPadding = function() {
    	return 18;
	};
	
})();

[ビービー]

ちょっと関数について調べたので少しいじったんですが全然わからずです・・・。
いじった後のものを書いておきます。
どなたか問題点がわかる方ご教授お願いします。

コード: 全て選択

(function() {

	// マップ上にウィンドウ表示するよ宣言
	var Scene_map_start = Scene_Map.prototype.start;
	Scene_Map.prototype.start = function() {
		Scene_map_start.call(this);
	    this._InfoWindow = new Window_Info();
	    this.addWindow(this._InfoWindow);
	};
    var _Scene_Map_update = Scene_Map.prototype.update;
    Scene_Map.prototype.update = function() {
        _Scene_Map_update.call(this);
        this._InfoWindow.setText();
    };
	
	// ここからメニューウィンドウ作り始まります。
	function Window_Info() {
        this.initialize.apply(this, arguments);
        }
        Window_Info.prototype = Object.create(Window_Selectable.prototype);
        Window_Info.prototype.constructor = Window_Info;

        Window_Info.prototype.initialize = function() {
            var width = this.windowWidth();
            var height = this.windowHeight();
            var x = Graphics.boxWidth - width;
            var y = Graphics.boxHeight - height;
        Window_Selectable.prototype.initialize.call(this, x, y, width, height);
        this.refresh();
        this.openness = 255;
	};
	
	Window_Info.prototype.windowWidth = function() {
            return Graphics.boxWidth - 192;
        };

        Window_Info.prototype.windowHeight = function() {
            return this.fittingHeight(this.numVisibleRows());
        };

        Window_Info.prototype.numVisibleRows = function() {
            return 4;
        };

        Window_Info.prototype.maxItems = function() {
            return $gameParty.battleMembers().length;
        };

        Window_Info.prototype.refresh = function() {
            this.contents.clear();
            this.drawAllItems();
        };

        Window_Info.prototype.drawItem = function(index) {
            var actor = $gameParty.battleMembers()[index];
            this.drawBasicArea(this.basicAreaRect(index), actor);
            this.drawGaugeArea(this.gaugeAreaRect(index), actor);
        };

        Window_Info.prototype.basicAreaRect = function(index) {
            var rect = this.itemRectForText(index);
            rect.width -= this.gaugeAreaWidth() + 15;
            return rect;
        };

        Window_Info.prototype.gaugeAreaRect = function(index) {
            var rect = this.itemRectForText(index);
            rect.x += rect.width - this.gaugeAreaWidth();
            rect.width = this.gaugeAreaWidth();
            return rect;
        };

        Window_Info.prototype.gaugeAreaWidth = function() {
            return 330;
        };

        // ウィンドウに載せる内容
        Window_Info.prototype.refresh = function() {
           this.contents.clear();
        };

        Window_Info.prototype.drawBasicArea = function(rect, actor) {
           this.drawActorName(actor, rect.x + 0, rect.y, 150);
           this.drawActorIcons(actor, rect.x + 156, rect.y, rect.width - 156);
        };

        Window_Info.prototype.drawGaugeArea = function(rect, actor) {
            if ($dataSystem.optDisplayTp) {
                this.drawGaugeAreaWithTp(rect, actor);
            } else {
                this.drawGaugeAreaWithoutTp(rect, actor);
            }
        };

        Window_Info.prototype.drawGaugeAreaWithTp = function(rect, actor) {
            this.drawActorHp(actor, rect.x + 0, rect.y, 108);
            this.drawActorMp(actor, rect.x + 123, rect.y, 96);
            this.drawActorTp(actor, rect.x + 234, rect.y, 96);
        };

        Window_Info.prototype.drawGaugeAreaWithoutTp = function(rect, actor) {
            this.drawActorHp(actor, rect.x + 0, rect.y, 201);
            this.drawActorMp(actor, rect.x + 216,  rect.y, 114);
        };

	
	// フォントサイズ
	Window_Info.prototype.standardFontSize = function() {
    	return 20;
        };
	// ウィンドウの透明度
	Window_Info.prototype.standardBackOpacity = function() {
    	return 255;
	};
        // ウィンドウの余白
	Window_Info.prototype.standardPadding = function() {
    	return 18;
	};
	
})();

[Trb]

コード: 全て選択

   var _Scene_Map_update = Scene_Map.prototype.update;
    Scene_Map.prototype.update = function() {
        _Scene_Map_update.call(this);
        this._InfoWindow.setText();
    };

の部分ですが、_InfoWindowはsetText()というメソッドを持っていないのでエラーになっているようです。

ビービー様が書いたコードで、ウインドウの中身を描画するメソッドはdrawItem()だと思うので、
上の部分をこう書き換えてみたところ

コード: 全て選択

    var _Scene_Map_update = Scene_Map.prototype.update;
    Scene_Map.prototype.update = function() {
        _Scene_Map_update.call(this);
        for(var i = 0; i < $gameParty.battleMembers().length; i ++){
            this._InfoWindow.drawItem(i);
        }
    };

こういう表示になりました。

無題.png (395.21 KiB) 閲覧された回数 5968 回

これでビービー様が想定したものになっているでしょうか？

[Trb]

あっとすみません、これだけだとrefresh()がどこからも呼ばれていないので数値の変化が正常に表示されないですね。
for～　の前にthis._InfoWindow.refresh();と入れて下さい。

コード: 全て選択

    var _Scene_Map_update = Scene_Map.prototype.update;
    Scene_Map.prototype.update = function() {
        _Scene_Map_update.call(this);
        this._InfoWindow.refresh();
        for(var i = 0; i < $gameParty.battleMembers().length; i ++){
            this._InfoWindow.drawItem(i);
        }
    };

もしくは一番最初の形のままで、setText()というメソッドを新しく定義するのでもいいです。
そちらの方がコトノハ様のブログで公開されているものに近いかもしれません。
その場合は元のコードは何も書き直さずに適当な位置にこれを追加です。

コード: 全て選択

 Window_Info.prototype.setText = function(){
	this.refresh();
        for(var i = 0; i < $gameParty.battleMembers().length; i ++){
            this.drawItem(i);
        }
};
 

[ビービー]

Trbさんありがとうございます。
おっしゃられているやり方でやってみたところうまく動作しました。
色々なやり方があるんですね。勉強になりました。
本当にありがとうございます。

表題の件は解決したのですが、実際表示してみたところ画面が余っていたのでどうせなら何か表示させようと思い立ち、レベルと次のレベルまでの経験値を表示させてみたのですが、Lvと数字の間がなぜかかなり空いてしまいまして、どうすればもっとこの隙間を縮めることができますでしょうか？
解決しているのに追加で質問して申し訳ないんですが、よろしくお願いします。

コード: 全て選択

// ウィンドウに載せる内容
        Window_Info.prototype.refresh = function() {
           this.contents.clear();
        };

        Window_Info.prototype.drawBasicArea = function(rect, actor) {
            var expTotal = TextManager.expTotal.format(TextManager.exp);
            var expNext = TextManager.expNext.format(TextManager.level);
            var value1 = actor.currentExp();
            var value2 = actor.nextRequiredExp();
            if (actor.isMaxLevel()) {
                value1 = '-------';
                value2 = '-----';
           }
           this.drawActorName(actor, rect.x + 0, rect.y, 150);
           this.drawActorLevel(actor, rect.x + 120, rect.y, 150);
           this.changeTextColor(this.systemColor());
           this.drawText('Next ', rect.x + 250, rect.y, 150);//
           this.resetTextColor();
           this.drawText(value2, rect.x + 300, rect.y, 150);//
           this.drawActorIcons(actor, rect.x + 350, rect.y, rect.width - 156);
        };

[Trb]

それは、レベルの描画に使われているdrawActorLevelというメソッドを見るとこうなっています。

コード: 全て選択

Window_Base.prototype.drawActorLevel = function(actor, x, y) {
    this.changeTextColor(this.systemColor());
    this.drawText(TextManager.levelA, x, y, 48);
    this.resetTextColor();
    this.drawText(actor.level, x + 84, y, 36, 'right');
};

ここの5行目、this.drawText(actor.level, x + 84, y, 36, 'right');の
x + 84 というのがその隙間の幅なので、これを小さくすればいいわけですが、
直接ここを書き換えると同じメソッドを使っている他の部分まで表示が変わってしまいます。
なのでWindow_Info用のdrawActorLevelメソッドを新しく定義する必要があります。

上のメソッドの名前を見ると、Window_Base.prototype ～ と書かれていますね？（クラス名）
Window_InfoクラスはWindow_Baseクラスを継承しているため、Window_Baseにあるメソッドを共有することが
出来るのですが、Window_Infoクラスに同じ名前のメソッドを定義するとそちらを使うようになります。

なので、上のメソッドの名前だけ変えて

コード: 全て選択

Window_Info.prototype.drawActorLevel = function(actor, x, y) {
    this.changeTextColor(this.systemColor());
    this.drawText(TextManager.levelA, x, y, 48);
    this.resetTextColor();
    this.drawText(actor.level, x + 84, y, 36, 'right');
};

というものを新しく追加して下さい。
そしたらこちらの x + 84 の部分を丁度いい大きさに変更すればいいです。

[ビービー]

Trbさん詳しく教えていただきありがとうございます！
いい感じの隙間になりました。
まだもう少しいじろうと思っているんですが、これにて解決とさせていただきます。

また何かつまづいたときにお力をお貸しいただけると幸いです。
本当にありがとうがございました。