MV - YEP Shop Menu Core - Show Equip Status?

LunarMelodia · 2021-09-03T14:20:11+0900

Hello everyone! I'm currently in a bit of a pickle trying to find a way to modify one tiny window of the YEP Shop Menu Core scene. Currently, when purchasing Items the menu looks like this... It shows the amount party has in their current Inventory on the right hand-side. Perfect! Except when it comes to shopping for Weapons & Armor the scene is different. (Im using a plugin to change the Parameters like ATK, DEF etc to Icons that's why it's showing there btw) Now see, on the right hand-side here Ilia actually does have this weapon equipped already, but the plugin isn't doing a very good job of showing that, which isn't great UX for the player. Due to the nature of my game, I don't need to show a stat comparison when shopping for Weapons & Armor, so I would instead much rather show something like the Equip Status of the selected Weapon / Armor. What im after would be something more along the lines of this... (This example was mocked up in GIMP) Since all of the important information regarding the piece of Weapon or Armor will be displayed in the top message box in my game (cut out of these images but ya'll have seen it before), I want to use this space to instead display the Equip Status of these selected weapon or armor. This way the player knows instantly when they hover over it in the shop... Which characters can equip it Which characters can't equip it Which characters already have it currently equipped And how many of it including equipped does the party have One final thing to note... 'Equipment' in my game (both weapons & armor) is called 'Gear'. So I wouldn't want this screen to say "In Inventory" like the Item Shop, because it would need to say "Gear" instead since this is the Gear (Weapons & Armor) Shop. I have zero knowledge of JS (I've only ever worked in C#) so I don't have a realistic idea of how big of a task this is to accomplish. If anybody has any advice or can help me out at all please let me know! Thank you ^_^

● ARCHIVED · READ-ONLY

Started by LunarMelodia Sep 3, 2021, 05:20 AM 50 posts Page 2 of 3 View original ↗

LunarMelodia

#21 Nov 12, 2021, 01:15 AM Source

Hi @Frostorm & @ThreeSixNine
Thanks a bunch for your replies! ^_^
So again I know nothing about programming in JS so I haven't a clue how to fix this, but we got some red squigglies here when i copy-paste the code

Do we have one too many brackets here or something?
If this was C# I'm sure I could quickly fix this but JS arguments have slightly different syntax :/

ThreeSixNine

#22 Nov 12, 2021, 01:48 AM Source

LunaFamiliar said:

Do we have one too many brackets here or something?
If this was C# I'm sure I could quickly fix this but JS arguments have slightly different syntax :/

JavaScript:

Window_ShopStatus.prototype.drawActorParamChange =
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId]
    change -= (item1 ? item1.params[paramId] : 0);
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    actor.equips().some(function(stuff) {
    if (stuff.baseItemId = this._item.id){
      text = 'Equipped';
    } else if (!actor.isEquipped(this._item) && actor.canEquip(this._item)) {
      text = 'Can Equip';
    } else {
      text = 'Unequippable';
    }
    this.drawText(text, x, y, width, 'right');
})};

Maybe this?

LunarMelodia

#23 Nov 12, 2021, 02:13 AM Source

I've just tried out your code @ThreeSixNine
When I open the Buy Menu I get this error...

And when I open the Sell Menu I get an error that is mostly similar but has very slight differences...

Frostorm

#24 Nov 12, 2021, 02:37 AM Source

Whoops, should be two "=" signs, not 1... Edit: Ok @LunaFamiliar, try one of these 2 versions:

JavaScript:

//Versions #1
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId]
    change -= (item1 ? item1.params[paramId] : 0);
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    actor.equips().some(function(stuff) {
        if (stuff.baseItemId == this._item.id){
            text = 'Equipped';
        }
    });
    if (!actor.isEquipped(this._item) && actor.canEquip(this._item)) {
      text = 'Can Equip';
    } else {
      text = 'Unequippable';
    }
    this.drawText(text, x, y, width, 'right');
};

//Version #2
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId]
    change -= (item1 ? item1.params[paramId] : 0);
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    actor.equips().some(function(stuff) {
        if (stuff.baseItemId == this._item.id){
            text = 'Equipped';
        } else if (!actor.isEquipped(this._item) && actor.canEquip(this._item)) {
            text = 'Can Equip';
        } else {
            text = 'Unequippable';
        }
    });
    this.drawText(text, x, y, width, 'right');
};

LunarMelodia

#25 Nov 12, 2021, 07:58 AM Source

