Jump to content

Dot move with trail


Fenopiù
 Share

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!

Link to comment
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?

Link to comment
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);

 

Link to comment
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);
}

 

Link to comment
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?

Link to comment
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.

Link to comment
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 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...