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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.