Animated player + player name on top

Phaser 3
1

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.

2

Hello @yigitusta9!
That sounds like a case, where you want to use a container.

Have a look at the this official example about containers (sprite and text).

For more informations about containers have a look at my cheatsheet . 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.

3

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?

4

game objects/container/arcade physics body test

1 Like
5

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 :wink:

6

I haven’t tried it, but it looks like physics sprite in container is supposed to work:

1 Like
7 
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.

8

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 :wink: