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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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