Attribute Escape Codes

[lordvalinar]

Firstly, I apologize if this is in the wrong section. I'm not exactly sure if this falls under this category or learning javascript..

The point of order is "How to process attribute/parameter names with escape codes to show up in windows?"
Example, I have the screenshot below of the icons setup in the database, but they don't show in game. I know -why- by looking at the code it only draws normal text, but the normal code to draw processed character is mainly for Game_Message()

Window_Base.prototype.drawTextEx = function(text, x, y) {
    if (text) {
        var textState = { index: 0, x: x, y: y, left: x };
        textState.text = this.convertEscapeCharacters(text);
        textState.height = this.calcTextHeight(textState, false);
        this.resetFontSettings();
        while (textState.index < textState.text.length) {
            this.processCharacter(textState);
        }
        return textState.x - x;
    } else {
        return 0;
    }
};

The screenshot below is using ( YEP_EquipCore ) <- download link in case anyone needs it, and thus the parameter is drawn via this method:

Window_StatCompare.prototype.drawParamName = function(y, paramId) {
    var x = this.textPadding();
    this.changeTextColor(this.systemColor());
    this.drawText(TextManager.param(paramId), x, y, this._paramNameWidth);
};

So... how do I convert TextManager.param(paramId) into processed characters?

 

[caethyril]

Message escape codes generally come in two varieties, which I'll call "substitution" (e.g. \v[x], \n[x], \p[x], \g) and "action" (e.g. \c[x], \i[x], \., \{).

Substitutions are performed before the message starts displaying. The relevant codes are swapped out for appropriate values, which changes the message text. As you can see from the snippet you quoted, the replacement itself occurs in the convertEscapeCharacters method (check Window_Base in rpg_windows.js).

Icons, however, are not text: they're little pictures. The \I[x] code is handled by a different routine, processEscapeCharacter. Basically, Window_Message checks each character, looks for any special characters (e.g. backslash) and if it finds any, processEscapeCharacter gets called to, e.g. change the text colour, draw an icon, etc. Code excerpt:

Spoiler: Window_Base.prototype.processEscapeCharacter

Window_Base.prototype.processEscapeCharacter = function(code, textState) {
    switch (code) {
    case 'C':
        this.changeTextColor(this.textColor(this.obtainEscapeParam(textState)));
        break;
    case 'I':
        this.processDrawIcon(this.obtainEscapeParam(textState), textState);
        break;
    case '{':
        this.makeFontBigger();
        break;
    case '}':
        this.makeFontSmaller();
        break;
    }
};

You could add a processEscapeCharacter call to wherever the window draws its text; textState is defined on Window_Base so should be inherited by this window. However, I imagine you'd have to set up a loop for the text display as well, to process it on a per-character basis (like Window_Message) rather than all at once.

It would probably be easier to just code something that specifies the icons directly, draws them, and shifts the attribute names over a bit.

 

[Astfgl66]

Window_StatCompare is most likely an instance of window base, so how about just changing the drawText command to the drawTextEx command in the function you posted ?

Window_StatCompare.prototype.drawParamName = function(y, paramId) {
   var x = this.textPadding();
   this.changeTextColor(this.systemColor());
   this.drawTextEx(TextManager.param(paramId), x, y, this._paramNameWidth);
};

drawTextEx and the functions to draw character per character and process escape codes are window_base functions and as such can be called in all windows.
There's probably a reason it wasn't used in menus though, so you should expect unintended side effects.

 

[lordvalinar]

Window_StatCompare is most likely an instance of window base, so how about just changing the drawText command to the drawTextEx command in the function you posted ?

Window_StatCompare.prototype.drawParamName = function(y, paramId) {
   var x = this.textPadding();
   this.changeTextColor(this.systemColor());
   this.drawTextEx(TextManager.param(paramId), x, y, this._paramNameWidth);
};

drawTextEx and the functions to draw character per character and process escape codes are window_base functions and as such can be called in all windows.
There's probably a reason it wasn't used in menus though, so you should expect unintended side effects.

Mainly because drawTextEx has the parameters of (text, x, y), where as you can see DrawText has (text, x, y, width, align). Therefore I'd have too many parameters put into drawTextEx... and I'm sure many errors would pop up.

It would probably be easier to just code something that specifies the icons directly, draws them, and shifts the attribute names over a bit.

That's what I'm asking for help on Mainly how to convert the icon characters + TextManager.param(paramId)

I'm still an amateur and not really good on the match/regex or whatever stuff

 

