Hey! is there some way to add strikethrough text to the scene?

Phaser 3
1

Hey! is there some way to add strikethrough text to the scene? via this.add.text, and select such textStyle or something else in the properties. Don’t use rex plugins or anything else third party

2

Hi,

It seems there is a setStroke method:
https://newdocs.phaser.io/docs/3.55.2/Phaser.GameObjects.TextStyle#setStroke

// color is a string like "#ff0000" and thickness is a number (of pixels)
yourTextElement.setStroke(color, thickness)
3

Unfortunately the setStroke method only sets borders around the edges of the text. I need the text to be crossed out with a line
image

4

Ah my bad, I didn’t try it myself and thought it would have the desired effect. Didn’t think it would draw an outline…

Then I couldn’t find a dedicated method for this either in the docs.

What you could do is write a custom function that takes a text element as an argument, and draws a long thin rectangle over it. You can use text.width and a fraction of text.height to set an appropriate size for the rectangle. Either use the same color as the text element, or why not give a custom color via another argument…

5

I think for real strikethrough you would have to use a DOM game object.

6

DOM game object depends on the requirements, because DOM objects can not be overlapped by other game sprites.

But Maup-Maup had a good point there. Instead of a function you could create your own Strikethrough class and use this everytime you need this kind of text, giving the same parameters as scene.add.text.

I created a CodePen for you with a simple example of this class. Maybe it helps.