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