Fenopiù

Dot move with trail

Recommended Posts

Good morning!

I've a question about trails.

I've an image of a point who's moving from left to right (not always with the shortest track) and I would like to let him have a trail.

Is there in Phaser a better (and surely smart) way to do that instead of create multiple tweens for multiple identical image object with identical track who have different alpha?

Thanks!

Share this post


Link to post
Share on other sites

 

There are alternatives, each their own benefit. You could use rendertextures, but dealing with alpha would be trickier. Creating motion paths is another way. It should be possible to set the alpha according to the position of each blob:
 

 

Share this post


Link to post
Share on other sites

Mmm... Typescript doesn't like game.math.(any)Interpolation.

 

I have to show the winning line, I don't need to follow an input.

2 examples in a bigger TicTacToe with winning X to highlight:

x . 0 . .       x . 0 . x
0 x . . .       0 x . x .
0 . x . .       0 . x . .
. . . x 0       . . . . 0
. . 0 . x       . . 0 . .

I've the x and y of the center of each image (x in this example) to highlight.

The effect that I want is a line with this dot, the alpha will be 1 - (0.1 * dotnumber) for example.

How could I reach this result?

Share this post


Link to post
Share on other sites

 you could try to make An array containing the points of each cross, then tween those points, and while tweening, decrease alpha according to the progress of the tween. You could still use A rendertexture in this case and trigger rendering when each cross is reached, or just continously draw the texture and match the alpha with the percent of the tween:

line.alpha = (1- tween.timeline[0].percent);

 

Share this post


Link to post
Share on other sites

Yes, the tween solution was my attempt, I've created dotnumber tweens with different alpha and a 1 - (0.1 * dotnumber) delay each other... but they ignore the duration.

I've set duration to 0, 1000, 4000, 40000 and 400000 but they will run really fast (less then a second from one side of the screen to the other) and same duration.

for (let i = 0; i < 6; i++)
{
   dots.children[i].alpha = 1 - (0.1 * i);
   game.add.tween(dots.children[i]).to(
     {
         x: [path[0].x, path[1].x, path[2].x, path[3].x, path[4].x, path[5].x, path[6].x],
         y: [path[0].y, path[1].y, path[2].y, path[3].y, path[4].y, path[5].y, path[6].y]
     }, 1000, "Linear", true, i * 100, 0, false);
}

 

Share this post


Link to post
Share on other sites
On 2/13/2018 at 5:21 AM, Fenopiù said:

Seems cool... but I think it have similar weight of multiple tweens, I'm I right?

Hey Feno, i got a question, can you help me out with my particles? How did you manage to make a dot/sprite to emit a decent/realistic trail ? 

I'm trying to add a dust trail on my character when it moves. I even bought the ParticleStorm, but i can't make it work, i even have weird bugs on my particle emitters in my map... for some reason, they emit in some spots, not anywhere inside the map... just a few zones, and for the others, no particles are emitted... 

I'm using the emitter.emit() function on the update() that is passing player.x and player.y.... but it works really weird. Do you know about ParticleStorm?

Share this post


Link to post
Share on other sites

That's what I've done:

Create:

game.physics.startSystem(Phaser.Physics.ARCADE);
sprite = game.add.sprite(0, 0, image);
game.physics.arcade.enable(sprite);
sprite.body.bounce.set(0);
sprite.body.velocity.set(300, 200);
sprite.anchor.set(0.5, 0.5);
sprite.alpha = 0;
emitter = game.add.emitter(0, 0, 400);
emitter.makeParticles(image);
emitter.gravity = 0;
emitter.alpha   = 0;
emitter.emitX   = -50;
emitter.emitY   = -50;
emitter.setYSpeed(min, max);
emitter.setXSpeed(min, max);
emitter.setAlpha(1,   0.5,       1000);
emitter.setScale(0.8, 0, 0.8, 0, 1000);
emitter.align(-1, 10, 100, 36);
game.physics.arcade.gravity.x            = 0;
game.physics.arcade.gravity.y            = 0;
game.physics.arcade.checkCollision.left  = false;
game.physics.arcade.checkCollision.right = false;


let tween = game.add.tween(sprite).to(
                {
                    x: [x],
                    y: [y]
                }, 1000, Phaser.Easing.Linear.None, true, 0, 0, false)
                .onUpdateCallback(function (target, tween)
                {
                    emitter.emitX = sprite.x;
                    emitter.emitY = sprite.y;
                    emitter.start(true, 1000, null, 10);
                });
            tween.frameBased = true;
            tween.onComplete.add(function ()
            {
                spritePoint.alpha = 0;
                spritePoint.x     = 0;
                spritePoint.y     = 0;
                emitter.alpha     = 0;
                emitter.emitX     = -50;
                emitter.emitY     = -50;
                emitter.forEachAlive(function (particle) { particle.kill(); }, this);
            });
            
            game.world.wrap(spritePoint, 1, false, true, false);

For me, Firestarter  example is what is best for you.

Share this post


Link to post
Share on other sites
1 hour ago, Fenopiù said:

That's what I've done:


Create:

game.physics.startSystem(Phaser.Physics.ARCADE);
sprite = game.add.sprite(0, 0, image);
game.physics.arcade.enable(sprite);
sprite.body.bounce.set(0);
sprite.body.velocity.set(300, 200);
sprite.anchor.set(0.5, 0.5);
sprite.alpha = 0;
emitter = game.add.emitter(0, 0, 400);
emitter.makeParticles(image);
emitter.gravity = 0;
emitter.alpha   = 0;
emitter.emitX   = -50;
emitter.emitY   = -50;
emitter.setYSpeed(min, max);
emitter.setXSpeed(min, max);
emitter.setAlpha(1,   0.5,       1000);
emitter.setScale(0.8, 0, 0.8, 0, 1000);
emitter.align(-1, 10, 100, 36);
game.physics.arcade.gravity.x            = 0;
game.physics.arcade.gravity.y            = 0;
game.physics.arcade.checkCollision.left  = false;
game.physics.arcade.checkCollision.right = false;


let tween = game.add.tween(sprite).to(
                {
                    x: [x],
                    y: [y]
                }, 1000, Phaser.Easing.Linear.None, true, 0, 0, false)
                .onUpdateCallback(function (target, tween)
                {
                    emitter.emitX = sprite.x;
                    emitter.emitY = sprite.y;
                    emitter.start(true, 1000, null, 10);
                });
            tween.frameBased = true;
            tween.onComplete.add(function ()
            {
                spritePoint.alpha = 0;
                spritePoint.x     = 0;
                spritePoint.y     = 0;
                emitter.alpha     = 0;
                emitter.emitX     = -50;
                emitter.emitY     = -50;
                emitter.forEachAlive(function (particle) { particle.kill(); }, this);
            });
            
            game.world.wrap(spritePoint, 1, false, true, false);

For me, Firestarter  example is what is best for you.

Thanks for replying, i saw that Firestarter, nice demo... yes it would be somehow what i need. Happened that this ParticleStorm plugin has different methods and stuff, if i don't get any support on the product i purchased ... i will end up using this :S 

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.