【解決済み】メニューの各アイテム単位の背景色を変えたい

maker-b
記事: 112
登録日時: 2016年3月27日(日) 22:03
連絡を取る:

【解決済み】メニューの各アイテム単位の背景色を変えたい

投稿記事by maker-b » 2020年9月25日(金) 01:09

皆様
大変お世話になっております

掲題の通り、MZのメニュー画面で、アイテムやスキルを選択する場面がありますが、
その、各アイテム単位で背景色を変更したいと思っております。

スクリプトを覗いていると、

コード: 全て選択

Window_Selectable.prototype.drawBackgroundRect = function(rect) {
    const c1 = ColorManager.itemBackColor1();
    const c2 = ColorManager.itemBackColor2();
    const x = rect.x;
    const y = rect.y;
    const w = rect.width;
    const h = rect.height;
    this.contentsBack.gradientFillRect(x, y, w, h, c1, c2, true);
    this.contentsBack.strokeRect(x, y, w, h, c1);
};


このあたりかと思いましたが、
これに条件式をいれて、C1を別カラーとかにしてみると、
すべてのセル?の色が変わってしまいました・・・・

お力をいただけると嬉しいです
添付ファイル
スクリーンショット 2020-09-25 010333.png
例えば、この赤四角部分の背景を青にしたい、とかです
最後に編集したユーザー maker-b on 2020年9月30日(水) 00:51 [ 編集 1 回目 ]

いっつ
記事: 5
登録日時: 2020年5月27日(水) 14:43
連絡を取る:

Re: メニューの各アイテム単位の背景色を変えたい

投稿記事by いっつ » 2020年9月26日(土) 15:52

赤い四角の部分は、Window_ItemListのクラスのようです。
maker-b様の仰っているdrawBackgroundRectメソッドがある
Window_Selectableクラスの子クラスにあたります。
Window_ItemList側には、同名のメソッドが無いため、親クラス側のメソッドが
呼ばれているのですね。

Window_Selectableは、その名の通り、項目の選択が必要なウィンドウでは、
ほぼ、親クラスとして使われていると思うので、
そのままdrawBackgroundRectメソッドを改変すると、
全ての選択が必要なウィンドウで項目背景色が変わってしまいます。
なので、あちこち色が変わってしまったものと思われます。

これを回避するには、Window_ItemListに新たにdrawBackgroundRectメソッドを定義
するのが順当な気がします。そちらに条件式を書いて分岐させるのが良いかと思います。
色も、ColorManagerに追加した方が良さそうですね。

アイテム単位で、背景色を変更したいとの事ですが、丁度、Window_ItemListには、
itemAt(index)というメソッドがあり、項目番号を入れれば、アイテムを取得出来るようです。
なので、drawBackgroundRectを呼んでいる、drawItemBackgroundも一緒に新規定義して、
indexを参照出来る形にした方が良さそうです。分かりにくいので、
コードにすると、こんな感じでしょうか?

コード: 全て選択

    // 新しいアイテム背景色の定義です。必要なだけ定義します。
    ColorManager.itemBackColor3 = function() {
        return "rgba(0, 0, 255, 1)";
    };

    ColorManager.itemBackColor4 = function() {
        return "rgba(0, 0, 255, 1)";
    };

    // drawItemBackgroundの定義です。
    Window_ItemList.prototype.drawItemBackground = function(index) {
        const rect = this.itemRect(index);    // 項目矩形範囲
        this.drawBackgroundRect(rect, index); // 項目矩形範囲に項目背景色を描画 引数indexで項目番号を取れるようにしています。
    };

    // drawBackgroundRectの定義です。
    Window_ItemList.prototype.drawBackgroundRect = function(rect, index) {
        const c1 = this.itemBackColor1(index); // 項目背景カラー1 ここでindexを参照
        const c2 = this.itemBackColor2(index); // 項目背景カラー2 ここでindexを参照
        const x = rect.x;
        const y = rect.y;
        const w = rect.width;
        const h = rect.height;
        this.contentsBack.gradientFillRect(x, y, w, h, c1, c2, true); // コンテンツ背景に縦グラデーションで塗りつぶし
        this.contentsBack.strokeRect(x, y, w, h, c1);                 // コンテンツ背景にカラー1で矩形の描画
    };

    Window_ItemList.prototype.itemBackColor1 = function(index) {
        const item = this.itemAt(index)           // indexからアイテム取得
        if (index == 0 && DataManager.isItem(item) && item.itypeId === 1) { // 色1の条件分岐
            return ColorManager.itemBackColor3(); // 項目背景カラー3
        } else {
            return ColorManager.itemBackColor1(); // 項目背景カラー1
        };
    };

    Window_ItemList.prototype.itemBackColor2 = function(index) {
        const item = this.itemAt(index)
        if (index == 0 && DataManager.isItem(item) && item.itypeId === 1) { // 色2の条件分岐
            return ColorManager.itemBackColor4(); // 項目背景カラー4
        } else {
            return ColorManager.itemBackColor2(); // 項目背景カラー2
        };
    };

