ツクールMZでメニューのレイアウト周りのカスタマイズをするためのまとめ

ツクールMZでレイアウト周りのカスタマイズをするために必要な知識をまとめていく。

ツクールMZでのメニューのレイアウトの実装について

ツクールMZではメニューの実装は以下のような形式になっていることが多い。 例としてScene_Menuを見ていく。

メニューはウィンドウの集合体ともいえる構成をしているが、それぞれのウィンドウの作成とそのウィンドウの幅や高さ、位置を指定する メソッドが1対1で用意されているのがポイント。

例えば、メインメニューのコマンドウィンドウ（装備とかセーブとかのリスト）では、 createCommandWindowとcommandWindowRectのメソッドが用意されている。

Scene_Menu.prototype.createCommandWindow = function() {
    const rect = this.commandWindowRect();
    const commandWindow = new Window_MenuCommand(rect);
    commandWindow.setHandler("item", this.commandItem.bind(this));
    // 以下略
    this.addWindow(commandWindow);
    this._commandWindow = commandWindow;
};

Scene_Menu.prototype.commandWindowRect = function() {
    const ww = this.mainCommandWidth();
    const wh = this.mainAreaHeight() - this.goldWindowRect().height;
    const wx = this.isRightInputMode() ? Graphics.boxWidth - ww : 0;
    const wy = this.mainAreaTop();
    return new Rectangle(wx, wy, ww, wh);
};

もし、ウィンドウの表示を変更したければ、commandWindowRectをカスタマイズしてあげればよい。

commandWindowRectの実装について

これからは、commandWindowRectを詳しく見ていく。

Scene_Menu.prototype.commandWindowRect = function() {
    const ww = this.mainCommandWidth();
    const wh = this.mainAreaHeight() - this.goldWindowRect().height;
    const wx = this.isRightInputMode() ? Graphics.boxWidth - ww : 0;
    const wy = this.mainAreaTop();
    return new Rectangle(wx, wy, ww, wh);
};

まずは、mainComamndWidthについて。 これはScene_Baseで実装されている。

Scene_Base.prototype.mainCommandWidth = function() {
    return 240;
};

このmainCommandWidthは至る所で使われている。 もし、サイズを変更したい場合は、変更したいウィンドウでoverrideするのがよいだろう。

そして、mainAreaTopとmainAreaHeight。

メインエリアとは、helpウィンドウの領域と、ボタンエリアの領域以外の部分。 (ボタンエリアとは、スマホとかで仮想ボタンを表示するエリアとなる。PCであれば0になる)

Scene_MenuBase.prototype.mainAreaTop = function() {
    if (!this.isBottomHelpMode()) {
        return this.helpAreaBottom();
    } else if (this.isBottomButtonMode()) {
        return 0;
    } else {
        return this.buttonAreaBottom();
    }
};

Scene_MenuBase.prototype.mainAreaBottom = function() {
    return this.mainAreaTop() + this.mainAreaHeight();
};

Scene_MenuBase.prototype.mainAreaHeight = function() {
    return Graphics.boxHeight - this.buttonAreaHeight() - this.helpAreaHeight();
};

そして、helpウィンドウの高さは以下のように実装されている。

Scene_MenuBase.prototype.helpAreaHeight = function() {
    return this.calcWindowHeight(2, false);
};

`

calcWindowHeightというメソッドが出てきた。 このメソッドは、Scene_Baseで実装されている。

Scene_Base.prototype.calcWindowHeight = function(numLines, selectable) {
    if (selectable) {
        return Window_Selectable.prototype.fittingHeight(numLines);
    } else {
        return Window_Base.prototype.fittingHeight(numLines);
    }
};

`

さらにfittingHeightというメソッド。 これはWindow_Baseを見るとわかる。

Window_Base.prototype.fittingHeight = function(numLines) {
    return numLines * this.itemHeight() + $gameSystem.windowPadding() * 2;
};

そして、以下のように実装されている。

Window_Base.prototype.lineHeight = function() {
    return 36;
};

Window_Base.prototype.itemWidth = function() {
    return this.innerWidth;
};

Window_Base.prototype.itemHeight = function() {
    return this.lineHeight();
};

ちなみに、このfittingHeightやitemWidth ,itemHeightは ウィンドウのレイアウトを決定するのに至る所で使われているメソッドなので、もし自作プラグインでカスタマイズする場合は 必ず使う場所になるだろう。