[caethyril]

Mainly because drawTextEx has the parameters of (text, x, y), where as you can see DrawText has (text, x, y, width, align). Therefore I'd have too many parameters put into drawTextEx... and I'm sure many errors would pop up.

I think the width is only for squishing up the text if it's too large, but drawTextEx ignores that since it processes on a per-character basis, so you should be able to simply omit it.

That's what I'm asking for help on Mainly how to convert the icon characters + TextManager.param(paramId)

I'm still an amateur and not really good on the match/regex or whatever stuff

I was thinking something much more direct: a plugin that literally specifies icon indices for each attribute, e.g. "draw icon 247 in front of Max Health, 257 in front of Max Stamina, etc". No text parsing or anything. I think @Astfgl66's suggestion is definitely worth a try, though; I didn't notice before, but drawTextEx does seem to call the appropriate method.

 

[Astfgl66]

Yeah there's no issue with having extra parameters. Width is the important one here and your text won't squish if it's too long using drawTextEx. That's probably why drawText was used instead.
I've done this many times in menus in custom plugins and aside from that there's no other effects I know of.

Caethryl's solution of using a plugin to draw an icon directly is the way to go if you don't want to make an horribly complicated version of drawTextEx that takes width into account and width is necessary, in my opinion.

 

[lordvalinar]

Yeah there's no issue with having extra parameters. Width is the important one here and your text won't squish if it's too long using drawTextEx. That's probably why drawText was used instead.
I've done this many times in menus in custom plugins and aside from that there's no other effects I know of.

Caethryl's solution of using a plugin to draw an icon directly is the way to go if you don't want to make an horribly complicated version of drawTextEx that takes width into account and width is necessary, in my opinion.

I agree with you and Caethryl's solution. The problem I'm having is the -how- Specifically... how do I take "TextManager.param(paramId)" from the drawText() function above, and convert it to account for the icon text listed before it, and then return the new value into the drawText() function.

I feel using drawTextEx will not get the same effect that I want (esp. using Yanfly plugins) like you said... width is necessary (in my opinion too). So what I'm saying is, I'm not looking for -what- solution to use, but -how- to go about doing it now? If that makes sense.

EDIT: I have a plugin already that I'm using to override and alias a lot of methods, so I can use that to overwrite "Window_StatCompare.prototype.drawParamName" (converting the text before passing it on)

 

[Astfgl66]

I'd use a regular expression to catch the number in the brackets, then use that number to draw the text using a drawIcon command.
Then remove the part of the text I've just used before drawing it probably again with a regexp.

 

[lordvalinar]

I'd use a regular expression to catch the number in the brackets, then use that number to draw the text using a drawIcon command.
Then remove the part of the text I've just used before drawing it probably again with a regexp.

Alright I'll try that. May take me awhile (got a D&D game here in a moment, so will have to work on it tomorrow) and I'm not good with regular expressions (as I mentioned ) but I'll read up on it or look up a tutorial or something, unless someone is willing to give me a hand with that line lol (but then I'd never learn.. or I'll learn later my procrastination side says)

I tried making a function that duplicates the drawTextEx method under Window_StatCompare and this is what happened lol

Spoiler

 

[Astfgl66]

Best tip I can give you is to use the already available regexp for getting the number.
Look at how the engine does it and copy it.
I'd dodge the second regexp by looking for the first instance of ] and removing everything in my string before that.
That's if I intended to have an icon before everything in that window of course.

 

[lordvalinar]

-SIGHS-

Yeah... just replacing it with drawTextEx did the trick f*** my life lol

Best tip I can give you is to use the already available regexp for getting the number.
Look at how the engine does it and copy it.
I'd dodge the second regexp by looking for the first instance of ] and removing everything in my string before that.
That's if I intended to have an icon before everything in that window of course.

This is apparently how they get it.... but it makes 0 sense to me

Window_Base.prototype.obtainEscapeParam = function(textState) {
    var arr = /^\[\d+\]/.exec(textState.text.slice(textState.index));
    if (arr) {
        textState.index += arr[0].length;
        return parseInt(arr[0].slice(1));
    } else {
        return '';
    }
};

:\ regular expressions are not my strong suit
EDIT: Like I mean I get where the textState came from... so that's a start I guess.

EDIT2: I don't know if this helps at all, but here's a test run, just to show in game, log, and script. As for the regular expression, I'm still trying to think on how to pass in textState... since it seems to pass it in 1 character at a time ?

Spoiler

 

[slimmmeiske2]

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.