RMMV YEP_OptionsCore - Align Categories + Change Window Height

Status
Not open for further replies.

Ket

Veteran
Veteran
Joined
Oct 17, 2020
Messages
80
Reaction score
27
First Language
English
Primarily Uses
RMMV
I'm using Yanfly's YEP_OptionsCore and I need some help with the code.

I want to align my Category names to the center,
and I need to change the height of the Options window and make it shorter so that it only shows the first 9 options (making you scroll down to see option 10).

What I have right now is what's seen in the drawing below:

1624435230141.png

What is it I need to change or look for in the code because there's nothing in the parameters for this. At least from what I've seen.
 

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,635
Reaction score
2,007
First Language
EN
Primarily Uses
RMMZ
I'm not sure what's going on with the list on the right, since the number of items visible should typically be calculated based on the window height and item height. :kaoslp:

To change the alignment of the category window, I think you'll need a small plugin (or edit). Try putting this in a .js file (copy into Notepad or something, File > Save As > File Type: All Files, Filename: whatever.js) and importing as a plugin:
JavaScript:
Window_OptionsCategory.prototype.itemTextAlign = function() { return 'center'; };
(By default this window just inherits the alignment of Window_Command.)

[Edit: oops, actually it uses drawTextEx so the alignment will have to be done manually.]
 
Last edited:

Ket

Veteran
Veteran
Joined
Oct 17, 2020
Messages
80
Reaction score
27
First Language
English
Primarily Uses
RMMV
I'm not sure what's going on with the list on the right, since the number of items visible should typically be calculated based on the window height and item height. :kaoslp:

To change the alignment of the category window, I think you'll need a small plugin (or edit). Try putting this in a .js file (copy into Notepad or something, File > Save As > File Type: All Files, Filename: whatever.js) and importing as a plugin:
JavaScript:
Window_OptionsCategory.prototype.itemTextAlign = function() { return 'center'; };
(By default this window just inherits the alignment of Window_Command.)
Hmm, that doesn't seem to work. Everything is still aligned to the left.

Edit: As for the window height, I don't think I explained it right.
The black box in the drawing is where I want the window fitted, not where the window currently sits. So I'm looking to make the window height smaller and I need to figure out how to do that. :kaoswt2:

Edit 2:
For the alignment issue, I feel like it's somewhere here:
JavaScript:
Window_OptionsCategory.prototype.drawItem = function(index) {
  var rect = this.itemRectForText(index);
  var align = this.itemTextAlign();
  this.resetTextColor();
  this.changePaintOpacity(this.isCommandEnabled(index));
  this.drawTextEx(this.commandName(index), rect.x, rect.y);
};

I'm still very inept with code. I tried adding
JavaScript:
'center'
to both
JavaScript:
this.drawTextEx(this.commandName(index), rect.x, rect.y, 'center');
and
JavaScript:
var align = this.itemTextAlign('center');
but to no avail.
 
Last edited:

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,635
Reaction score
2,007
First Language
EN
Primarily Uses
RMMZ
This is the entire code for the Windows Category section if it helps any:
I have a copy of YEP_OptionsCore that I have been referencing, no worries. It is a paid plugin, so I think you should not share its code like that. :kaoswt2:

I had a closer look and I think I see why the alignment doesn't work. It's using drawTextEx, which allows for text codes (e.g. \i[x]) but has no native alignment or fitting methods. It would need to measure the width of the processed text, then draw the text with an appropriate offset.

Instead...
Try putting this in a .js file (copy into Notepad or something, File > Save As > File Type: All Files, Filename: whatever.js) and importing as a plugin:
JavaScript:
/*:
 * @plugindesc Some edits for YEP_OptionsCore
 * @author Caethyril
 * @help Load this plugin after YEP_OptionsCore.
 *
 * Terms of use: free to use and/or modify, for any project!
 */

// Alias! Reduce options list window height by a fixed amount.
(function(alias) {
  Window_Options.prototype.windowHeight = function() {
    return alias.apply(this, arguments) - 24;   // 24 px shorter
  };
})(Window_Options.prototype.windowHeight);

// New! Set custom category text alignment: "left", "center", or "right".
Window_OptionsCategory.prototype.itemTextAlign = function() { return 'center'; };

