Dot move with trail

[Fenopiù]

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!

[samid737]

 

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:
 

 

[Fenopiù]

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?

[samid737]

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

 

[Fenopiù]

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

 

[Fenopiù]

With particles and emitter and tween I'm very very very close to the result that I want.

[Fenopiù]

It was the right path to follow... I've finally reached my goal!

Firestarter and Click burst examples were very helpful!

[samme]

There's also Tween#generateData if you just want to cache one tween sequence.

[Fenopiù]

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

[msqar]

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?

[Fenopiù]

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.

[msqar]

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