how to make a perpetual movement with random

[espace]

hi,

I would like to make a perpetual movement with my sprites to give the illusion of movement.

In the snippet below , if the sprite are stars you will understand that for example a rocket move trough.

The problem here is :

on each movement i would like at the oncomplete function move the sprite randomely on Y but with repetition on -1 it don't works.

How could i do to achieve that properly ?

Thanks

http://phaser.io/sandbox/edit/NaYAGwfv

 

function create() {

    var sprite=[] 
    var tw=[];
    
    for (var i = 0; i < 5; i++) {
        sprite[i]=game.add.sprite(400+i*10, i*100, 'phaser');
    }
    
    var move=()=>{
        for (var i = 0; i < sprite.length; i++) {
            //-1 to have perpetual movement but the problem is that onComplete don't works
            tw[i]=game.add.tween(sprite[i]).to({x:-400},1000,Phaser.Easing.Linear.none,true,i*200)
            tw[i].onComplete.add(()=>{
                //return to right to give the illusion of perpetual movement
                sprite[i].x=400;
                // move randomely on y 
                sprite[i].y=Math.random(0,800);
            },this)
        }
    }
    move();
}

 

[b10b]

@espace use onLoop instead of onComplete

You won't need to reset the x, because the tween state will do that.

Math.random(0,800) is incorrect, use Math.random() * 800 instead.

Use a regular function (not an arrow) for the signal listener, and use sprite as the context (instead of this).  Sorry, couldn't figure out why this scenario didn't fit as expected with arrows?

 

function create() {

    var sprite=[] 
    var tw=[];
    
    for (var i = 0; i < 5; i++) {
        sprite[i]=game.add.sprite(400+i*10, i*100, 'phaser');
    }
    
    var move=()=>{
        for (var i = 0; i < 5; i++) {
            tw[i]=game.add.tween(sprite[i]).to({x:-400},1000,Phaser.Easing.Linear.none,true,i*200,-1);
            tw[i].onLoop.add(function(){
                  this.y = Math.random() * 800;
            },sprite[i])
        }
    }
    move();
}

 

[espace]

hi again me !

thanks for your previous solution.

I have another request that looks a lot like the first but I can not solve it. I would like to have random object in x first.

Then i would like to move them and when they reach -400 in x (left outside the screen), their position is set to 2000 (right outside the screen).

The problem is that i see the "restart effect". It's difficult to me to explain...

look at this snippet,  it's easier to understand

https://phaser.io/sandbox/edit/NEkknTBO

 

function create() {

    var sprite=[] 
    var tw=[];
    
    for (var i = 0; i < 5; i++) {
        sprite[i]=game.add.sprite(Math.random()*800, i*100, 'phaser');
    }
    
    var move=()=>{
        for (var i = 0; i < 5; i++) {
            tw[i]=game.add.tween(sprite[i]).to({x:-400},1000,Phaser.Easing.Linear.none,true,0,-1)
            tw[i].onLoop.add(function(){
                //normally i must not see the sprite at the restart because it's outside the screen ?
                this.x=2000
                this.y=Math.random()*800
            },sprite[i])
        }
    }
    move();
}

 

[espace]

update  nobody?

[Milton]

Guess you should use onComplete and then create a new tween. Doesn't look like you can update position, see