この場合だと、項目番号0番、つまり、アイテムリストウィンドウの一番左上の
項目を表示アイテムがアイテムクラスかつ、通常アイテムの場合に、
背景色を青くするという感じになっています。

注意したいのが、Window_ItemListも、通常のアイテムのリストの他、
装備品の選択画面の武器や防具のリスト、大事な物リスト等で使われていて、
自身が持つincludesメソッドで表示するべきかを分岐している点です。
上記コードの色の条件分岐の
DataManager.isItem(item) && item.itypeId === 1
は、このincludesメソッドを参考に通常アイテムの場合という分岐を作成し、
アイテム選択画面でしか背景色が青くならないようにしています。
この変数itemには、$dataItemsのアイテムが入っているので、データベース情報を
参照出来ると思います。この辺りの条件分岐を書き換えれば
maker-b様が望むような事が出来るのではないかと思います。

ついでにプラグイン化した物を貼っておきます。質問に答える形で作ったものですし、
改変ありきなので、利用規約は、特にありません。ご自由にどうぞ。
添付ファイル
ItemBackColorChange.js
(2.89 KiB) ダウンロード数: 21 回
いっつと申します。
プレインソフトという所で音楽作ってるよ。

HP :http://pisces.html.xdomain.jp/
blog:http://pisces.wp.xdomain.jp/
プレインソフト:https://mochimocco.wixsite.com/plainsoft
いっつ
記事: 5
登録日時: 2020年5月27日(水) 14:43
連絡を取る:

Re: メニューの各アイテム単位の背景色を変えたい

投稿記事by いっつ » 2020年9月26日(土) 17:46

すみません。間違えたかもしれません。
画像は、装備画面でしょうか?スキル画面でしょうか?
装備スロット画面の場合、Window_ItemListではなく、Window_EquipSlotに、
スキル画面の場合、Window_SkillListに定義しなければなりません。
幸いどちらもWindow_Selectableの子クラスにあたり、
itemAt(index)のメソッドも定義されているので、
クラス名だけ書き換えれば、コードは、動くと思います。

もし、全ての画面でアイテム単位で背景色を変えたい場合、
それぞれのクラスでdrawItemBackgroundと、drawBackgroundRectを
定義してください。単純にコピペして、クラス名だけ変えれば良いと思います。
その上で、アイテムのタイプ等から色を変える必要があれば、その処理を色の条件分岐の
所辺りで書いておくといった感じでしょうか?

プラグイン等を使ってオリジナルのウィンドウを使用している場合でも、
恐らく、Window_Selectableの子クラスになっていると思うので、
そのクラスに定義する事で大体動くかと思われます。
動かない場合、Window_Selectableを継承していない事が考えられるので、
その場合は、プラグインを読み解かないと変更不可と思われます。

失礼いたしました。
いっつと申します。
プレインソフトという所で音楽作ってるよ。

HP :http://pisces.html.xdomain.jp/
blog:http://pisces.wp.xdomain.jp/
プレインソフト:https://mochimocco.wixsite.com/plainsoft
maker-b
記事: 112
登録日時: 2016年3月27日(日) 22:03
連絡を取る:

Re: メニューの各アイテム単位の背景色を変えたい

投稿記事by maker-b » 2020年9月26日(土) 23:20

いっつ様

お世話になっております。
大変ご丁寧な回答、ありがとうございます。
また、具体的なスクリプト例をご提示いただき本当に嬉しく思います。

お察しの通り、このメニュー画面はWindow_equipのカスタマイズです。
当然、Window_Selectableの子クラスなので、ご回答のやりかたでうまくいきました!
本当にありがとうございます!

実は、equipメニューをベースに、FF12のガンビットを実装できるようにプラグインを作っておりまして
大変参考になりました!
添付ファイル
無題.png

“MZ:質問” へ戻る