How to move sprite and his body?

Phaser 3
1

Hi !

I’m trying to create a Weapon Class, the weapon rotation follow the player mouse mouvement, but the body of the weapon never mooved…

As you an see on the bottom of the screenshot, the sword rotate but the body doesn’t follow it

Capture d’écran 2020-04-24 à 00.29.21
Capture d’écran 2020-04-24 à 00.29.211848×1468 227 KB

Here is my code :

export default class meleeWeapon extends Phaser.Physics.Arcade.Sprite {

    constructor(scene, heroe, id_weapon) {
    super(scene, heroe.x, heroe.y, 'sword_01')
    this.self = scene
    this.setScale(2).setOrigin(0.5,1.5)
    scene.add.existing(this)
    scene.physics.add.existing(this)
    this.body.setSize(8,16)
    this.body.setOffset(4,10)
    
    scene.input.on('pointermove', function (pointer) {
        this.updateWeaponAngle(pointer,heroe)
    }, this);

    //scene.events.on(Phaser.Scenes.Events.UPDATE, this.updateWeaponAngle, this)
  }

  updatePosition(heroe){
    this.setPosition(heroe.x+15,heroe.y-15)

  }

  updateWeaponAngle(pointer,heroe){
    let cursor = pointer;
    let radAngle = Phaser.Math.Angle.Between(heroe.x, heroe.y, cursor.x + this.self.cameras.main.scrollX, cursor.y + this.self.cameras.main.scrollY)
    let degreeAngle = Phaser.Math.RadToDeg(radAngle)
    this.setAngle(degreeAngle + 90)
    //this.body.setAngle(degreeAngle + 90);
  }

}
2

You can try

updatePosition(heroe){
  this.body.reset(heroe.x + 15, heroe.y - 15);
}
3

I ! Thank you for answering me !

It’s not working very well :

Capture d’écran 2020-04-24 à 18.27.24

Capture d’écran 2020-04-24 à 18.27.30
Capture d’écran 2020-04-24 à 18.27.30252×586 2.32 KB

As you can see, the body is moving, but seems to not following the sword like if the origin is not the same as the sprite origin ?

4

Rotating the sprite will never move the body. I think you need to position the sprite manually instead. Use

this.setScale(2).setOrigin(0.5, 0.5)
5

Something like

updateWeaponAngle(pointer, heroe) {
  let radAngle = Phaser.Math.Angle.Between(heroe.x, heroe.y, pointer.worldX, pointer.worldY);
  let degreeAngle = Phaser.Math.RadToDeg(radAngle);
  this.setAngle(degreeAngle + 90);
  this.updatePosition(heroe.x + 10 * Math.cos(radAngle), heroe.y + 10 * Math.sin(radAngle));
}
6

Hi thank you !

If I reset the anchor point to .5,.5, the sword doesn’t turn over the player …

I’m completely blocked with this…

7

1 Like
8

It’s working very well in your exemple, but I have setScale to 2 in my code, if I add it to your codepen it’s break it a little…

EDIT : it’s working with : this.weapon = new meleeWeapons(scene,this,1).setScale(2);

Thank you a looooot

EDIT 2 : Not working with adding the updatePosition weapon function :

updatePosition(heroe){
    let pointer = {
      x: this.scene.input.activePointer.x,
      y: this.scene.input.activePointer.y
    }
    let angle = Phaser.Math.Angle.BetweenPoints(heroe, pointer);
    this.setRotation(angle + 1.5);
    this.body.reset(
      heroe.x + 10 + this.radius * Math.cos(angle),
      heroe.y - 10 + this.radius * Math.sin(angle)
    );
  }

But if I delete this function and only apply this, it’s works…

updateWeaponAngle(pointer,heroe){
    var angle = Phaser.Math.Angle.BetweenPoints(heroe, pointer);
    console.log('angl : ',angle)
    this.setRotation(angle + 1.5);
    this.body.reset(
      heroe.x + 10 + this.radius * Math.cos(angle),
      heroe.y - 10 + this.radius * Math.sin(angle)
    );
  }
9

I think that’s this bug. A workaround is to do setScale() only after body.setSize().

1 Like
10

This bug is ok ! I found a solution, new bug is :

I call updatePosition of weapon class from my update heroe function :

this.weapon.updatePosition(this);

It calls :

updatePosition(heroe){
    let pointer = this.scene.input.activePointer
    this.updateWeaponAngle(pointer,heroe)
  }
  
  updateWeaponAngle(pointer,heroe){
    var angle = Phaser.Math.Angle.BetweenPoints(heroe, pointer);
    this.setRotation(angle + 1.5);
    this.body.reset(
      heroe.x + 16 + this.radius * Math.cos(angle),
      heroe.y - 10 + this.radius * Math.sin(angle)
    );
  }

And now :

Capture d’écran 2020-04-25 à 17.54.24

Same bug as before.

If i remove the updatePosition call, it’w works perfectly :

Capture d’écran 2020-04-25 à 17.55.15

But the sword doesn’t follow the heroe…

11

I have remove all the setScale of the game

Same result…

Any ideas ?

12

Make sure you’re using pointer.worldX and pointer.worldY.

13

Hi again, Same result… Is it a Phaser’s bug ?

14

I don’t think so, but I can’t tell without running your code.

Can you try to make a test case? https://codepen.io/pen?template=eYpWEqW

15

Can iSend you my source code ?

You will just have to run npm start to test it

16

Yes. Is it supposed to work much like https://codepen.io/samme/pen/LYpWJLe?

17

Yes, I have the same result in my code, but when I uncomment the player mouvements it’s not working anymore…

DL link : https://drive.google.com/open?id=1Wo1uIiH9spb16NhqGX0KgJMwZp6GPJYi

18

Hi @Nik0w,
I think the problem is in this line of your class meleeWeapon:

scene.events.on(Phaser.Scenes.Events.UPDATE, this.updatePosition, this)

this.updatePosition receibes heroe as argument, so you can try something like this:

scene.events.on(Phaser.Scenes.Events.UPDATE, this.updatePosition.bind( this, heroe), this);

Your class working here.

Regards.

1 Like
19

Hi @jjcapellan !

First, thank you !

But it’s not the problem… this line doesn’t exist yet in my code…

I call the updatePosition of meleeWeapon with :

this.weapon.updatePosition(this);

From me heroe class… So i send my heroe as reference, what’s needed…

20

Hi again @Nik0w ,
Now I see the problem in your class Heroe:

this.weapon = new meleeWeapons(scene,this,1);

The correct code should be:

this.weapon = new meleeWeapon(scene,this,1);

Code working here

Regards