Jump to content

Phaser Text Width Issue


Recommended Posts

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 :)






Link to comment
Share on other sites

    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 :)

Link to comment
Share on other sites

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:



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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": 880611phaserBugstrokeThickness1.png
strokeThickness: "3": 990575phaserBugstrokeThickness2.png
strokeThickness: "9": 188093phaserBugstrokeThickness3.png

The settting strokeThickness: "10" or above leads to an error:
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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

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