Zelgadis85

IGMC 17/18 Entrant
Veteran
Joined
Mar 13, 2012
Messages
92
Reaction score
199
First Language
Finnish
Primarily Uses
RMMZ
Hi everyone,

I have a problem I tried to solve in VS discord but (currently) to no avail. What I'm trying to achieve is to move the experience gauge bar in status menu to a different location (see picture below).
Screenshot 2021-03-16 11.08.59.png
This is what I currently have as plugin parameter 'JS: Draw Data' in Status Menu Categories -> General section of the Elements and Status Menu Core:
Code:
// Declare Constants
const maxExp = '-------';
const lineHeight = this.lineHeight();
const gaugeLineHeight = this.gaugeLineHeight();
const basicDataHeight = lineHeight * 6.5;
const actor = this._actor;
const padding = this.itemPadding();
const halfWidth = this.innerWidth / 2;
let rect = new Rectangle(0, 0, halfWidth, this.innerHeight);
let x = 0;
let y = 0;

// Draw Actor Graphic
this.drawActorGraphic(0, this.innerWidth / 2);

// Declare Smaller Data Area
let sx = rect.x;
let sy = Math.max(rect.y, rect.y + (rect.height - basicDataHeight));
let sw = rect.width;
let sh = rect.y + rect.height - sy;

// Draw Actor Name
this.drawItemDarkRect(0, sy, sw, lineHeight, 2);
this.drawText(actor.name(), sx, sy, sw, 'center');

// Draw Actor Icons
sx = rect.x + Math.round((rect.width - 144) / 2);
sy += lineHeight;
this.drawItemDarkRect(0, sy, sw, lineHeight);
this.drawActorIcons(actor, sx, sy);

// Draw Gauges
sx = rect.x + Math.round((rect.width - 128) / 2);
sy += lineHeight;
this.drawItemDarkRect(0, sy, sw, this.innerHeight - sy);
this.placeGauge(actor, "hp", sx, sy);
sy += gaugeLineHeight;
this.placeGauge(actor, "mp", sx, sy);
sy += gaugeLineHeight;
if ($dataSystem.optDisplayTp) {
    this.placeGauge(actor, "tp", sx, sy);
}

// Draw Actor Level
sx = rect.x + Math.round((rect.width - 128) / 2);
sy += lineHeight;
this.drawItemDarkRect(0, sy, sw, lineHeight);
this.drawActorLevel(actor, sx, sy);

// Draw Actor Class
const className = actor.currentClass().name;
sx = rect.x + Math.round((rect.width - this.textSizeEx(className).width) / 2);
sy += lineHeight;
this.drawItemDarkRect(0, sy, sw, lineHeight);
this.drawTextEx(className, sx, sy, sw);

// Declare Second Half
rect = new Rectangle(halfWidth, 0, halfWidth, this.innerHeight);

// Draw EXP
// Draw Title Bar
this.changeTextColor(ColorManager.systemColor());
this.drawItemDarkRect(rect.x, rect.y, rect.width, lineHeight, 2);
this.drawText(TextManager.exp, rect.x, rect.y, rect.width, 'center');

const expHeight = lineHeight * 3;

// Draw Experience Texts
this.drawItemDarkRect(rect.x, rect.y + lineHeight * 1, rect.width, lineHeight * 2);
const expTotal = TextManager.expTotal.format(TextManager.exp);
const expNext = TextManager.expNext.format(TextManager.level);
this.changeTextColor(ColorManager.systemColor());
this.drawText(expTotal, rect.x + padding, rect.y + lineHeight * 1, rect.width - padding * 2, 'left');
this.drawText(expNext, rect.x + padding, rect.y + lineHeight * 1, rect.width - padding * 2, 'right');
this.resetTextColor();

// Draw Experience Values
const expTotalValue = actor.currentExp();
const expMissingValue = actor.isMaxLevel() ? maxExp : actor.nextRequiredExp(); //Former expNextValue
const expNextValue = actor.isMaxLevel() ? maxExp : actor.expForLevel(actor._level + 1);
this.drawText(expTotalValue, rect.x + padding, rect.y + lineHeight * 2, rect.width - padding * 2, 'left');
this.drawText('/', rect.x + padding, rect.y + lineHeight * 2, rect.width - padding * 2, 'center');
this.drawText(expNextValue, rect.x + padding, rect.y + lineHeight * 2, rect.width - padding * 2, 'right');

//TEST: Draw Experience Gauge (DOES NOTHING -- ON HOLD FOR NOW)
const gaugeX = rect.x + padding;
const gaugeY = rect.y + lineHeight * 2;
const gaugeRate = actor.currentExp() / actor.nextRequiredExp();
const gaugeColor1 = ColorManager.systemColor();
const gaugeColor2 = ColorManager.systemColor();

this.placeGauge(actor, 'exp', gaugeX, gaugeY);

// Write Actor Biography
y = rect.y + expHeight;
this.changeTextColor(ColorManager.systemColor());
this.drawItemDarkRect(rect.x, y, rect.width, lineHeight, 2);
this.drawText(TextManager.statusMenuBiography, rect.x, y, rect.width, 'center');
this.resetTextColor();
y += lineHeight;
const bioText = actor.getBiography();
this.drawItemDarkRect(rect.x, y, rect.width, this.innerHeight - y);
this.drawTextEx(bioText, rect.x + padding, y, rect.width - padding * 2);

There's some redundancy and unused parameters but those I will cull out once I get this working.

Basically I'd like to move the gauge from the Lv 1 to the experience value bar on the right, as shown by the crude arrow. Could someone shed some light on this?

