Fenopiù Posted February 8, 2018 Share Posted February 8, 2018 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 More sharing options...
samid737 Posted February 8, 2018 Share Posted February 8, 2018 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: Link to comment Share on other sites More sharing options...
Fenopiù Posted February 8, 2018 Author Share Posted February 8, 2018 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 More sharing options...
samid737 Posted February 8, 2018 Share Posted February 8, 2018 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 More sharing options...
Fenopiù Posted February 8, 2018 Author Share Posted February 8, 2018 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 More sharing options...
Fenopiù Posted February 9, 2018 Author Share Posted February 9, 2018 With particles and emitter and tween I'm very very very close to the result that I want. samid737 1 Link to comment Share on other sites More sharing options...
Fenopiù Posted February 12, 2018 Author Share Posted February 12, 2018 It was the right path to follow... I've finally reached my goal! Firestarter and Click burst examples were very helpful! Link to comment Share on other sites More sharing options...
samme Posted February 12, 2018 Share Posted February 12, 2018 There's also Tween#generateData if you just want to cache one tween sequence. Link to comment Share on other sites More sharing options...
Fenopiù Posted February 13, 2018 Author Share Posted February 13, 2018 Seems cool... but I think it have similar weight of multiple tweens, I'm I right? Link to comment Share on other sites More sharing options...
msqar Posted February 14, 2018 Share Posted February 14, 2018 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 More sharing options...
Fenopiù Posted February 14, 2018 Author Share Posted February 14, 2018 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 More sharing options...
msqar Posted February 14, 2018 Share Posted February 14, 2018 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 More sharing options...
Recommended Posts