Search the Community

Hello, apologize if my question is a little generic. I'm trying to move from createJS to PixiJS. In createJS, I usually create bitmap texts starting from .png images, where each image corresponds to a single char. Using texturePacker, I create a spriteSheet .png file and json data, in which each frame is a char. Then I can use the spritesheet object to create directly a bitmap text, like the example below: var data = { "images": [ "digit.png" ], "frames": [ [1, 1, 52, 58, 0, 0, -5], [1, 61, 38, 62, 0, 0, -3], [1, 125, 48, 68, 0, 0, 0], [1, 195, 44, 62, 0, 0, -3], [1, 259, 54, 64, 0, 0, -2], [1, 325, 52, 68, 0, 0, 0], [1, 395, 48, 57, 0, 0, -5], [1, 454, 50, 60, 0, 0, -4], [1, 516, 44, 58, 0, 0, -5], [1, 576, 48, 57, 0, 0, -6], [1, 635, 24, 32, 0, 0, -34] ], "animations": { "a": { "frames": [0] }, "b": { "frames": [1] }, "c": { "frames": [2] }, "d": { "frames": [3] }, "e": { "frames": [4] }, "f": { "frames": [5] }, "g": { "frames": [6] }, "1": { "frames": [7] }, "2": { "frames": [8] }, "!": { "frames": [9] }, "?": { "frames": [10] } } } var spriteSheet = new createjs.SpriteSheet(data); var bitmapText = new createjs.BitmapText("Hello World!", spriteSheet); This is the whole process (very easy). I was wondering if I can achieve something similar in Pixi.js where it seems that a .fnt file is required.

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.

hi, I found out that the anchor.y is inaccurate for BitmapText. When I set it to 0.5, it doesn't align to center, but if I set anchor.y to 0 and add half of it's height to y, it will correctly locate at center.

Hi, Which is the most efficient way when you need to deal with many text to display (mobile/pc) ? Because i spent times on forum and didnt find a clear answer (sometimes Phaser.Text, but often BitmapText) : Thanks

Hello! Recently we released the last major version of Phaser Editor, with a lot of new stuff, like Tilemaps and Bitmap Text, but what is more exciting is the new licensing model: Freemium! So now the editor is accessible to everybody for an unlimited period of time. The free edition contains all the features, just the number of certain assets are limited (scenes: 15, tilemaps: 5, texture maps: 3), however, we think that lot of projects fit inside that bounds. We are convinced that the best for all is a model where everybody can use the editor and provide a valuable feedback, that is essential to build a better product. Take a look at the complete release notes EDITED: Recommended this introductory video from GameFromScatch: Kind Regards Arian P.S. By the way, the development of Phaser Editor v2 just started, this version is all about to support Phaser v3.

Hi all, was just wondering if there was anyway of changing the anchor of the BitmapText child sprites (character sprites) without messing with the kerning? I've successfully got the characters animating with tweenmax, but for a rotation jiggle etc would be better from the center point! Any tips greatly appreciated

I'v got a really odd issue, which happens the same way in multiple versions of phaser (definitely 2.6.2 & 2.9.2) I am using bitmap text, which works fine when I play the game first time around, but, bizarrely when the game ends & restarts the text disappears. It's used on the splash screen, and this problem isn't replicated there (i.e. every time you go back it appears!) Any ideas?

I'm currently working on a game with more than 32x32=1024 sprites on the screen at the same time with animation and everything runs 60fps. (iPhone 6 and iPad 4th Gen) But when I introduce 2 bitmaptext objects for score and level, fps drops to 15fps. Even showing fps in render function using game.debug.text has impact on performance and I have to draw a horizontal progress bar for fps instead of text. Is there a way to improve the performance with bitmapTexts?

Hello! I'm building a soccer keepie uppies game. I have many texture atlas' that make up the player and ball for my animations and some static images placed in the scene. There is also a score text in the top left corner. This all runs fine on desktop but on my iPhone 6s the fps is around the high 40's. If I remove the BitmapText then it's back up to 60fps. Even removing the player and ball and pretty much having only the score text in the scene I am noticing a hit in performance. Even if I don't update the score and have it just static at 0 points. I'm really wracking my head with this. I've been looking for a solution for nearly a week now and can't seem to come up with anything. I fell like I've tried all the tricks : ( Unfortunately I can't show any code as I am not permitted to. Has anybody else ran into an issue like this? Really hope somebody can help as I'm at a loss... Thanks!

