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,619
Reaction score
1,998
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,619
Reaction score
1,998
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,619
Reaction score
1,998
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,729
Reaction score
5,762
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 Posts

Latest Profile Posts

Ami
need a time to not open my MV,still addicted with new vegas

i wonder what addiction effect behind playing new vegas too much,maybe INT & Science gone worse in many days :D
cdjensen94 wrote on Kaliya's profile.
Are you the one who develops Kaliya's Visual Map Enhancements. If so I desperately need some help. I bought the plugin back a few months. I've only started using it recently.
Cause MP Damage instead of HP, Localization Plugin for Translation | RPG Maker News #112

Here in Fla were are seeing crazy covid spikes and some vaccinated getting bad infections. I had a mild fever on Thurs but it went down fast. How is everyone else doing. Hopefully you are all well. :)
Wish I was better at art, specifically that I was faster at it, bc this one NPC took Several Days to complete! It's gonna take So Extremely Long to do all of the art for my game, never mind writing it... Anyways, here's my gorgon, Hopernica Sthyxis!

57b88732c7abbcd84981dacf624a98495af61fcc.gifv

Forum statistics

Threads
113,832
Messages
1,077,774
Members
147,889
Latest member
Zandrae
Top