jyapayne

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

 

Thanks!

 

Screenshot:

post-7617-0-00741100-1396669671.png

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:

 

post-7617-0-41793400-1396673936.png

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.