Tried both of your versions @Frostorm and they both seemed to give me the same error upon opening up the Buy Menu.
But just in case the errors aren't the same and I've missed something, I've got screenshots of both here for you

Version 1

Version 2

Frostorm

#26 Nov 12, 2021, 08:26 AM Source

Ok, now try these... (if these don't work, I'll need you to do some console.log())

JavaScript:

//Version 3
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId];
    var item2 = this._item;
    change -= (item1 ? item1.params[paramId] : 0);
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    actor.equips().some(function(stuff) {
        if (stuff.baseItemId == item2.id){
            text = 'Equipped';
        }
    });
    if (!actor.isEquipped(item2) && actor.canEquip(item2)) {
      text = 'Can Equip';
    } else {
      text = 'Unequippable';
    }
    this.drawText(text, x, y, width, 'right');
};

//Version 4
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId];
    var item2 = this._item;
    change -= (item1 ? item1.params[paramId] : 0);
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    actor.equips().some(function(stuff) {
        if (stuff.baseItemId == item2.id){
            text = 'Equipped';
        } else if (!actor.isEquipped(item2) && actor.canEquip(item2)) {
            text = 'Can Equip';
        } else {
            text = 'Unequippable';
        }
    });
    this.drawText(text, x, y, width, 'right');
};

Honestly, I wish someone better at JS would chime in lol. My JS skills are intermediate at best...

LunarMelodia

#27 Nov 12, 2021, 09:37 AM Source

@Frostorm I tried both...

Version 3

Version 4 Buy Menu

Version 4 Sell Menu

I don't even recognize this menu layout, I think it might be the default? Ive been using YEP Shop Core for so long I hardly remember the original lol
Either way it won't let me sell things, and obviously doesn't show the stuff I want it to as you can see.
I think the reason it won't let me sell is cause weapons & armor in my game are bought with a new currency 'Lustre' (which is a variable), and that works using YEP More Currencies.
So I think this code broke More Currencies in such a way it just isn't recognizing something and treating these items as unsellable.

Frostorm

#28 Nov 12, 2021, 09:48 AM Source

Yikes! Ok, that's certainly an issue lol...I guess it's back to the drawing board. :/

Edit: Wait, do you have this line of code right before/above all that?
Window_ShopStatus.prototype.drawActorParamChange =
So it should actually be...

JavaScript:

//Version 3
Window_ShopStatus.prototype.drawActorParamChange =
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId];
    var item2 = this._item;
    change -= (item1 ? item1.params[paramId] : 0);
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    actor.equips().some(function(stuff) {
        if (stuff.baseItemId == item2.id){
            text = 'Equipped';
        }
    });
    if (!actor.isEquipped(item2) && actor.canEquip(item2)) {
      text = 'Can Equip';
    } else {
      text = 'Unequippable';
    }
    this.drawText(text, x, y, width, 'right');
};

//Version 4
Window_ShopStatus.prototype.drawActorParamChange =
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId];
    var item2 = this._item;
    change -= (item1 ? item1.params[paramId] : 0);
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    actor.equips().some(function(stuff) {
        if (stuff.baseItemId == item2.id){
            text = 'Equipped';
        } else if (!actor.isEquipped(item2) && actor.canEquip(item2)) {
            text = 'Can Equip';
        } else {
            text = 'Unequippable';
        }
    });
    this.drawText(text, x, y, width, 'right');
};

LunarMelodia

#29 Nov 12, 2021, 09:52 AM Source

Yep I sure do, made sure that line's been there each time.

Frostorm

#30 Nov 12, 2021, 09:54 AM Source

Hmm, sorry this is kinda hard w/o being able to test each change... Gosh, where's @ThreeSixNine when you need him? lol
Edit: Ok @LunaFamiliar, try this now...
I have high hopes for V6!

JavaScript:

//Version 6
Window_ShopStatus.prototype.drawActorParamChange =
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId]
    change -= (item1 ? item1.params[paramId] : 0);
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    if (actor.equips().some(e => e.baseItemId == this._item.id)); {
      text = 'Equipped';
    } else if (!actor.isEquipped(this._item) && actor.canEquip(this._item)) {
      text = 'Can Equip';
    } else {
      text = 'Unequippable';
    }
    this.drawText(text, x, y, width, 'right');
};

ThreeSixNine

#31 Nov 12, 2021, 02:24 PM Source

Try this:

Code

JavaScript:

