Label text word wrap

[TouwaStar]

Is there a way to make text or label objects automatically word-wrap when reaching a certain size?

I want to define a sort of a textbox.
My current solution just uses a Label and an Actor serving as the backdrop but even if I put them in a parent-child relation it does not seem to create any word wrapping.

Fitting Text

Not fitting text

What automatic word-wraping would do

Does the framework offer any way to tackle this ?

[eonarheim]

@TouwaStar Thanks for the discussion thread! Currently there isn't anything built into Excalibur to handle text word wrap.

It's definitely something that would be a useful feature in Excalibur though! It is a tricky problem to solve for sure, I'll write up and issue around this so it can be supported 👍

A couple workarounds I can think of:

1. The lo-fi: Manually manage the breaks and insert newline characters into your text\n and manually break into multiple lines.
2. The hi-fi: Use an ex.Canvas object to manually draw text and use a canvas text library, this one https://github.com/geongeorge/canvas-txt looks pretty good and seems to work, example below:

// <script src="//unpkg.com/canvas-txt"></script>
var canvasTxt = window.canvasTxt.default;
// or npm install canvas-txt --save
// import canvasTxt from 'canvas-txt'


var textGraphic = new ex.Canvas({
  width: 200,
  height: 200,
  draw: (ctx: CanvasRenderingContext2D) => {
    const txt = 'Some extra long text that should wrap properly to the next line automatically';
    ctx.save();
    canvasTxt.font = 'Verdana';
    canvasTxt.fontSize = 20;
    canvasTxt.align = 'left';
    // canvasTxt.debug = true //shows debug info
    canvasTxt.justify = false
    canvasTxt.drawText(ctx, txt, 0, 0, 200, 200);
    ctx.restore();
  }
});
var textActor = new ex.Actor();
textActor.graphics.use(textGraphic);

var game = new ex.Engine({
  width: 400,
  height: 400
});
game.currentScene.camera.pos = ex.vec(0, 0);

game.add(textActor);

game.start();

[TouwaStar]

i ended up doing a small function that will format the text for me to fit the box its in

function fitTextInDiplayBox(box: Actor, label: Label) {
    var wordsInLabelText = label.text.split(" ");
    label.text = "";

    while (wordsInLabelText.length > 0) {
        var word = wordsInLabelText.shift();
        if (word === undefined) {
            break;
        }

        if (wordsInLabelText.length > 0) {
            word += " ";
        }

        label.text += word;

        if (label.getTextWidth() > box.width) {
            label.text = label.text.slice(0, -word.length)
            label.text += "\n";
            label.text += word;
        }
    }
}

[eonarheim]

@TouwaStar Awesome! Do you mind if we reference your snippet as a starting point for an implementation?

I've created an issue for Excalibur to support this type of thing out of the box #2463

[TouwaStar]

sure, go ahead !

[TouwaStar]

Go ahead!

…

On Tue, 16 Aug 2022, 14:50 Erik Onarheim, ***@***.***> wrote: @TouwaStar <https://github.com/TouwaStar> Awesome! Do you mind if we reference your snippet as a starting point for an implementation? I've created an issue for Excalibur to support this type of thing out of the box #2463 <#2463> — Reply to this email directly, view it on GitHub <#2458 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHIRIWI5VYRC7CVU2P3ZN33VZOE7VANCNFSM56J5NSNA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[djcsdy]

You might also be interested in excalibur-extended-label (for Excalibur 0.24.x) and excalibur-text (for Excalibur 0.25+).

These are built specifically for our needs and have some other differences to the built-in Excalibur text rendering, but they do also support word wrap.

Other differences:

• No support for SpriteFont.
• Font is not used, font family, bold, etc are set directly on the Graphic/Label (necessary due to the different approach we took to rendering text).
• Outline is drawn differently (drawn on the outside of the text instead of on the edge and partially inside the text (with some caveats if color.alpha !== 1, although you probably want to set opacity instead).
• Shadow is drawn differently to avoid the shadow appearing over the text in some cases, although it should look the same as Excalibur's shadow in most cases.

[eonarheim]

Thanks for sharing! I'll definitely be checking these out for ideas if you're cool with that

[djcsdy]

Absolutely. I released it under the ISC license which is pretty unrestrictive, but please consider this comment a personal license for everyone who has contributed to excalibur to modify, reuse and/or redistribute the code of excalibur-extended-label and excalibur-text under any license you like, with or without attribution.