espace

how to make a perpetual movement with random

Recommended Posts

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();
}

 

Share this post


Link to post
Share on other sites

@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();
}

 

Share this post


Link to post
Share on other sites

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();
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.