// Override! Allow left-, center-, or right-aligned category commands.
Window_OptionsCategory.prototype.drawItem = function(index) {
  var rect = this.itemRectForText(index);
  var txt = this.commandName(index);
  var dw = rect.width - this.drawTextEx(txt, 0, this.contents.height);
  var x = rect.x;
  switch (this.itemTextAlign()) {
    case 'center':
      x += Math.floor(dw / 2);
      break;
    case 'right':
      x += dw;
      break;
  }
  this.resetTextColor();
  this.changePaintOpacity(this.isCommandEnabled(index));
  this.drawTextEx(txt, x, rect.y);
};
(I haven't actually tested, but I'm fairly confident it'll work.) I've included a windowHeight alias here, too: as-is it should reduce the height by 24 px, but you might want to adjust that number.

Regarding your attempted edits: by default itemTextAlign expects 0 inputs (it just gets the text alignment) and drawTextEx only handles 3 inputs (text, x, y).

[Edit: added index argument to the drawItem override. :kaoslp:]
 
Last edited:

Oscar92player

Veteran
Veteran
Joined
Jul 26, 2012
Messages
529
Reaction score
243
First Language
Spanish
Primarily Uses
RMMV
Does your problem look like this?

1624558632235.png

For me it happens when I use a custom font, instead of the one that comes with the default projects on MV. Whenever I change the font and the size of it, it shows it like this.

It affects the heigh of the texts in the line where they are rendered, and for me they appear higher than the center.
 

Ket

Veteran
Veteran
Joined
Oct 17, 2020
Messages
80
Reaction score
27
First Language
English
Primarily Uses
RMMV
I have a copy of YEP_OptionsCore that I have been referencing, no worries. It is a paid plugin, so I think you should not share its code like that. :kaoswt2:

I had a closer look and I think I see why the alignment doesn't work. It's using drawTextEx, which allows for text codes (e.g. \i[x]) but has no native alignment or fitting methods. It would need to measure the width of the processed text, then draw the text with an appropriate offset.

Instead...

JavaScript:
/*:[/INDENT][/INDENT]
[INDENT][INDENT]* @plugindesc Some edits for YEP_OptionsCore[/INDENT][/INDENT]
[INDENT][INDENT]* @author Caethyril[/INDENT][/INDENT]
[INDENT][INDENT]* @help Load this plugin after YEP_OptionsCore.[/INDENT][/INDENT]
[INDENT][INDENT]*[/INDENT][/INDENT]
[INDENT][INDENT]* Terms of use: free to use and/or modify, for any project![/INDENT][/INDENT]
[INDENT][INDENT]*/[/INDENT][/INDENT]
[INDENT][INDENT][/INDENT][/INDENT]
[INDENT][INDENT]// Alias! Reduce options list window height by a fixed amount.[/INDENT][/INDENT]
[INDENT][INDENT](function(alias) {[/INDENT][/INDENT]
[INDENT][INDENT]  Window_Options.prototype.windowHeight = function() {[/INDENT][/INDENT]
[INDENT][INDENT]    return alias.apply(this, arguments) - 24;   // 24 px shorter[/INDENT][/INDENT]
[INDENT][INDENT]  };[/INDENT][/INDENT]
[INDENT][INDENT]})(Window_Options.prototype.windowHeight);[/INDENT][/INDENT]
[INDENT][INDENT][/INDENT][/INDENT]
[INDENT][INDENT]// New! Set custom category text alignment: "left", "center", or "right".[/INDENT][/INDENT]
[INDENT][INDENT]Window_OptionsCategory.prototype.itemTextAlign = function() { return 'center'; };[/INDENT][/INDENT]
[INDENT][INDENT][/INDENT][/INDENT]
[INDENT][INDENT]// Override! Allow left-, center-, or right-aligned category commands.[/INDENT][/INDENT]
[INDENT][INDENT]Window_OptionsCategory.prototype.drawItem = function() {[/INDENT][/INDENT]
[INDENT][INDENT]  var rect = this.itemRectForText(index);[/INDENT][/INDENT]
[INDENT][INDENT]  var txt = this.commandName(index);[/INDENT][/INDENT]
[INDENT][INDENT]  var dw = rect.width - this.drawTextEx(txt, 0, this.contents.height);[/INDENT][/INDENT]
[INDENT][INDENT]  var x = rect.x;[/INDENT][/INDENT]
[INDENT][INDENT]  switch (this.itemTextAlign()) {[/INDENT][/INDENT]
[INDENT][INDENT]    case 'center':[/INDENT][/INDENT]
[INDENT][INDENT]      x += Math.floor(dw / 2);[/INDENT][/INDENT]
[INDENT][INDENT]      break;[/INDENT][/INDENT]
[INDENT][INDENT]    case 'right':[/INDENT][/INDENT]
[INDENT][INDENT]      x += dw;[/INDENT][/INDENT]
[INDENT][INDENT]      break;[/INDENT][/INDENT]
[INDENT][INDENT]  }[/INDENT][/INDENT]
[INDENT][INDENT]  this.resetTextColor();[/INDENT][/INDENT]
[INDENT][INDENT]  this.changePaintOpacity(this.isCommandEnabled(index));[/INDENT][/INDENT]
[INDENT][INDENT]  this.drawTextEx(txt, x, rect.y);[/INDENT][/INDENT]
[INDENT][INDENT]};
(I haven't actually tested, but I'm fairly confident it'll work.) I've included a windowHeight alias here, too: as-is it should reduce the height by 24 px, but you might want to adjust that number.

Regarding your attempted edits: by default itemTextAlign expects 0 inputs (it just gets the text alignment) and drawTextEx only handles 3 inputs (text, x, y).
Ah, I didn't realize it was part of the paid package, I removed it.
Hmm, I got:
"Reference Error
index is not defined"
1624602668553.png
1624602689283.png
Was I supposed to do something in the code? :kaoswt2:


Does your problem look like this?

View attachment 193278

For me it happens when I use a custom font, instead of the one that comes with the default projects on MV. Whenever I change the font and the size of it, it shows it like this.

It affects the heigh of the texts in the line where they are rendered, and for me they appear higher than the center.
I am using a custom Sfont, but I wouldn't think it would do something like this... My issue is not so much a horizontal alignment issue, but a vertical one.
 

caethyril

^_^
Veteran
Joined
Feb 21, 2018
Messages
2,635
Reaction score
2,007
First Language
EN
Primarily Uses
RMMZ
Hmm, I got:
"Reference Error
index is not defined"
:kaoswt: Sorry, I forgot to write index as an input for the drawItem method.

I updated the code in my previous post, or you can just replace this line:
JavaScript:
Window_OptionsCategory.prototype.drawItem = function() {
...with this:
JavaScript:
Window_OptionsCategory.prototype.drawItem = function(index) {
Hopefully that's all that needs fixing~
 

Ket

Veteran
Veteran
Joined
Oct 17, 2020
Messages
80
Reaction score
27
First Language
English
Primarily Uses
RMMV
:kaoswt: Sorry, I forgot to write index as an input for the drawItem method.

I updated the code in my previous post, or you can just replace this line:
JavaScript:
Window_OptionsCategory.prototype.drawItem = function() {
...with this:
JavaScript:
Window_OptionsCategory.prototype.drawItem = function(index) {
Hopefully that's all that needs fixing~
Amazing! You fixed both my issues! Thank you so much! I'm elated!
 

Oscar92player

Veteran
Veteran
Joined
Jul 26, 2012
Messages
529
Reaction score
243
First Language
Spanish
Primarily Uses
RMMV
Ah, I didn't realize it was part of the paid package, I removed it.
Hmm, I got:
"Reference Error
index is not defined"
View attachment 193357
View attachment 193358
Was I supposed to do something in the code? :kaoswt2:



I am using a custom Sfont, but I wouldn't think it would do something like this... My issue is not so much a horizontal alignment issue, but a vertical one.

Ah, if you are using the SFonts, the problem with the higher text position does not happen. That's why I use Victor's plugin as well.

In any case, I'm glad your problem got resolved. I'll try this later to see how does the options menu look.
 
  • Like
Reactions: Ket

slimmmeiske2

Little Red Riding Hood
Global Mod
Joined
Sep 6, 2012
Messages
8,747
Reaction score
5,767
First Language
Dutch
Primarily Uses
RMXP

This thread is being closed, due to being solved. If for some reason you would like this thread re-opened, please report this post and leave a message why. Thank you.

 
Status
Not open for further replies.

Latest Threads

Latest Profile Posts

It's really not fun burning 4 hours looking at code and trying certain things and getting no where.
:kaoswt2: Steam seems down again... oh nevermind, it's up now
After so long, my random sprites set is complete! I wonder who could guess them all? :kaothx:
2COlHup.png

And yes, I'm doing more.
I'm thinking of devouring some tutorials for RPG Maker MV. Just all kinds: mapping, spriting, programming, ect. the whole works! :)

Maybe videos, my brother and I can sit down and watch them during one of our weekly business meetings.

Forum statistics

Threads
113,928
Messages
1,078,463
Members
148,034
Latest member
Resticon
Top