Window_ShopStatus.prototype.drawActorParamChange =
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId]
    change -= (item1 ? item1.params[paramId] : 0);
    var itemId = this._item.id;
    var equips = [];
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    for (i = 0; i < actor.equips().length - 1; i++) {
      if (actor.equips()[i] !== null) {
        equips.push(actor.equips()[i].baseItemId);
      }
    }
    if (equips.contains(itemId)) {
      text = 'Equipped';
    } else if (!actor.isEquipped(this._item) && actor.canEquip(this._item)) {
      text = 'Can Equip';
    } else {
      text = 'Unequippable';
    }
    this.drawText(text, x, y, width, 'right');
};

There might still be some issues with the color of the text but that can be changed.

Frostorm

#32 Nov 12, 2021, 03:30 PM Source

@LunaFamiliar Let me know if Version 6 worked or not. I had high hopes for that one, as I asked around for help and got that result.

Looking at the above code that was just posted...I noticed you used .push(). Wouldn't we need to clear the equips array afterward? Edit: Nvm, it gets reset to [], duh lol. But if your gonna create a new array, might as well use it. Also, we can get rid of !actor.isEquipped(this._item) because that will ALWAYS return true due to independent items.
ThreeSixNine

#33 Nov 12, 2021, 03:41 PM Source

Frostorm said:
Looking at the above code that was just posted...I noticed you used .push(). Wouldn't we need to clear the equips array afterward?
Possibly, I'd have to test more to be certain but I believe the above function is called each time there is a parameter change.
Var equips = [];
Should empty the array before anything can be added to it again.

Frostorm

#34 Nov 12, 2021, 03:49 PM Source

Yea, I realized that shortly after posting lol. Anyways, I cleaned up both our versions a bit since else if (actor.canEquip(this._item)) is sufficient for that conditional:

JavaScript:

//Frostorm (some() method)
Window_ShopStatus.prototype.drawActorParamChange =
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId]
    change -= (item1 ? item1.params[paramId] : 0);
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    if (actor.equips().some(e => e.baseItemId == this._item.id)); {
      text = 'Equipped';
    } else if (actor.canEquip(this._item)) {
      text = 'Can Equip';
    } else {
      text = 'Unequippable';
    }
    this.drawText(text, x, y, width, 'right');
};

//ThreeSixNine (array method)
Window_ShopStatus.prototype.drawActorParamChange =
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId]
    change -= (item1 ? item1.params[paramId] : 0);
    var itemId = this._item.id;
    var equips = [];
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    for (i = 0; i < actor.equips().length - 1; i++) {
      if (actor.equips()[i] !== null) {
        equips.push(actor.equips()[i].baseItemId);
      }
    }
    if (equips.contains(itemId)) {
      text = 'Equipped';
    } else if (actor.canEquip(this._item)) {
      text = 'Can Equip';
    } else {
      text = 'Unequippable';
    }
    this.drawText(text, x, y, width, 'right');
};

ThreeSixNine

#35 Nov 12, 2021, 03:56 PM Source

I think the issue I was having with some(). was that an empty equip slot doesn't have a baseItemId property.
Frostorm

#36 Nov 12, 2021, 05:36 PM Source

Yea, I was thinking that too actually, the null/undefined value thing when the slots empty. Good thing you found an alternative solution.
LunarMelodia

#37 Nov 13, 2021, 12:47 AM Source

Hi @Frostorm and @ThreeSixNine !
Got some good news ^_^

While Frostorm's Method gave me some red squigglies...

ThreeSixNine's Method doesn't crash! And seems to mostly work!
There are still few things that aren't quite right, and one final feature from my initial post's list to figure out.

As you can see here, the Can Equip text is (for the most part) displaying in Green
Which is what we want!

But on some weapons & armor for some reason it still displays White?

And sometimes it even displays Red?

I don't fully get why this is happening because the armors should be identical, but I can do some database testing with copy-pasting armors to see if I can consistently replicate the bug or not. It might be something on my end idk.

Can't Equip is showing in Grey which is perfect (Red would be ideal but Grey works fine).

And Equipped in White as it should yay!

