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

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

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.