I need to crop text or wordwrap using bitmaptext

[Ankit Kothari]

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.

[mrseo88]

Hi,
you can finde it  here 
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.TextStyle.html#setFixedSize__anchor

[Ankit Kothari]

Just now, mrseo88 said:

Hi,
you can finde it  here 
https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.TextStyle.html#setFixedSize__anchor

i tried out all the methods and properties but it didnt apply i dont know why.

[mrseo88]

2 minutes ago, Ankit Kothari said:

i tried out all the methods and properties but it didnt apply i dont know why.

Can you post a part of your code?

[Ankit Kothari]

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;
}
 

 

[mrseo88]

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

[awbummer]

I'm stumped on this one. Anyone know how to apply word wrap to a bitmaptext object?

[awbummer]

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