Ankit Kothari Posted August 24, 2018 Share Posted August 24, 2018 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 More sharing options...
mrseo88 Posted August 24, 2018 Share Posted August 24, 2018 Hi, you can finde it here https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.TextStyle.html#setFixedSize__anchor Link to comment Share on other sites More sharing options...
Ankit Kothari Posted August 24, 2018 Author Share Posted August 24, 2018 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. Link to comment Share on other sites More sharing options...
mrseo88 Posted August 24, 2018 Share Posted August 24, 2018 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? Link to comment Share on other sites More sharing options...
Ankit Kothari Posted August 24, 2018 Author Share Posted August 24, 2018 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 More sharing options...
mrseo88 Posted August 24, 2018 Share Posted August 24, 2018 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 More sharing options...
awbummer Posted November 22, 2018 Share Posted November 22, 2018 I'm stumped on this one. Anyone know how to apply word wrap to a bitmaptext object? Link to comment Share on other sites More sharing options...
awbummer Posted November 23, 2018 Share Posted November 23, 2018 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 Ankit Kothari 1 Link to comment Share on other sites More sharing options...
Recommended Posts