Ankit Kothari

I need to crop text or wordwrap using bitmaptext

Recommended Posts

I tried out multiple methods and property from the 

https://labs.phaser.io/index.html?dir=&q=

https://photonstorm.github.io/phaser3-docs

this both link for the phaser3 but not able to set the width of the perticular text

i also try to apply font using css but it also not working for me.

Thanks in advance.

Share this post


Link to post
Share on other sites
4 minutes ago, mrseo88 said:

Can you post a part of your code?

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);
var dynamic = null;
var value = 0;

function preload() 
{
    this.load.bitmapFont('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');
    this.load.bitmapFont('desyrel-pink', 'assets/fonts/bitmap/desyrel-pink.png', 'assets/fonts/bitmap/desyrel-pink.xml');
    this.load.bitmapFont('shortStack', 'assets/fonts/bitmap/shortStack.png', 'assets/fonts/bitmap/shortStack.xml');
}

function create() 
{

    dynamic = this.add.bitmapText(0, 500, 'desyrel', '');
    dynamic.setFixedSize(10,10)
}

function update()
{
    dynamic.text = 'value: ' + value.toFixed(2);
    value += 0.01;
}
 

 

Share this post


Link to post
Share on other sites
3 minutes ago, Ankit Kothari said:

var config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);
var dynamic = null;
var value = 0;

function preload() 
{
    this.load.bitmapFont('desyrel', 'assets/fonts/bitmap/desyrel.png', 'assets/fonts/bitmap/desyrel.xml');
    this.load.bitmapFont('desyrel-pink', 'assets/fonts/bitmap/desyrel-pink.png', 'assets/fonts/bitmap/desyrel-pink.xml');
    this.load.bitmapFont('shortStack', 'assets/fonts/bitmap/shortStack.png', 'assets/fonts/bitmap/shortStack.xml');
}

function create() 
{

    dynamic = this.add.bitmapText(0, 500, 'desyrel', '');
    dynamic.setFixedSize(10,10)
}

function update()
{
    dynamic.text = 'value: ' + value.toFixed(2);
    value += 0.01;
}
 

 

 

For text sizing use these function without  "dynamic.setFixedSize(10,10)" 

bmpText = game.add.bitmapText(32, 32, 'desyrel', text, 52);

the last parameter  of the function is the size.

For more info you can see  here: https://phaser.io/examples/v2/text/bitmaptext-max-width#gv

Share this post


Link to post
Share on other sites

So for my use case, I'm simulating typewriter behavior that outputs one word at a time. The solution I came up with, for now, is to do the following (`gorgame` is the wrapper I wrote that encapsulates Phaser 3 in my project, but the logic should be the same):

1. Add bitmap text offscreen using the same font and size that you'll be using for your regular output. We're doing this to get the dimensions of a single letter:

    const testText = gorgame.add.bitmapText(-20, -20, "msxbit", "AB", 6);
    testText.setLetterSpacing(20);

Notice I added two letters rather than one because that way it'll include the letter spacing. If you aren't including extra letter spacing, adding only one letter should suffice.

2. Gather the letter width and divide it by the word wrap width. This will give you the maximum letters per line:

    this.letterWidth = testText.getTextBounds().global.width / 2; // divide by two because two letters were added to the test text
    this.maxLetters = this.wordWrapWidth / this.letterWidth;

3. From here, my suggestion for non-typewritten output would be to split your text into an array of `maxLetter` lengths and rejoin them with new lines (`\n`).

EDIT: here's what I came up with for that:

  addLineBreaks(text, maxLetters) {
    const split = text.split(/( )/g);
    let lines = [];

    function nextLine() {
      let newLine = "";
      while (`${newLine} ${split[0]}`.length < maxLetters && split.length) {
        newLine += split.shift();
      }
      lines.push(newLine.trim());
      if (split.length) {
        nextLine();
      }
    }

    nextLine();

    return lines.join("\n\n");
  }

But since I'm simulating typewriter behavior, I'm monitoring the number of letters as each word gets added. This is what it looks like in my code:

    let str = this.text.concat(`${this.sentence[this.wordIndex]} `);
    const nextWord = this.sentence[this.wordIndex + 1];
    this.letterCount += `${this.sentence[this.wordIndex]} `.length;
    this.lookAhead = this.letterCount + (nextWord ? ` ${nextWord}`.length : 0);
    if (this.lookAhead >= this.maxLetters) {
      this.letterCount = 0;
      str = `${str}\n`;
    }

4. If the letter count exceeds the maximum number of letters per line, reset the letter count and add a new line to the typewriter output:

    if (this.letterCount >= this.maxLetters) {
      this.letterCount = 0;
      str = `${str}\n`;
    }

And here's the resulting "wrap" behavior: https://imgur.com/a/X16uqCE

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

  • Recently Browsing   0 members

    No registered users viewing this page.