Hsaka Posted February 24, 2014 Share Posted February 24, 2014 Hello, in previous versions it was possible to center a BitmapText object by using anchor.setTo(0.5, 0.5). Is there an equivalent way of doing this in 1.2? I know that there is the align property but what I'm trying to do is to make the text appear in the center of the screen regardless of its width or height; which is what the anchor aided in doing. Link to comment Share on other sites More sharing options...
rich Posted February 24, 2014 Share Posted February 24, 2014 Anchor and align it. Link to comment Share on other sites More sharing options...
Hsaka Posted February 24, 2014 Author Share Posted February 24, 2014 I tried that, but the problem is there doesn't seem to be an anchor property on BitmapText anymore.Edit: It seems that the alternative is to use the textWidth property to manually center the text. Link to comment Share on other sites More sharing options...
mariogarranz Posted March 7, 2014 Share Posted March 7, 2014 I tried that, but the problem is there doesn't seem to be an anchor property on BitmapText anymore.Edit: It seems that the alternative is to use the textWidth property to manually center the text. Could you please more information on how you solved this? Having exactly the same problem but not sure how to apply that.Thanks Link to comment Share on other sites More sharing options...
Hsaka Posted March 7, 2014 Author Share Posted March 7, 2014 Hey, sure I did it like this:this.scoreText = this.game.add.bitmapText(0, 15, 'mecha', '0', 40);this.scoreText.align = 'center';this.scoreText.x = this.game.width / 2 - this.scoreText.textWidth / 2;//then whenever you set the text, you need to reposition it:this.scoreText.setText('100');this.scoreText.x = this.game.width / 2 - this.scoreText.textWidth / 2; mariogarranz and Martiny 2 Link to comment Share on other sites More sharing options...
mariogarranz Posted March 8, 2014 Share Posted March 8, 2014 Thank you very much Hsaka.Still, anchor allowed both vertical and horizontal positioning, while I guess align applies only to horizontal.Rich mentioned we could anchor the BitmapText, but the new class doesn't seem to have an anchor point anymore. Link to comment Share on other sites More sharing options...
mariogarranz Posted March 11, 2014 Share Posted March 11, 2014 OK, tested this and see no solution, other than waiting for text to be updated, and position it making the necessary calculations according to its width and height, which is a very bad solution since width and height can't be calculated at the time the text is updated. Reading Rich's post #2, I think something's wrong, and anchor property should still be available. Link to comment Share on other sites More sharing options...
enpu Posted March 11, 2014 Share Posted March 11, 2014 I think you can calculate width and height with updateTransform method, like:text.setText('test');text.updateTransform();text.position.x = 100 - text.textWidth / 2; Schuh, mariogarranz and JoseDu 3 Link to comment Share on other sites More sharing options...
mariogarranz Posted March 11, 2014 Share Posted March 11, 2014 I think you can calculate width and height with updateTransform method, like:text.setText('test');text.updateTransform();text.position.x = 100 - text.textWidth / 2; Thank you very much! That worked just fine Still missing the good old anchor point, but that will do the job until it comes back (in case it does). Link to comment Share on other sites More sharing options...
jflowers45 Posted March 20, 2014 Share Posted March 20, 2014 Thanks Enpu I just ran into exact same issue ... didn't realize textWidth wasn't immediately available after changing the text, so my bitmap text aligning wasn't working, til I used updateTransform - that works great. Link to comment Share on other sites More sharing options...
dnassler Posted April 1, 2014 Share Posted April 1, 2014 I really hope that anchor comes back to bitmap text Link to comment Share on other sites More sharing options...
rich Posted April 1, 2014 Share Posted April 1, 2014 It won't, because anchor is used for aligning textures and a BitmapText object doesn't have a texture. It's a collection of Sprites (one for each letter), each of which has their own texture, but there's no overall one. You have to use Pivot for alignment of BitmapText objects. Link to comment Share on other sites More sharing options...
Luis Fonseca Posted May 13, 2014 Share Posted May 13, 2014 Fighting the same problem right now... The updateTransform solution is not working as apparently that method is not available anymore. What other solutions are you guys using? Link to comment Share on other sites More sharing options...
lewster32 Posted May 13, 2014 Share Posted May 13, 2014 The updateTransform method updates the bounds of the object (which you then get via getBounds or getLocalBounds) but you can also get the width of a BitmapText instance by calling its updateText method - this is called automatically when you first create a new instance, but should be manually called if you alter the text.Then you can get its width from its textWidth property correctly, as this is updated during updateText, and not necessarily during updateBounds. Something like:bitmapText.updateText();bitmapText.x = game.world.centerX - (bitmapText.textWidth * 0.5);Will center the bitmapText in your world by placing it at the center, then offsetting it by half its width (multiplying by 0.5 is the same as dividing by 2, but is faster - a good habit to get into when writing performant code). analytik 1 Link to comment Share on other sites More sharing options...
Luis Fonseca Posted May 14, 2014 Share Posted May 14, 2014 Thanks lewster32. Although your method works, "updateText" is not a documented method. Although in JS that might not make a difference, since I'm using Typescript I get an error during compile-time. Any other options? Link to comment Share on other sites More sharing options...
jouniii Posted May 14, 2014 Share Posted May 14, 2014 Cast to any or update the Typescript declrations. Link to comment Share on other sites More sharing options...
lewster32 Posted May 14, 2014 Share Posted May 14, 2014 That will explain it then. Both updateTransform and updateText are originally defined in pixi's BitmapText object. It looks like in setting up the TypeScript definitions, these inherited methods may have been left out. Link to comment Share on other sites More sharing options...
jpdev Posted May 14, 2014 Share Posted May 14, 2014 I guess it is maybe because they are both private in pixi.js. Source/*** Renders text and updates it when needed * @method updateText @private*/ Link to comment Share on other sites More sharing options...
Luis Fonseca Posted May 14, 2014 Share Posted May 14, 2014 I'll create a pull request with the updated Typescript definitions then. Link to comment Share on other sites More sharing options...
lewster32 Posted May 14, 2014 Share Posted May 14, 2014 Interesting, I wonder why they're private? There are definitely use cases for needing to force an updateTransform or updateText synchronously so that you can access the dimensions of an object instantly rather than waiting for the dirty flag to be checked on the next update. Does anyone know if there's another way we should be doing this kind of stuff? Link to comment Share on other sites More sharing options...
lucbloom Posted June 16, 2014 Share Posted June 16, 2014 Here is the solution: Object.defineProperty(Phaser.BitmapText.prototype, 'anchor', { get: function() { return this._anchor; }, set: function(anchor) { this._anchor = anchor; this.dirty = true; this.updateTransform(); if (!this.textBitmapSpritesParent) { this.textBitmapSpritesParent = new Phaser.Group(this.game); this.addChild(this.textBitmapSpritesParent); } this.textBitmapSpritesParent.x = -this.textWidth * this.anchor.x; this.textBitmapSpritesParent.y = -this.textHeight * this.anchor.y; for (var i = 0; i < this.children.length;) { if (this.children[i] == this.textBitmapSpritesParent) { ++i; } else { this.textBitmapSpritesParent.add(this.children[i]); } } }}); PS: rich, this would work better (more reliable) if BitmapText would use an internal dedicated array for its Glyph sprites. Link to comment Share on other sites More sharing options...
lewster32 Posted June 16, 2014 Share Posted June 16, 2014 Nice work! You should probably submit this as a PR on Github. Link to comment Share on other sites More sharing options...
lucbloom Posted June 16, 2014 Share Posted June 16, 2014 Better solution: Paste this somewhere in your 'extensions.js' (after loading phaser-min.js) and it'll work. Object.defineProperty(Phaser.BitmapText.prototype, 'anchor', { get: function() { return this._anchor; }, set: function(anchor) { this._anchor = anchor; this.dirty = true; this.updateTransform(); }});PIXI.BitmapText.prototype.updateText = function(){ var data = PIXI.BitmapText.fonts[this.fontName]; if (!data) { console.error("Bitmap font not found: '" + this.fontName + "'"); return; } var pos = new PIXI.Point(); var prevCharCode = null; var chars = []; var maxLineWidth = 0; var lineWidths = []; var line = 0; var scale = this.fontSize / data.size; for(var i = 0; i < this.text.length; i++) { var charCode = this.text.charCodeAt(i); if(/(?:\r\n|\r|\n)/.test(this.text.charAt(i))) { lineWidths.push(pos.x); maxLineWidth = Math.max(maxLineWidth, pos.x); line++; pos.x = 0; pos.y += data.lineHeight; prevCharCode = null; continue; } var charData = data.chars[charCode]; if(!charData) continue; if(prevCharCode && charData[prevCharCode]) { pos.x += charData.kerning[prevCharCode]; } chars.push({texture:charData.texture, line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); pos.x += charData.xAdvance; prevCharCode = charCode; } lineWidths.push(pos.x); maxLineWidth = Math.max(maxLineWidth, pos.x); var lineAlignOffsets = []; for(i = 0; i <= line; i++) { var alignOffset = 0; if(this.style.align === 'right') { alignOffset = maxLineWidth - lineWidths[i]; } else if(this.style.align === 'center') { alignOffset = (maxLineWidth - lineWidths[i]) / 2; } lineAlignOffsets.push(alignOffset); } var lenChildren = this._pool.length; var lenChars = chars.length; var tint = this.tint || 0xFFFFFF; for(i = 0; i < lenChars; i++) { var c = this._pool[i]; if (c) c.setTexture(chars[i].texture); // check if got one before. else { c = new PIXI.Sprite(chars[i].texture); // if no create new one. this._pool.push(c); } c.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; c.position.y = chars[i].position.y * scale; c.scale.x = c.scale.y = scale; c.tint = tint; if (!c.parent) this.addChild(c); } // remove unnecessary children. // and put their into the pool. for (var i = lenChars; i < this._pool.length; ++i) { this.removeChild(this._pool[i]); } /** * [read-only] The width of the overall text, different from fontSize, * which is defined in the style object * * @property textWidth * @type Number */ this.textWidth = maxLineWidth * scale; /** * [read-only] The height of the overall text, different from fontSize, * which is defined in the style object * * @property textHeight * @type Number */ this.textHeight = (pos.y + data.lineHeight) * scale; if (this._anchor) { for(i = 0; i < lenChars; i++) { var c = this._pool[i]; c.position.x -= this.textWidth * this._anchor.x; c.position.y -= this.textHeight * this._anchor.y; } }}; Link to comment Share on other sites More sharing options...
lucbloom Posted June 16, 2014 Share Posted June 16, 2014 In all seriousness, regardless of what internal structure an object has, I want to set its anchor point. Imagine a list of numbers, for instance a high score list. I want the back of the numbers to align. Now if these labels are TTF text or bitmap font texts are not important to me. I want to be able to align them the same way. In my vision, "align" doesn't address this issue because that specifies how the text should be aligned _within_ the label and therefore only has effect on labels with *multiple lines*. As one game engine developer (c++) to another (JS), I highly recommend adding the "anchor" property on every type of visual world object with a width & height. PS: how can I change the 'Newbie' status above my profile picture without having to make too much posts? :-) Link to comment Share on other sites More sharing options...
lewster32 Posted June 16, 2014 Share Posted June 16, 2014 I think your status changes with length of time registered. Link to comment Share on other sites More sharing options...
Recommended Posts