i'm trying to make a Text object i can call and will build the correct bitmaptext var Text = function(game, target, font) { Phaser.BitmapText.call(this, game, target.x, target.y - target.height /2 , font, '', 24); this.anchor.setTo(0.5); console.log(this) } /// //so i can do something like this this.nameDisplay = new Text(game, this, 'font:default'); but it gave me an error that this.updateText is not a function, so i added Text.prototype.updateText = function() { } under the text function, but now it says 'Cannot read property "PhysicsBody" of undefined'

My last game was created with phaser 2.4 and I used bitmaptext, which worked well but the game itself had performance issues. Since updating to phaser version > 2.6, my bitmaptexts now look pixelated, especially when used at smaller font sizes and scaled down. Had anyone experienced this? How can it be fixed?

hi, i try to use the bitmap text...no problem (my text appears) When i type the e.player.anchor.x=0.5; i have an error. What do i wrong ? i have put the font and the the font.png and font.fnt below.... i have follow this : http://phaser.io/examples/v2/text/bitmaptext-anchor-y thanks if you have a solution. //preload.js var preload = function(game){} preload.prototype = { preload: function(){ this.game.load.bitmapFont('lucky','assets/font.png', 'assets/font.fnt'); }, create: function(){ this.game.state.start("GameTitle"); } } //hud.js function drawText(game){ var e=[] e.player = game.add.bitmapText(w4*3,20+20,'lucky','JOJO', w*.1); e.player.anchor.x = 0.5; e.player.anchor.y = 0.5; return e; } //in my thegame.js // drawText(game) //error is : TypeError: e.player.anchor is undefined LuckiestGuy.ttf font.fnt

Hi. I'm try to use BitmapText with pixi v.3.0.9 to display multiline text and I have some problems here. Just an example: When I use just \n symbols to word wrap it works correctly: _bitmapFontText = new PIXI.extras.BitmapText("12\n 34\n 56\n 78\n 90\n 21\n 43\n 65\n 87\n 09", { font: '35px Desyrel', align: 'right' }); _bitmapFontText.updateText(); When I use just maxWidth it works correctly too: _bitmapFontText = new PIXI.extras.BitmapText("12 34 56 78 90 21 43 65 87 09", { font: '35px Desyrel', align: 'right' }); _bitmapFontText.maxWidth = 30; _bitmapFontText.updateText(); But when I've mix them. _bitmapFontText = new PIXI.extras.BitmapText("12\n 34\n 56\n 78\n 90\n 21\n 43\n 65\n 87\n 09", { font: '35px Desyrel', align: 'right' }); _bitmapFontText.maxWidth = 30; _bitmapFontText.updateText(); The result will be so strange. Some of chars become duplicated (screenshot attached). Mixed variant it's what I really need to have, because text which I'll set in real application could contains any number of \n symbols, but it should be placed just in specific area (which could be limited with maxWidth)

I'm having a bit of trouble of finding solutions why does BitmapText is sometimes not render on Firefox I found this link and follow the suggestion of 'bubamara' but doesn't solve my problem on the issue I uploaded also my xml and .png so maybe can help to look on the problem currently i am making use of Phaser v2.4.7 | Pixi.js v2.2.9 Thanks a lot in advance. bet_text.xml

How to change the Bitmap text color? this.text = new PIXI.BitmapText('example', {font: "16px nbp", align: "left"});We need to use any filters? Or use a mask?

I am experiencing an odd problem aligning the text of a BitmapText to the center. I am successfully able to wrap the text by using the "maxWidth" property, but the alignment of the text is uneven / jagged (see attached screenshot). It doesn't align to the center, some words are more to the left, and some are more to the right. I can't understand what's going on. I am using the code below (typescript): let hintText:Phaser.BitmapText = this.game.make.bitmapText(0, 100, "MSR", "", 25, "center"); hintText.maxWidth = 310; this.add(hintText); hintText.text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut mattis velit. Cras placerat fermentum dictum. Donec at semper enim. Donec euismod pulvinar volutpat."

Hi, how to make bold BitMapText?

First off, thanks very much for the amazing tool, it must be a lot of work to maintain and it's amazing to be able to use it for free. As for the main issue, I'm getting an error when I try to add a geometric object to a group: phaser.js:14115 Uncaught TypeError: a.setStageReference is not a function Perhaps this is because groups are implemented in Pixi and geometry in Phaser? I'm doing this because I have a custom bitmapText, and text in general seems very unresponsive when I tap it. In particular, I think tapping in between adjacent characters won't fire an event. So I want to place a rectangle over each bitmapText with corresponding width and height, to capture and fire the appropriate event, but my text is part of a group for positioning, and so I would need to add the geometry to group as well. Any solution or alternatives would be greatly appreciated.

