bluedot Posted July 14, 2014 Share Posted July 14, 2014 Hi, I'm just starting out HTML5 and JS game development using Phaser. I've managed to find most of the info I'm looking for but I can't find the answer to the above question.I'm looking for a method to display an animated sprite that also has a text label overlay that will always be centred to the sprite. How can I do this ? Thanks. Link to comment Share on other sites More sharing options...
Heppell08 Posted July 14, 2014 Share Posted July 14, 2014 Set an anchor on the sprite and then when you create the text you need to set the X/Y of the text to the same as the player.in the loop you could just put:spriteText.x = player.x;spriteText.y = player.y;that would have it constantly on the sprite but you can offset the text by adding a little more to the values to position to your liking. Link to comment Share on other sites More sharing options...
lewster32 Posted July 14, 2014 Share Posted July 14, 2014 Alternatively if you do the following, the text will become 'part of' the sprite (it will become one of its children) and be positioned relative to it:sprite.addChild(spriteText); // add the text to the sprite as a child, just like a group spriteText.x = spriteText.width * -0.5; // center the textspriteText.y = -10 // position the text 10 pixels above the origin of the sprite Link to comment Share on other sites More sharing options...
bluedot Posted July 15, 2014 Author Share Posted July 15, 2014 I was thinking about creating groups but setting the text as the child sounds better, I'll give that a try. Thanks lewster32. lewster32 1 Link to comment Share on other sites More sharing options...
bluedot Posted July 16, 2014 Author Share Posted July 16, 2014 Hi lewster32, Using your calculations put the text in the wrong position. It ended up like this: So I changed the code to something like:this.tilesList[0] = this.game.add.sprite(this.tilesX, this.tilesY, 'playerbar');this.player1Text = this.game.add.text(0, 0, 'Player 1', { font: "30px Arial", fill: "#ffffff", align: "left" });this.tilesList[0].addChild(this.player1Text);this.player1Text.x = (this.tilesList[0].width - this.player1Text.width) / 2;this.player1Text.y = (this.tilesList[0].height - this.player1Text.height) / 2;Which gave the correct result: Same method of working out centred text as all other text widgets. :-) lewster32 1 Link to comment Share on other sites More sharing options...
Recommended Posts