Jump to content

I need to crop text or wordwrap using bitmaptext


Ankit Kothari
 Share

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.

Link to comment
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;
}
 

 

Link to comment
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

Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...