Is it possible to tween a bitmap text object? I took some code from the Examples website and tried it on a bitmap text, but nothing happened. I tried the same code on a sprite, and it worked.

Hi everyone, I can't figure out how to get kerning to work with BitmapText in my game. I've created my own font which works fine apart from the kerning. Debugging shows that the kerning information is parsed by Phaser (2.4.4) and used to determine line breaks but it is ignored when rendering. It works as expected if I add the kerning to this line but I haven't read enough of the source to be sure it's a bug. Is there anything might I have overlooked like a special setting when loading the font? I'd post code but so far I doubt it's relevant.

I'm trying to increase the performance of my game, i'm planning to use a monospace typography so I'm able to use both BitmapText and RetroFont, i've read BitmapText.generateTexture enables a better performance, is that performance better than using plain RetroFont alone ? Thank You.

how to keep something from appearing outside of an area.

Hi, I've come from an OOP style background with AS3, etc. I'm struggling to work out how to groups things together (kind of like a movieclip in flash). So basically i want to create an object, which will have certain values i can access, but also have created several sprites, and bitmaptext associated with it. Example of how i want to create my object: createNewUpgradeItem:function(myNumber){ var upgradeItem = new UpgradeItem(this, 25, 200+i*55, GAME_NAME.UpgradesAvailable.name, GAME_NAME.UpgradesAvailable.description, GAME_NAME.UpgradesAvailable.upgradePrice, GAME_NAME.UpgradesAvailable.priceMultiplier, GAME_NAME.UpgradesAvailable.sMultiplier, GAME_NAME.UpgradesAvailable.cMultiplier, i%4); GAME_NAME.upgradeMenu.add(upgradeItem); // Doesn't Work upgradeItem._background.events.onInputDown.add(function(){UpgradeItemUpdate(this,upgradeItem);console.log(upgradeItem._name)},this); }, // Where 'i' would be a count (in a for loop) to create several objects. And UpgradesAvailable[] is an array of information to be passed. This works fine i believe and it creates the objects fine and puts them on screen,etc. What i want to do is have this upgradeItem added to a Group (say MenuGroup), so I would have thought something like the following would have worked: GAME_NAME.upgradeMenu.add(upgradeItem); But it doesn't seem to like it. My UpgradeItem code consists of some things, for example: var UpgradeItem = function(game, x, y, upgradeItemName, upgradeDescription, upgradePrice, price, speed, cSpeed, bNumber){ this._name = upgradeItemName; this._description = upgradeDescription; this._upgradePrice = upgradePrice; this._pMultiplier = price | 1; this._sMultiplier = speed | 1; this._cMultiplier = cSpeed | 1; this._active = false; this._backgroundNumber = bNumber | 1; this._upgradeItemGroup = game.add.group(); GAME_NAME.upgradeMenu.add(this._upgradeItemGroup); switch(bNumber){ case 0: this._background = game.add.image(x+10, y+36, 'uBackground1'); break; case 1: this._background = game.add.image(x+10, y+36, 'uBackground2'); break; default : this._background = game.add.image(x+10, y+36, 'uBackground1'); break; } this._background.inputEnabled = true; this._background.input.useHandCursor = true; this._background.anchor.setTo(0); this._upgradeItemGroup.add(this._background); this.UpgradeItemName = game.add.bitmapText(x+30, y+48, 'Lobster',this._name,26,this._upgradeItemGroup); this.UpgradeItemName.anchor.setTo(0); this.UpgradeItemDescription = game.add.bitmapText(x+180, y+48, 'Lobster',this._description,26,this._upgradeItemGroup); this.UpgradeItemDescription.anchor.setTo(0); } You can also see from my code here that i'm trying to group the 'assets' (the text and sprites) into a seperate group. Am I missing something really simple here? Thanks for looking

I have a BitmapText object displaying a numeric score. i.e "Score: 50". Is there any way I can affect the score value with a tween when the score increases so that the number rolls up to to the new value, rather than just changing the text in one hit with: this.scoreLabel.text = "Score: 100"; I know that I could achieve this with the update function with checks for a flag that I set when the score goes up to increase the score until the desired value is reached, however it seems a little unnecessary and wasteful to be checking for this flag every cycle of the update function. Does anyone have any bright ideas how I could achieve this? Ta

Hi guys, I want to add a tween in my game that scales down a text along a point in the center. It should look something like this: I can achieve this easily with images by setting up achor to (0.5, 0.5), but to my knowledge, bitmaptext does not support anchor. So my question is how can achieve the same functionality with text?