Thanks in advance!
 

Jragyn

JABS codemonkey
Veteran
Joined
Aug 14, 2012
Messages
175
Reaction score
151
First Language
English
Primarily Uses
RMMZ
If I had to guess, I'd venture you'd probably need to move this chunk of code:

JavaScript:
// Draw Actor Level
sx = rect.x + Math.round((rect.width - 128) / 2);
sy += lineHeight;
this.drawItemDarkRect(0, sy, sw, lineHeight);
this.drawActorLevel(actor, sx, sy);

over to the // Draw Experience Values section.

I'm not sure if you wrote this code block like that, or if the code block was out-of-the-box like that, but there appear to be multiple overwrites of the variables for x/y and such, which definitely means what line the code is on matters.
 

Zelgadis85

IGMC 17/18 Entrant
Veteran
Joined
Mar 13, 2012
Messages
92
Reaction score
199
First Language
Finnish
Primarily Uses
RMMZ
Thanks, but what I managed to do with that was not exactly what I had in mind... :aswt:
Screenshot 2021-03-16 16.34.29.png

As you can see, that just moved the Lv 1 to the right, behind the class description rectangle. I was gunning for something like this instead (I made this mockup for @Trihan who is trying to figure it out for me on Discord).

Mockup General Window.png

So basically (as explained above) move the experience bar to the experience field on the right.

Most of the code I pasted is the default setting you get with VisuStella Elements and Status Core. Besides that TEST: Draw Experience Gauge, the only thing I changed was the expNextValue constant and the draw text commands after that.
 

Jragyn

JABS codemonkey
Veteran
Joined
Aug 14, 2012
Messages
175
Reaction score
151
First Language
English
Primarily Uses
RMMZ
Yeah, I imagine if you wanted a gauge like you have mocked up in the second image there, you'd probably have to handcraft your own gauge. I don't think the default gauges have width as a customizable parameter by default. I know in my own efforts of working with gauge sprites, I had to add that functionality and use my own custom gauges.

Additionally, it looks like the gauge is being drawn after the black semi-transparent box (class description), or it has a lower priority/z value that the black boxes do (that would be my guess).
 

Trihan

Speedy Scripter
Veteran
Joined
Apr 12, 2012
Messages
3,055
Reaction score
2,319
First Language
English
Primarily Uses
RMMV
Yeah, I imagine if you wanted a gauge like you have mocked up in the second image there, you'd probably have to handcraft your own gauge. I don't think the default gauges have width as a customizable parameter by default. I know in my own efforts of working with gauge sprites, I had to add that functionality and use my own custom gauges.

Additionally, it looks like the gauge is being drawn after the black semi-transparent box (class description), or it has a lower priority/z value that the black boxes do (that would be my guess).
We managed to figure it out in the end.
 

Zelgadis85

IGMC 17/18 Entrant
Veteran
Joined
Mar 13, 2012
Messages
92
Reaction score
199
First Language
Finnish
Primarily Uses
RMMZ
Well, not completely. While I managed to make some progress using Trihan's instructions (and thank you very much for those!), I simply cannot find a way to make bars that are any wider than those already provided by RPG Maker and/or VisuStella. :kaocry:

Just about any other parameter I can change but no matter which width parameters I change, the bar is not getting any wider than the default 128px. I've already edited rmmz_sprites.js with the intent of bringing my changes into a standalone plugin afterwards, but since I cannot make any wider bars, I won't be releasing anything yet.

If somebody can help me find out where this hard limit of gauge width is located at, maybe I can complete this and release whatever I have managed to make.

@Jragyn -- since you mentioned you've made gauge sprites before, what did you do to change the width of those sprites? I tried setting a different bitmap width for my custom gauge but only smaller numbers than the default had any effect.

This is starting to turn into a headache, so bear with me please.

Once again, thanks in advance.
 

Jragyn

JABS codemonkey
Veteran
Joined
Aug 14, 2012
Messages
175
Reaction score
151
First Language
English
Primarily Uses
RMMZ
@Jragyn -- since you mentioned you've made gauge sprites before, what did you do to change the width of those sprites? I tried setting a different bitmap width for my custom gauge but only smaller numbers than the default had any effect.
I did indeed make a gauge. I use it in JABS to display hp on-the-map when doing ABS things. You can find that in my J-Base.js plugin. It was one of the first things I did, and I feel its a bit sloppy, but it works. Feel free to take a look at the code (linked) and copy what you need from it (you won't need all of it).
 

Zelgadis85

IGMC 17/18 Entrant
Veteran
Joined
Mar 13, 2012
Messages
92
Reaction score
199
First Language
Finnish
Primarily Uses
RMMZ
Thanks, I'll take a look. Once I produce some results, I'll post back.
 

Latest Threads

Latest Posts

Latest Profile Posts

A side story is almost getting into the next stage. Almost everything in this game has real-life references.
unfinishedbuildingwip1.jpg
Everyday life is full of absurdity. This is just a reflection.
TFW you discover how the script batching works in VNMaker... after you've had the program for almost 3 years.
hAx6iQ3.gif

Writes that the characters have to climb a mountain.

Realized that I have to draw six sets of models where characters are climbing.

At least I know how to draw something. :)
I'm currently scratching my head on how to design plains. What do I even put in plains? Some trees (but not too many or it turns into a forest)? Grass? A few bushes? That's a bit dull.
I'm looking for tutorials but Google didn't seem to find much (or maybe I have the wrong keywords). I don't know how to map plains and I don't know how to learn.

Forum statistics

Threads
111,406
Messages
1,060,899
Members
144,760
Latest member
Belphegor
Top