--------------------------
**EDIT**: I think the colour error is due to certain armor having a lower DEF stat than the currently equipped armor, which RPGMaker by default considers to be the 'important stat' for armor (or ATK for weapons). For variety, some of my armors have higher M-DEF than DEF or even other stats (like MaxHP etc), so when an Armor has less DEF than the current, it's displaying the text in Red. When it has more it's showing it in Green, and when it's the same it's white, which isn't what I want for this system, because DEF and ATK aren't the primary stats here.
I want the text colour to only be associated with the Equip Status (equipped, can equip, can't equip) for this specific project.
But hey for now this is a system that doesn't crash! So I can use it for the time being!
---------------------------

As for the last feature from the list in my initial post, all I need now is to somehow change the In Inventory: text to say Current in Gear, and actually have that number also include what's equipped (which it currently doesn't), as well as removing the Stat Symbol that's underneath it...

As I explained in my first post, I'm using a plugin to change the Parameters like ATK, DEF etc. to Icons that's why it's showing as a symbol instead of what it usually says; 'DEF'. So basically I just want to remove the line of code that would be nommally displaying that parameter.

This was the mockup I did for my original post, something kinda like this.

I can't express enough how amazingly helpful both of you have been! Thank you both so much for putting up with me and helping me fix this problem ^_^
Good to know there are some super friendly people on this forum <3

Just a few more lil quirks to figure out and then the Shop Menu will be all done!
ThreeSixNine

#38 Nov 13, 2021, 01:10 AM Source

@LunaFamiliar I believe the text color is changing due to a parameter comparison, I should be able to to sort that out.
Removing the icon from the inventory display shouldn't be too much trouble either.

I'll take a look at adding the equipped amount to the shown amount and changing the text.

-EDIT-
It looks like adding the equipped amount is going to take me a bit of time to figure out, so I'll work on the other features first.

@LunaFamiliar I have a question about the text colors, are you using the default color palette for text colors?
LunarMelodia

#39 Nov 13, 2021, 02:12 AM Source

@ThreeSixNine thanks a bunch!
Umm I think so? I am using Yanfly's Message Core and I use the \C[] command to change text colours on the fly, but I'm pretty sure im using the default palette yes, unless YEP Message Core changes it.

That's what my Window files in img/system is if it helps answer the question at all?

ThreeSixNine

#40 Nov 13, 2021, 02:37 AM Source

That's exactly what I was looking for, thank you.

@LunaFamiliar To hide the parameter, comment out line 921:

JavaScript:

this.drawText(text, 0, this.lineHeight(), this.contents.width, 'center');

Next, to make the "Can't Equip" text red, look for the function starting on line 1019. Replace it with this:

Code

JavaScript:

Window_ShopStatus.prototype.drawActorEquipInfo = function(x, y, actor) {
    var enabled = actor.canEquip(this._item);
    this.changePaintOpacity(enabled);
    this.resetTextColor();
    this.resetFontSettings();
    this.drawText(actor.name(), x, y, this.contents.width - x);
    var item1 = this.currentEquippedItem(actor, this._item.etypeId);
    if (enabled) {
      this.contents.fontSize = Yanfly.Param.ShopStatFontSize;
      this.drawActorParamChange(x, y, actor, item1);
    } else {
      this.contents.fontSize = Yanfly.Param.ShopCantSize;
      var ww = this.contents.width - this.textPadding();
      this.drawText('\\c[10]Can\'t Equip\\c[0]', x, y, ww, 'right');
    }
    this.changePaintOpacity(true);
};

The change is on line 14 of the above code.

To change the "Possession" text, look to the "Terms" tab of the Database. In the list on the right-hand side, the 7th from the top entry will let you change the text to your liking.

As for the adding of the equipped, that is still going to take me some time.

@LunaFamiliar Sorry to spam you but I forgot to add this code:

Consistent Colors

JavaScript:

Window_ShopStatus.prototype.drawActorParamChange =
function(x, y, actor, item1) {
    var width = this.contents.width - this.textPadding() - x;
    var paramId = this.paramId();
    var change = this._item.params[paramId]
    change -= (item1 ? item1.params[paramId] : 0);
    var itemId = this._item.id;
    var equips = [];
    this.changeTextColor(this.paramchangeTextColor(change));
    var text = (change > 0 ? '+' : '') + Yanfly.Util.toGroup(change);
    for (i = 0; i < actor.equips().length - 1; i++) {
      if (actor.equips()[i] !== null) {
        equips.push(actor.equips()[i].baseItemId);
      }
    }
    if (equips.contains(itemId)) {
      text = 'Equipped';
    } else if (actor.canEquip(this._item)) {
      text = '\\c[3]Can Equip\\c[0]';
    }
    this.drawText(text, x, y, width, 'right');
};

The above code should make the colors consistent with the equip status. You may notice I removed the final 'else' handler, as it appears to not be needed.