How to .drawtext with automatic line break?

[Nightcrow]

Hey guys,

so I am currently scripting and playing around with the RPG Maker MV and I am making a profession system/menu from scratch to get to know JavaScript. I have some basic Ruby and advanced Python experience, so I just dug right in.

The scenario is this: I created a help window which shows a description of the selected recipe from the recipe list, but the text in that help window does not break lines automatically. I tried and searched in the Window_Base section for a solution and I am guessing I am searching in the right spot, but I cannot wrap my head around a solution to that problem.
I tried to play around with the .process[...] functions and the .drawtext's maxWidth, but as expected, it just does not work that easily.

So .. how do I write a function or string of code that checks if the displayed text is exceeding the .drawtext's maxWidth and breaks the line before the word which is being cut off?

Thank you for taking your time,
Nightcrow

 

[caethyril]

There may be an easier way, but I'd go about it roughly like this:

• First, identify break points for new lines (the tricky bit!). There's a textWidth(text) function defined on Window_Base that you could use for this. I'd probably do this by adding words one by one until the resulting line would be wider than the width available (or the end of the text is reached), if that makes sense.
• Split the input text into an array of text lines based on these points.
• drawText once per line with an appropriate y-offset, e.g. this.lineHeight().

You could also check out a plugin that has implemented wordwrapping (e.g. Yanfly's Message Core) to see how it's been done before. ^_^

 

[Nightcrow]

Hey

Thanks for your reply! You gave me some good inspiration. I am planning on checking if the width of the string is bigger than the width of the window and if so, to look for the last space character within the string and place a \n just right at that position. It is not that complicated nor hard to write actually, BUT \n does not work.
I tried to:

• add \n in quotes
• add \n without quotes
• add \n right in the original string with quotes/without them
  
• save \n in a seperate variable and add it between two strings (which are saved in variables)
• save the strings in arrays and test that with everything mentioned above

Do you have any suggestions on what I could try out? I cannot open Yanfly's Message Core for some reason ..

Thank you,
Nightcrow

 

[LTN Games]

It's a fairly easy method depending on how you want it done.
Here I created one for my Quest Journal plugin: https://gitlab.com/FeniXEngineMV/plugins/blob/dev/src/FNX_QuestJournal.js#L1087

Here is a slightly modified version of the above, to clean up the unnecessary stuff. It should work, it's nothing special and you can modify as you wish, it's MIT License.

 Window_Base.prototype.drawTextAutoWrap = function (text, x, y) {
    if (!text) {
      return
    }
    const words = text.split(' ')
    let x2 = x
    let y2 = y
    words.forEach((word) => {
      word = this.convertEscapeCharacters(word)
      const width = this.textWidth(word + ' ')
      // Check for linebreak symbol '/n'
      if (word === `\x1bn`) {
        y2 += this.lineHeight()
        x2 = 0
      }
      if (x2 + width >= this.contents.width) {
        y2 += this.lineHeight()
        x2 = 0
      }
      this.drawText(word + ' ', x2, y2)
      x2 += width
    })
  }

Edit: It may not work as expected, it's old and could use some testing

 

[Frogboy]

In RPG Maker MV, \n doesn't work. You'll want to use String.fromCharCode(13). It's either 13 or 10. I can't remember off the top of my head. That'll give you a line break, though.

 

[Poryg]

\n does work, it is even defined in the scripts, but you need to use drawTextEx instead of drawText. drawTextEx is the thing that allows you to use escape codes, you can't use them with just drawText. But it is trueusing drawTextEx complicates matters a bit, since it processes text via characters.