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






Share this post

Link to post
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 :)

Share this post

Link to post
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:



Share this post

Link to post
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.

Share this post

Link to post
Share on other sites

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;

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
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.