Phaser Text Width Issue

[jyapayne]

Hey everyone!

 

I'm starting a new game, and I'm using a truetype handwriting font for the title. However, where the font gets really swirly, it looks like the texture size is not big enough to fit the entire swirl, so it gets cut off.

 

I was wondering if anyone knows how to increase the size of the texture to render the whole font nicely. I would really like to use this font and I'd appreciate it if anyone can help

 

Thanks!

 

Screenshot:

[codevinsky]

Can you show your code?

[jyapayne]

    createTitle: function(){        var jacquelyn = "Jacquelyn";        var style = { font: "72px Scriptina", fill: "#ffffff", align: "center", stroke: "#000000", strokeThickness: 2};        var jacquelyn_text_element = this.add.text(this.camera.x + this.camera.width/2, this.camera.y + this.camera.width/2, jacquelyn, style);        jacquelyn_text_element.anchor.setTo(0.5, 0.5);        console.log(jacquelyn_text_element);        this.add.tween(jacquelyn_text_element).to({ alpha: 1 }, 600, Phaser.Easing.Quintic.Out).start();        var text = "Click or tap to start!";        var style = { font: "12px Nokia", fill: "#ffffff", align: "center", stroke: "#000000", strokeThickness: 1}        var text_element = game.add.text(game.camera.x + game.camera.width/2, game.camera.y + game.camera.height/2+150, text, style);        text_element.anchor.setTo(0.5, 0.5);        text_element.alpha = 0;                var tween = game.add.tween(text_element).delay(500).to({alpha: 1}, 500).start();        game.add.tween(text_element.scale).to({ x:1.2 , y:1.2}, 1000).to({ x:1.0, y:1.0 }, 1000).loop().start();        tween.onComplete.add(function(){this.startable = true;}, this);            },

Not anything too fancy, just general text use

[codevinsky]

Let me take a quick look...

[Dream Of Sleeping]

Perhaps you could just change the updateText method in phaser to make the maxLineWidth variable larger.

[codevinsky]

Yeah... it doesn't seem that we can actually change the display width.

 

I've tried changing widths and setting the text's dirty property.

[jyapayne]

Perhaps you could just change the updateText method in phaser to make the maxLineWidth variable larger.

 

Yeah, that works, and I can use it for now, but I was hoping for a less "invasive" approach. Anyway, thanks for the tip! I got it to display the way I wanted it

 

@codevinsky: Thanks for trying to work it out. I tried playing with all those widths as well, and no good came of it.

 

Thanks for the help, guys!

 

For reference, I had to change two lines in updateText:

this.canvas.width = maxLineWidth + this.style.strokeThickness + 40;

That one for making the width larger.

 

And then:

linePosition.x += (maxLineWidth - lineWidths[i]) / 2 + 30;

that one for aligning the text slightly to the right so the left edge wouldn't be cut off.

 

The result is this:

 

[Dream Of Sleeping]

I was thinking you could have just increased the maxLineWidth before it set the canvas width. So after the for loop, maxLineWidth += 40 then it would have centered itself. Although I might be wrong and not that one line of code matters. lol  I'm glad you've got it working.

 

It would be cool if Phaser text had a fineTune variable which you could alter in times when it cuts off text.

[yahiko]

I got the same issue.
It seems to be a problem with the style strokeThickness.
 
I also updated Phaser.Text.prototype.updateText in phaser.js.

var width = maxLineWidth + this.style.strokeThickness;

was replaced by

var width = maxLineWidth + 2 * this.style.strokeThickness;

[MichaelD]

You can also use the new 2.3.0 option of offsetX/offsetY

 

http://phaser.io/docs/2.3.0/Phaser.Text.html#offsetX

 

Those were created for this reason exactly.

[yahiko]

How would you use those options? Because, in the documentation, offsetX and offsetY are read-only attributes.

To be more explicit about my issue, here is my main code which is really simple:

function create() {    var style = { font: "bold 20pt Book Antiqua", fill: "#472400", stroke: "#999999", strokeThickness: "0" };    var textPlayer1 = this.add.text(10, 0, 'Francis Drake', style);}window.onload = () => {    game = new Phaser.Game(900, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });};

Here are the outputs according to different values of strokeThickness:
strokeThickness: "0":
strokeThickness: "3":
strokeThickness: "9":

The settting strokeThickness: "10" or above leads to an error:
NS_ERROR_FAILURE:
this.context.scale(this.resolution, this.resolution);

phaser.js (ligne 41237)

When I change the source phaser.js according to my previous post, it solves the issue for values of strokeThickness below 10.

[MichaelD]

Have you tried calling textPlayer1.update() and textPlayer1.updateText() ?

[yahiko]

According to my previoud test when I tried solving the strokeThickness issue in phaser.js, the method textPlayer1.updateText() is called automatically.

I don't need to explicitly call it in my application.