Text Underline [SOLVED]

[brentstrandy]

Is there a way to underline text? This seems like such a simple question, but I can't find a solution on the internets.

I'd image adding a simple "underline" to the font attribute would work, but no luck.

this.game.add.text(0, 0, 'test', { font: '18px Verdana', fill: '#000000', wordWrap: true, wordWrapWidth: 230 }, this);

Thanks for any insight!

[rich]

Sadly not. The Phaser Text object is basically a mini internal Canvas, which uses fillText to render the text to (and then builds a texture from that), but fundamentally it means that if fillText can't handle it, Phaser.Text can't handle it either, and for some reason underlines aren't part of the Canvas API.

[Arcanorum]

Perhaps something for Phaser 3?

[rich]

No unless it's added to the Canvas API too.

[brentstrandy]

I found a workable solution by manually drawing lines under my text. It's quite straightforward too.

// Text Object containing the string to be displayed
let textObject = this.game.add.text(0, 0, 'My Text', { font: '18px Verdana', fill: '#000000' }, this);
// Graphics Object used to draw a line
let underline = this.game.add.graphics(textObject.left, textObject.bottom - 7);

// Specify the line (size, color)
underline.lineStyle(2, 0xE21838);
// Location to start drawing the line (x, y)
underline.moveTo(0, 0);
// Draw a line the width of objectText's string
underline.lineTo(textObject.width, 0);

 

TIP: If you need multi-line support you can use precalculateWordWrap to break apart your string into an array and write some fancy code to put underlines below each row of text.

[brentstrandy]

I just finished extending the Phaser.Text object to add underline functionality.

You can find the code here: https://github.com/brentstrandy/phaser-underline-text/blob/master/underlineText.js

Any feedback would be appreciated!