Sign in to follow this  
Sturb

Phaser.Text auto size font for dynamic text.

Recommended Posts

Hey guys, I did a quick search (and I mean quick) and couldn't find anything on this subject. I'm going to need to adjust the font size of a Phaser.Text object based off the length of the string for localization purposes. It's going to have include both cases where the Phaser.Text object is using word wrap or not. Basically I would want to define the text bounds' width and height then set the text. If the text goes outside the defined, then I would want to be able to adjust the font size to tuck everything back within those bounds.

An example would be dynamic button text for multiple languages. Or an instructions paragraph where the text needs to stay within a certain bounds no matter the language it's in.

If anyone could provide any advice on this, it would be greatly appreciated.

EDIT: Oh! Forgot.. It would be nice if this could work with bitmap font as well.

Share this post


Link to post
Share on other sites

Figured out a solution for now. This hasn't been tested with Bitmap font yet because I haven't gotten to that stage of implementation. Here it is if anyone is interested.

export function setText(field: Phaser.Text, text: string, width?: number, height?: number){	// So we don't lose the original value of the font size, create a property on the field to store it.	if (!('defaultFontSize' in field))	{		field['defaultFontSize'] = field.fontSize;	}	// Set the field's font size back to it's original value before setting the new text.	field.fontSize = field['defaultFontSize'];	// If word wrap is set, then use the word wrap width as the bounds' width instead.	if (field.wordWrap)	{		width = field.wordWrapWidth;	}	// Set the field's text property.	field.text = text;	// Check if bounds were provided.	if (width > 0 && height > 0)	{			// Use the default font size as a base for the auto sizing.		var size: number = field['defaultFontSize'];		// While the width or height is greater then the provided bounds, subtract one from the font size.		while ((field.width > width || field.height > height) && field.fontSize > 4)		{			field.fontSize = --size;		}	}}

Share this post


Link to post
Share on other sites

Just posting that typescript snippet again, but with proper line ending 😕

export function setText(field: Phaser.Text, text: string, width?: number, height?: number) {
    // So we don't lose the original value of the font size, create a property on the field to store it.
    if (!('defaultFontSize' in field)) {
        field['defaultFontSize'] = field.fontSize;
    }

    // Set the field's font size back to it's original value before setting the new text.
    field.fontSize = field['defaultFontSize'];

    // If word wrap is set, then use the word wrap width as the bounds' width instead.
    if (field.wordWrap) {
        width = field.wordWrapWidth;
    }

    // Set the field's text property.
    field.text = text;

    // Check if bounds were provided.
    if (width > 0 && height > 0) {
        // Use the default font size as a base for the auto sizing.
        var size: number = field['defaultFontSize'];
        // While the width or height is greater then the provided bounds, subtract one from the font size.
        while ((field.width > width || field.height > height) && field.fontSize > 4) {
            field.fontSize = --size;
        }
    }
}

Didn't try it, but I'm a simple human and reading code is easier when it's not on a single line.

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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.