Forums » Help » trying to create an auto word-wrapper plugin, line breaks not functioning properly

so i needed a way to dynamically display text within certain boundaries, and as there is no current built-in word-wrap functionality or much in the way of formatting text at all i decided to create a small plugin to auto-wrap text instead of having to manually insert line breaks into the text to be displayed.
my problem is that the string returned by the wrapper doesn&039;t execute line breaks in the displayed font (#font.draw()##). it does however display them correctly in the console when the string is logged. here is what i have for the plugin in so far:

CODE:

ig.module('game.plugins.WordWrapper').requires('impact.font').defines(function() {
    WordWrapper = ig.Class.extend({
        font: null,
        box: null,
        init: function(f, b) {
            this.font = f;
            this.box = b;
        },
        wrapMessage: function(message) {
            var words = message.split(" ");
            var wordWidths = this.getWordWidths(words);
            var width = this.box.w;
            var newLine = "\n";
            var space = " ";
            var spaceWidth = this.font.widthForString(" ");
            var widthCounter = 0;
            var newMessage = "";
            for (var i = 0; i < wordWidths.length; i++) {
                if (widthCounter + wordWidths[i] + spaceWidth <= width) {
                    widthCounter += wordWidths[i] + spaceWidth;
                    newMessage += words[i] + space;
                } else {
                    widthCounter = 0;
                    widthCounter += wordWidths[i] + spaceWidth;
                    newMessage += newLine + words[i] + space;
                }
            }
            return newMessage;
        },
        getWordWidths: function(wordsArr) {
            var arr = new Array();
            for (var i = 0; i < wordsArr.length; i++) {
                arr.push(this.font.widthForString(wordsArr[i]));
            }
            return arr;
        }
    });
});

it works by passing a user defined font and a &039;box' object which has at least a value for the key #w ({w: 100}) for the width of the bounding box. and then in the ##wrapMessage(message)## function the message parameter is split into words delimited by spaces, then an array of the lengths of each word is created. then using ##font.widthForString(text)## and a counter words and spaces are added to a string to be returned in succession until the counter + word + space is greater than the bounding box&039;s width at which point the counter is reset, a #line break is added to the string followed by the word + space that would have made the counter greater than the box's width. and the process continues until the words array has been fully traversed.

I&039;m not sure what is being lost in translation, because like i said the returned string's line breaks display correctly in the console, just not when using ##font.draw(text, x, y)# and i know that line breaks are working in impact because if i hard code the line breaks into the string and don't process it through the WordWrapper then they display correctly. so i know it is something to do with my code just not sure what exactly i'm doing wrong. any help would be greatly appreciated. thanks

Check out https://github.com/Joncom/pokemon-chat/blob/master/client/lib/game/entities/chat-bubble.js as it may give you some ideas on this. particularly the process() function.

I'm currently at work so I'll take a look when i get a break, thanks, I'll let you know how it goes

@ jizaymes - while the link you provided is a cleaner, more stream-lined version of what I already had, I am still running into the same problem. has anyone else implemented a word-wrap method that successfully executes line breaks?

okay so i figured it out...I was calling ## this.parent(x, y, settings) ## at the end of the init method where i was making the call to ## WordWrapper.wrapMessage(msg) ## all i needed to do was move it to the top of the init() method. so I modified and merged the code from the link @jizaymes provided into my own and this is what i came up with. This solution will (currently) wrap text around a given max line width through the box parameter. In the future I envision some sort of overflow setting, to contain the text in a vertical manner as well (possibly through the use of a custom scroll bar) anyways here is the code

CODE:

ig.module('game.plugins.WordWrapper').requires('impact.font').defines(function() {
    WordWrapper = ig.Class.extend({
        font: null,
        box: null,
        init: function(f, b) {
            this.font = f;
            this.box = b;
        },
        wrapMessage: function(msg) {
            var maxLineWidth = this.box.w;
            var newMessage = '';
            var words = msg.split(' ');
            var lines = new Array();
            var line = '';
            for (var i = 0; i < words.length; i++) {
                var space = (i == 0) ? '' : ' ';
                var str = currentLine + space + words[i];
                if (this.font.widthForString(str) <= maxLineWidth) {
                    line = str;
                } else {
                    lines.push(line);
                    line = words[i];
                }
            }
            if (line != '') {
                lines.push(line);
            }
            for (var i = 0; i < lines.length; i++) {
                if (i != 0) {
                    newMessage += "\n";
                }
                newMessage += lines[i];
            }
            return newMessage;
        }
    });
});

if anyone has any constructive criticisms, tips, or ideas for improvements please don't hesitate to comment. Hope this will help make some of your lives a little easier.