Jump to content

Text Underline [SOLVED]


Recommended Posts

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...