How To Access my Sprite properties from outside a function in Phaser3 and Matterjs

Question

I'm using phaser 3 and Matterjs. I created a function (arrow function) and created a sprite within and it worked fine, but when I set it's velocity within the function it moves a little while and stops, it happens in other instances outside the function (it is a matterjs issue and this might be because I called it in the phaser create() function and not update() which works, although it works anywhere in arcade physics) and I want to access my Sprite velocity away from the function, I had created it to remove the

Uncaught TypeError: Cannot read properties of undefined (reading 'setVelocityX'...)

and set it's velocity in the update() so it wouldn't have to stop on it's way. I would gladly appreciate any working method. Thanks.

Added Code from the comments:

this.obstacles = this.add.group();
var addObstacle = (x, y) => { 
    // Create a pipe at the position x and y 
    obstacle = this.matter.add.sprite(x, y, 'barrel').setScale(0.2);
    obstacle.setIgnoreGravity(true);
    this.obstacles.add(obstacle);
    obstacle.setVelocityX(-30);
}
var space = 7;
var vary = Phaser.Math.Between(800,1000);
setInterval( _ => {
    for (var i = 0; i < 4; i++) {
        if (i != space && i != space + 1){ 
            addObstacle(screenWidth+400, i * 60 + (vary));
        }
    }
}, 5000);

Answer 1

Well the reason why the sprite slows down, is because in matterjs the velocity is "dampened" , if you don't want that the velocity to be slowed down, just set the friction to 0 , with the function setFriction (link to the documentation )

like this:

// just needs to be called once, after creating the sprite
sprite.setFriction(0, 0, 0); 

to get the current velocity, just get it over the body property:

like this:

console.info(sprite.body.velocity.x, sprite.body.velocity.y);

Mini Demo:

 document.body.style = 'margin:0;'; let text; let text1, text2; let rect1, rect2; var config = { type: Phaser.AUTO, width: 536, height: 183, physics: { default: 'matter', matter: { debug: true } }, scene: { create, update }, banner: false }; function create () { text = this.add.text(10, 10, 'Velocity set in "create" function '); text1 = this.add.text(10, 30, 'without friction'); this.matter.world.disableGravity(); rect1 = this.matter.add.image(10, 70, '_no_texture_'); rect1.setVelocity(3, 0); rect1.setFriction(0, 0, 0); text2 = this.add.text(10, 110, 'with friction'); rect2 = this.matter.add.image(10, 150, '_no_texture_'); rect2.setVelocity(3, 0); } function update(){ text1.setText(`current velocity without friction ( ${rect1.body.velocity.x.toFixed(2)}, ${rect1.body.velocity.y.toFixed(2)})`); text2.setText(`current velocity with friction ( ${rect2.body.velocity.x.toFixed(2)}, ${rect2.body.velocity.y.toFixed(2)})`); } new Phaser.Game(config);

 <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

Update, extra demo for comment, question:

 document.body.style = 'margin:0;'; let text; var config = { type: Phaser.AUTO, width: 536, height: 183, physics: { default: 'matter', matter: { debug: true } }, scene: { create, update }, banner: false }; function create () { text = this.add.text(10, 10, 'obstacels: 0'); this.matter.world.disableGravity(); this.obstacles = this.add.group(); this.time.addEvent({ delay: 2000, loop: true, callback: _ => { let newX = Phaser.Math.Between(500, 600); for (var i = 0; i < 4; i++) { let newY = i * 60; addObstacle(this, newX, newY ); } } }) } function addObstacle(scene, x, y){ obstacle = scene.matter.add.sprite(x, y, 'barrel') .setIgnoreGravity(true) .setVelocityX(-3) .setFriction(0, 0, 0); scene.obstacles.add(obstacle); } function update(){ text.setText(`obstacels: ${this.obstacles.children.size}`); this.obstacles .getChildren() .filter(item => item.x < 0) .forEach(item => this.obstacles.remove(item)) } new Phaser.Game(config);

 <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>