Update Function Keyboard Problem

Hello dear,

I am using Phaser3 with ReactJS

export default class playScene extends Phaser.Scene {
....
preload() {...}

create() {
...
this.mySprite = this.physics.add.sprite(400, 390, 'idle1');
this.mySprite.anims.play('idle', true);
this.mySprite.setBounce(0.3);
this.mySprite.setCollideWorldBounds(true);
this.mySprite.setScale(0.2).refreshBody();
this.mySprite.setGravityY(600);
...
}
...
update(){
...
if (this.cursors.left.isDown) {
console.log("Keyboard is ok");
this.mySprite.anims.play('run', true);
this.mySprite.setFlipX(true);
this.mySprite.setVelocityX(-320);
}
...
}

}

Everything works fine but my sprite is not move.
Thanks for youre answers.

Hi,
You must create this.cursors in create with:
this.cursors = this.input.keyboard.createCursorKeys();

Yes, of course, it is ok and keyboard is working.
But sprite is not moving.
console.log is working too

Try this line instead :
this.mySprite.body.setVelocityX(-320);

I tried

if (this.cursors.left.isDown) {
this.mySprite.body.anims.play('run', true);
this.mySprite.body.setFlipX(true);
this.mySprite.body.setVelocityX(-320);
}

But it gives error
TypeError: Cannot read property ‘play’ of undefined
I dont understand why

You must understand the difference between a sprite and a body.
anims and flip works on the sprite itself
velocity works on the sprite.body

Thanks mate,

I tried like this

    if (this.cursors.left.isDown) {
      this.mySprite.anims.play('run', true);
      this.mySprite.setFlipX(true);
      this.mySprite.body.setVelocityX(-320);
    }

But it doesnt work again.
When i push cursor-key it work.
I think update() function doesnt see my sprite created in create() function.
Is there any way to show?
bind or another kind?

You can easily check that:
if (this.cursors.left.isDown) {
console.log(this.mySprite);
this.mySprite.anims.play(‘run’, true);
this.mySprite.setFlipX(true);
this.mySprite.body.setVelocityX(-320);
}

check if mySprite has a body property

Yes it has “Body”

ArcadeSprite {_events: Events, _eventsCount: 2, scene: playScene, displayList: DisplayList, type: "Sprite", …}

body: Body {world: World, gameObject: ArcadeSprite, transform: {…

Hmm show me the whole code if you can

https://jsfiddle.net/rwc6zvh4/

I don’t understand, i can move a little sprite at the bottom of the screen, with a size similar to the balls moving everywhere.
Without the assets, i’m not sure if it works as expected.

edit: check here

Doesnt work, i’ll be mad :slight_smile:

The codepen doesn’t work ??

Codepen works.
My local code is not working.

Try with another browser, or without browser’s plugins. Try without the react part…
The problem isn’t on phaser side…

You are correct. Phaser side is ok.

I changed the component layout. It is working.
Super.
Thank you mate.