【解決】装備画面の装備スロット表示部分を2列にするプラグイン

[HinaXNoa]

おはようございます。

件名のとおり、装備画面の装備スロットの表示を2列にできるプラグインを探しております。
添付した画像がわかりやすいかと思います。

現在、画面比率が16:9(1280×720)のゲームを制作しており、きせかえ機能を搭載する予定で
いわゆる｢おしゃれ装備スロット｣を表示したいと思っております。

ですが、デフォルトの状態ではいちいち下にスクロールしなければならず、
プレイヤーの方のやる気が失せてしまう一因になりえるので、今回の質問をさせていただきました。

プラグインや方法を知っている方に、ぜひ情報提供をお願いしたいと思っております。
よろしくお願いいたします。

[basu]

以下のコードで装備スロットを2列にすることができますが、その分表示幅も短くなるためアイテム名が潰れる等の影響が出る可能性があります。
その場合は別途描画処理を行っている「Window_EquipSlot.prototype.drawItem」でアイテム名の幅の調整などを行う必要があります。

コード: 全て選択

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


また、全ての装備スロット画面に影響があるため、装備スロット画面を使用しているプラグインなどにも影響がある可能性がありますので注意してください。

よろしくお願いします。

[HinaXNoa]

basu様、ご回答いただき誠にありがとうございます。

提示していただいたコードにて、理想の装備画面に近い形となりました。
密かに懸念していた、装備名表示の問題に対応するコードも提供いただき、誠にありがとうございます。


追加の質問で大変申し訳無いのですが、
コードを適応した直後のスロットの並び順は
01 02
03 04
05 06...
となっておりますが、これを
01 04
02 05
03 06...
という風に変更することは出来ますでしょうか？
添付した画像をご覧いただければ、分かりやすいと思います。

また、こういったコードはどのように参照されているかも、ぜひお聞きしたいです。

重ね重ねの質問になってしまい大変恐縮です。
厚かましくなければ、ぜひご教授いただきたいと思っております。
よろしくお願いします。

[basu]

スロットの並び順についてはスクリプト内の描画処理を修正するか、直接ツクール内のタイプで順番を合わせる方法の2種類が考えられます。
個人的にはデグレなどのリスクを考慮した場合、直接ツクール内で合わせた方がリスクもなくなるのでそちらをお勧めします。
描画処理の修正をしたい場合、方法はいくつかあると思いますがそのうちの一つをサンプルとして記載します。
ただ、突貫工事で作成したコードなので動作の保証はできません(簡単な動作確認は行っています)
また、他に最善なやり方がある可能性もあります。

コード: 全て選択

(() => {
    "use strict";

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

    Window_EquipSlot.prototype.drawAllItems = function () {
        const items = {};
        let drawIndex = this.topIndex();
        if (this._actor) {
            this._actor.equipSlots().forEach((equipSlot, index) => {
                if (index === this._actor.equipSlots().length / 2) {
                    drawIndex = this.topIndex() + 1;
                }
                const slotName = $dataSystem.equipTypes[equipSlot];
                items[drawIndex] = {};
                items[drawIndex].slotName = slotName;
                items[drawIndex].item = this.itemAt(index);
                drawIndex += 2;
            });
        }

        const topIndex = this.topIndex();
        for (let i = 0; i < this.maxVisibleItems(); i++) {
            const index = topIndex + i;
            if (index < this.maxItems()) {
                this.drawItemBackground(index);
                this.drawItem(index, items);
            }
        }
    };

    Window_EquipSlot.prototype.drawItem = function (index, items) {
        if (this._actor) {
            const slotName = items[index].slotName;
            const item = items[index].item;
            const slotNameWidth = this.slotNameWidth();
            const rect = this.itemLineRect(index);
            const itemWidth = rect.width - slotNameWidth;
            this.changeTextColor(ColorManager.systemColor());
            this.changePaintOpacity(this.isEnabled(index));
            this.drawText(slotName, rect.x, rect.y, slotNameWidth, rect.height);
            this.drawItemName(item, rect.x + slotNameWidth, rect.y, itemWidth);
            this.changePaintOpacity(true);
        }
    };
})();



コードの参照方法はコードを追いながら調査など試行錯誤を行っています。
例えば、今回の場合ではメニュー画面から装備画面へ遷移しているので「Scene_Menu」から装備画面の設定まで順に追ったりしています。
(「Scene_Menu.prototype.onPersonalOk」関数で装備シーン(Scene_Equip)を追加しているので次はScene_Equipを調査するなど)
ある程度慣れてくれば大体の目安がつくようになるので、直接装備スロット画面(Window_EquipSlot)から調査をしたりすることもできるようになると思います。
この辺はプログラミングの技術力次第になるので、個々で技術力を高めるしかないと思います。
プラグインについては公式でも説明がされているので、プラグインを作りたい場合は目を通しておくと良いと思います。

よろしくお願いします。

[HinaXNoa]

basu様、迅速なご返答誠にありがとうございます。

提示していただいたコードで理想の装備画面にできましたが、
装備タイプの最大数を変更すると、不具合が多発してしまうことを確認いたしました。
もちろん、私の言葉足らずが招いた結果だということは承知しております。

将来的に装備タイプの追加や、仕様変更などの可能性があることを考えると、
ツクール側で直接並び順を設定するのが望ましいという結論に至りました。

折角コードを提供していただいたにも関わらず、活用することができず申し訳ないです。

ご教授いただいたコードの参照法を参考に、
関数を作成し、装備スロット名の文字色の変更や横幅の変更など、
簡単なものではありますが実装することができ、自身の成長を実感することができました。

提示していただいたコードも参考にして、今後もプログラミングの探求を行っていきたいと思います。

このトピックの本題である ｢装備スロットを2列で表示する｣ は達成できましたので、
このトピックは解決済みとさせていただきます。
ありがとうございました。

[basu]

すみません。
最大数を奇数にすると次の列への判定部がおかしくなりエラーが発生します。
(最大値の半分を計算する際、最大値が奇数で計算すると少数になるため)
「Math.ceil」で切り上げを行えばエラーはなくなりますが、最大表示数を超えた場合のスクロール処理で別の不具合が発生するためスクロール処理側の修正も必要になるかと思います。(ほかにも修正が必要な個所がある可能性もあります)

解決済みとなっていますが、現状把握している不具合の報告とさせていただきます。
よろしくお願いします。