Centering Choice Text

Discussion in 'Learning Javascript' started by nathanlink169, Jul 13, 2019.

  1. nathanlink169

    nathanlink169 Veteran Veteran

    Messages:
    42
    Likes Received:
    14
    Location:
    Ottawa
    First Language:
    English
    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.
     

    Attached Files:

    #1
  2. Bex

    Bex Veteran Veteran

    Messages:
    1,209
    Likes Received:
    273
    First Language:
    German
    Primarily Uses:
    RMMV
    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.
     
    #2
  3. caethyril

    caethyril ^_^ Veteran

    Messages:
    1,112
    Likes Received:
    686
    Location:
    UK
    First Language:
    English
    Primarily Uses:
    RMMV
    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~ :kaophew:
     
    #3
  4. nathanlink169

    nathanlink169 Veteran Veteran

    Messages:
    42
    Likes Received:
    14
    Location:
    Ottawa
    First Language:
    English
    I know it'll take a plugin, hence why I'm asking in the Javascript boards :wink:

    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!
     
    #4
  5. Zevia

    Zevia Veteran Veteran

    Messages:
    620
    Likes Received:
    325
    First Language:
    English
    Primarily Uses:
    RMMV
    I wrote up a small Plugin that will center the Show Choice text, taking into account any escape characters you have.

    [​IMG]

    You can download it from here, or copy-paste it into your own file from below:
    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.
     
    #5
    nathanlink169, Eliaquim and caethyril like this.
  6. nathanlink169

    nathanlink169 Veteran Veteran

    Messages:
    42
    Likes Received:
    14
    Location:
    Ottawa
    First Language:
    English
    I’ll take a look at this, thank you so much for your help!
     
    #6

Share This Page