# Collisions problem when adding an "extended" Sprite

**URL:** <https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315>\
**Category:** Phaser 3\
**Created:** [December 13, 2018, 10:07pm UTC](https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315 "2018-12-13T22:07:37Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Zaelyth](https://avatars.discourse-cdn.com/v4/letter/z/e47c2d/32.png) [@Zaelyth](https://phaser.discourse.group/u/Zaelyth)\
**Post date:** [December 13, 2018, 10:07pm UTC](https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315/1 "2018-12-13T22:07:37Z")

</div>

Hi everyone !!  
I am really new to Phaser and this is my first topic here.

I’ve been doing the “starter project” available at the official Phaser 3 website : [https://phaser.io/tutorials/making-your-first-phaser-3-game](https://phaser.io/tutorials/making-your-first-phaser-3-game)

Everything is working fine with the tutorial’s setup. But I tried to refactor the player sprite in a different class.

So I changed this :

```javascript
this.player = this.physics.add.sprite(100, 450, "dude");

```

To :

```javascript
this.player = new Player({
    key: 'player',
    x: 100,
    y: 450,
    scene: this
});

```

The `Player` class extend `Phaser.GameObjects.Sprite` and in the constructor I added this :

```javascript
this.scene.physics.world.enable(this);
this.body.setCollideWorldBounds(true);
this.scene.add.existing(this);

```

In the two setups, I’m doing this:

```javascript
this.physics.add.collider(this.player, this.platforms);

```

But here is the problem ! When I add a Player this way, the collider don’t look to make it’s job, at least not the way intended:  
 ![Capture%20d%E2%80%99%C3%A9cran%20de%202018-12-13%2022-49-32](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/3f7f3fb407305f97eba04f09ae2141bc2937e416.png)

But when I get back to the previous setup, everything is working fine again.  
 ![Capture%20d%E2%80%99%C3%A9cran%20de%202018-12-13%2023-32-19](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/175690e852aa63e96b371a309dd4f725450e6a75.png)

Do you guys have an idea of what’s going on ? Did I missed something ?

Thanks in advance

---

<div class="post-metadata">

**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:** [December 13, 2018, 10:13pm UTC](https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315/2 "2018-12-13T22:13:03Z")

</div>

What’s the entire constructor function?

---

<div class="post-metadata">

**Author:** ![Zaelyth](https://avatars.discourse-cdn.com/v4/letter/z/e47c2d/32.png) [@Zaelyth](https://phaser.discourse.group/u/Zaelyth)\
**Post date:** [December 13, 2018, 10:16pm UTC](https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315/3 "2018-12-13T22:16:44Z")

</div>

Here is what my constructor look like :

```javascript
constructor(params: any) {
    super(params.scene, params.x, params.y, params.key);

    this.initInput();
    this.initEntity();
    this.initAnimations();
}

```

And the initEntity() :

```javascript
initEntity() {
    this.scene.physics.world.enable(this);
    this.body.setCollideWorldBounds(true);
    this.scene.add.existing(this);
}

```

I saw other class like this that was doing all the initEntity things on `params.scene` instead of `this.scene` but the result is the same for me.

PS: I’m using `Typescript`

---

<div class="post-metadata">

**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:** [December 13, 2018, 10:22pm UTC](https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315/4 "2018-12-13T22:22:37Z")

</div>

Is there a texture key named ‘player’?

---

<div class="post-metadata">

**Author:** ![Zaelyth](https://avatars.discourse-cdn.com/v4/letter/z/e47c2d/32.png) [@Zaelyth](https://phaser.discourse.group/u/Zaelyth)\
**Post date:** [December 13, 2018, 10:30pm UTC](https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315/5 "2018-12-13T22:30:53Z")

</div>

There is no texture key named `player`, but instead the “texture” you can see is add with an animation added in the Player class update method which is called by the scene’s update method.

Here is how it look like :

```javascript
initAnimations() {
    // ...
    this.scene.anims.create({
      key: 'turn',
      frames: [{ key: 'dude', frame: 4 }],
      frameRate: 20
    });
}

update() {
    // ...
    this.anims.play('turn');
}

```

And in the Scene class:

```javascript
update() {
    this.player.update();
}

```

I updated the post to show the “working way” with `this.physics.add.sprite` directly in the Scene class.

---

<div class="post-metadata">

**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:** [December 13, 2018, 10:40pm UTC](https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315/6 "2018-12-13T22:40:05Z")

</div>

I think the easiest solution is to pass the key ‘dude’ instead.

The body likely has the wrong size because it’s created before the sprite has the texture assigned.

---

<div class="post-metadata">

**Author:** ![Zaelyth](https://avatars.discourse-cdn.com/v4/letter/z/e47c2d/32.png) [@Zaelyth](https://phaser.discourse.group/u/Zaelyth)\
**Post date:** [December 13, 2018, 10:47pm UTC](https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315/7 "2018-12-13T22:47:41Z")

</div>

Ok that was it !  
I was thinking that the size was updated when the texture was set to the Sprite.

I’m closing this topic, many thanks @samme !

---

<div class="post-metadata">

**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:** [December 13, 2018, 10:54pm UTC](https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315/8 "2018-12-13T22:54:58Z")

</div>

I think you can also do

```javascript
player.body.setSize(); // no args

```

after it has received a texture, if you prefer.

---

<div class="post-metadata">

**Author:** ![Zaelyth](https://avatars.discourse-cdn.com/v4/letter/z/e47c2d/32.png) [@Zaelyth](https://phaser.discourse.group/u/Zaelyth)\
**Post date:** [December 13, 2018, 11:01pm UTC](https://phaser.discourse.group/t/collisions-problem-when-adding-an-extended-sprite/315/9 "2018-12-13T23:01:00Z")

</div>

Will try it later to create a generic `Enemy` class