# Animated player + player name on top **URL:** \ **Category:** Phaser 3\ **Created:** [January 23, 2019, 8:22pm UTC](https://phaser.discourse.group/t/animated-player-player-name-on-top/903 "2019-01-23T20:22:05Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![yigitusta9](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yigitusta9/32/601_2.png) [@yigitusta9](https://phaser.discourse.group/u/yigitusta9)\ **Post date:** [January 23, 2019, 8:22pm UTC](https://phaser.discourse.group/t/animated-player-player-name-on-top/903/1 "2019-01-23T20:22:05Z")
Hello everyone, I want to create a Player class which has a body with collision and a username on top which does not have collision (obviously). How to approach this? Here is the constructor of my current class, I can’t get it working yet though. I’m trying to handle it without the username first. ``` export default class Player extends Phaser.GameObjects.Container { constructor(scene, x, y, children) { super(scene, x, y, children); const body = scene.physics.add .sprite(x, y, "atlas", "misa-front") .setSize(30, 40) .setOffset(0, 24); body.name = "main"; this.add(body); scene.physics.add.collider(body, scene.world); this.state = { speed: 175 }; scene.add.existing(this); } ``` I’m a newbie in game development. Thank you. ---
**Author:** ![digitsensitive](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/digitsensitive/32/349_2.png) [@digitsensitive](https://phaser.discourse.group/u/digitsensitive)\ **Post date:** [January 23, 2019, 8:43pm UTC](https://phaser.discourse.group/t/animated-player-player-name-on-top/903/2 "2019-01-23T20:43:20Z")
Hello @yigitusta9! That sounds like a case, where you want to use a container. Have a look at the [this official example](https://labs.phaser.io/view.html?src=src%5Cgame%20objects%5Ccontainer%5Ctext%20and%20sprite%20test.js) about containers (sprite and text). For more informations about containers have a look at [my cheatsheet](https://github.com/digitsensitive/phaser3-typescript/blob/master/cheatsheets/gameobjects/container.md). You will find links to the official code and at the bottom links to some references, f.e. the Phaser 3 Dev Log #120 which was also about containers. ---
**Author:** ![yigitusta9](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/yigitusta9/32/601_2.png) [@yigitusta9](https://phaser.discourse.group/u/yigitusta9)\ **Post date:** [January 23, 2019, 9:40pm UTC](https://phaser.discourse.group/t/animated-player-player-name-on-top/903/3 "2019-01-23T21:40:52Z")
Thank you for your response. Now I understand how I can add text to my container along with the sprite. But my real question is: **I want to enable physics for container and set the sprite in it for hitbox, in addition, I want to modify my container’s velocity according to user input.** How do I do it? ---
**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\ **Post date:** [January 23, 2019, 11:05pm UTC](https://phaser.discourse.group/t/animated-player-player-name-on-top/903/4 "2019-01-23T23:05:44Z")
[game objects/container/arcade physics body test](https://labs.phaser.io/edit.html?src=src%5Cgame%20objects%5Ccontainer%5Carcade%20physics%20body%20test.js) ---
**Author:** ![Santette](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Santette](https://phaser.discourse.group/u/Santette)\ **Post date:** [September 15, 2020, 7:24pm UTC](https://phaser.discourse.group/t/animated-player-player-name-on-top/903/5 "2020-09-15T19:24:32Z")
Hi there ! I’m running the same issue atm, did someone figured it out ? I’m not trying to set the collition to the container but to a sprite within it so all the container stops when hitting an object… Is it not possible ? If you have some suggestions i’ll take them 😉 ---
**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\ **Post date:** [September 15, 2020, 11:00pm UTC](https://phaser.discourse.group/t/animated-player-player-name-on-top/903/6 "2020-09-15T23:00:08Z")
I haven’t tried it, but it looks like physics sprite in container is supposed to work: > ---
**Author:** ![Santette](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Santette](https://phaser.discourse.group/u/Santette)\ **Post date:** [September 16, 2020, 4:46am UTC](https://phaser.discourse.group/t/animated-player-player-name-on-top/903/7 "2020-09-16T04:46:40Z")
``` function addOtherPlayers(self, playerInfo) { // otherPlayer = self.add.sprite(playerInfo.x, playerInfo.y, 'player'); var playerSprite = self.add.sprite(0, 0, 'player'); otherPlayer = self.add.container(playerInfo.x, playerInfo.y).setSize(playerSprite.width, playerSprite.height); var playerUsername = self.add.text(0,0,playerInfo.username,{ fontFamily:'Arial', color:'#850606', }).setFontSize(18).setOrigin(0.5, 1.5); otherPlayer.add(playerSprite); otherPlayer.add(playerUsername); otherPlayer.playerId = playerInfo.playerId; self.physics.world.enable(otherPlayer); self.physics.add.collider(otherPlayer, floor); self.otherPlayers.add(otherPlayer); } ``` I figured a way but now I’m running other small issues, like **flipping the sprite within the container**. I’m farly new to Phaser3 and especially JS but i think it works correctly. ---
**Author:** ![Santette](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@Santette](https://phaser.discourse.group/u/Santette)\ **Post date:** [September 16, 2020, 10:56am UTC](https://phaser.discourse.group/t/animated-player-player-name-on-top/903/8 "2020-09-16T10:56:49Z")
Ok, I found a solution messing with containers. > otherPlayer. **list** [**indexOfSprinteInContainer**].flipX = false; I found the index of the sprithe within the container using the chrome console inspector tool and searching for the correct data to edit. I’ll be glad to help you if you need more info 😉