Centering Choice Text

[nathanlink169]

Hi all,

The goal that I'm looking to achieve is to center the text inside of the choice menu. I know that you can center the choice menu itself (and I have), but I'm more looking to center the choices themselves. The reason why is because I have extended the minimum window width.

On line 1415 of rpg_windows.js, there is the Window_Command.prototype.itemTextAlign method. Changing that will change some of the text in the game (i.e. the main menu), but not a basic choice menu, from what I can see.

 

[Bex]

Interesting question, sadly i dont know the answer and assume you would need some kind of Text Message Plugin.
A workaround would be to center it manualy by inserting "Empty Spaces" infront of the Questions with space Bar Button.

 

[caethyril]

It's tricky because the choice window uses drawTextEx so it can process escape codes like \C[x], \{, etc. I.e. the text effectively needs to be "written out" an extra time to find out how wide it is.

I found a plugin (forum post, github) called RS_MessageAlign (requires Yanfly's Message Core), which lets you align the text in Show Text commands. Not sure if it affects Show Choices as well, and if not how easy it'd be to make it do so, but it's a step in that direction~

 

[nathanlink169]

Interesting question, sadly i dont know the answer and assume you would need some kind of Text Message Plugin.
A workaround would be to center it manualy by inserting "Empty Spaces" infront of the Questions with space Bar Button.

I know it'll take a plugin, hence why I'm asking in the Javascript boards

It's tricky because the choice window uses drawTextEx so it can process escape codes like \C[x], \{, etc. I.e. the text effectively needs to be "written out" an extra time to find out how wide it is.

I found a plugin (forum post, github) called RS_MessageAlign (requires Yanfly's Message Core), which lets you align the text in Show Text commands. Not sure if it affects Show Choices as well, and if not how easy it'd be to make it do so, but it's a step in that direction~

Interesting! I'll take a look and see if I can de-construct that to work with the choice menus as well. I'll let you know what I find!

 

[Zevia]

I wrote up a small Plugin that will center the Show Choice text, taking into account any escape characters you have.

Spoiler: Example Screenshot

You can download it from here, or copy-paste it into your own file from below:

Spoiler: Plugin Code

/*:
* @plugindesc Centers text used in Show Choice event commands
* @author Zevia
*
* @help Causes all text drawn using the Show Choice command to be centered.
* This plugin is likely not compatible with other plugins that modify the
* drawItem function of Window_ChoiceList. You can try placing this Plugin
* above other Plugins that modify it for compatibility, but otherwise,
* it will require a compatibility fix / enhancement.
*/

(function(module) {
    'use strict';

    module.Zevia = module.Zevia || {};
    var CenterChoiceText = module.Zevia.CenterChoiceText = {};

    CenterChoiceText.drawItem = Window_ChoiceList.prototype.drawItem;
    Window_ChoiceList.prototype.drawItem = function(index) {
        var text = this.commandName(index);
        this.drawTextEx(
            text,
            ((this.width - this.textWidthEx(text)) / 2) - this.standardPadding(),
            this.itemRectForText(index).y
        );
    };
})(window);

Since this is Learning JavaScript, what I did is modify the Window_ChoiceList.prototype.drawItem function, which is what draws the text for each choice in a Show Choice Window. That function normally figures out the x and y coordinates, as well as the width of the "text rectangle," using the itemRectForText method that's available on everything that extends Window_Selectable.

Instead of using the x position that the itemRectForText returns (which is typically just however much padding you have set on the window), a new x position is determined by taking the width of the window, subtracting the width of the text (once escape characters have been processed), then dividing that by 2. Since the window's width typically doesn't include the padding, there's an additional step of subtracting the window's padding.

Since I'm directly changing the logic of the drawItem function for Window_ChoiceList, the Plugin is not designed to be compatible with other Plugins that might modify the same function, so you'll need compatibility fixes for others - though you might get it to work by simply placing it first in your list of Plugins, if other Plugins have been designed to be compatible.

 

[nathanlink169]

I wrote up a small Plugin that will center the Show Choice text, taking into account any escape characters you have.

Spoiler: Example Screenshot

You can download it from here, or copy-paste it into your own file from below:

Spoiler: Plugin Code

/*:
* @plugindesc Centers text used in Show Choice event commands
* @author Zevia
*
* @help Causes all text drawn using the Show Choice command to be centered.
* This plugin is likely not compatible with other plugins that modify the
* drawItem function of Window_ChoiceList. You can try placing this Plugin
* above other Plugins that modify it for compatibility, but otherwise,
* it will require a compatibility fix / enhancement.
*/

(function(module) {
    'use strict';

    module.Zevia = module.Zevia || {};
    var CenterChoiceText = module.Zevia.CenterChoiceText = {};

    CenterChoiceText.drawItem = Window_ChoiceList.prototype.drawItem;
    Window_ChoiceList.prototype.drawItem = function(index) {
        var text = this.commandName(index);
        this.drawTextEx(
            text,
            ((this.width - this.textWidthEx(text)) / 2) - this.standardPadding(),
            this.itemRectForText(index).y
        );
    };
})(window);

Since this is Learning JavaScript, what I did is modify the Window_ChoiceList.prototype.drawItem function, which is what draws the text for each choice in a Show Choice Window. That function normally figures out the x and y coordinates, as well as the width of the "text rectangle," using the itemRectForText method that's available on everything that extends Window_Selectable.

Instead of using the x position that the itemRectForText returns (which is typically just however much padding you have set on the window), a new x position is determined by taking the width of the window, subtracting the width of the text (once escape characters have been processed), then dividing that by 2. Since the window's width typically doesn't include the padding, there's an additional step of subtracting the window's padding.

Since I'm directly changing the logic of the drawItem function for Window_ChoiceList, the Plugin is not designed to be compatible with other Plugins that might modify the same function, so you'll need compatibility fixes for others - though you might get it to work by simply placing it first in your list of Plugins, if other Plugins have been designed to be compatible.

I’ll take a look at this, thank you so much for your help!