owen Posted August 18, 2014 Share Posted August 18, 2014 Hi this is a newbie question about displaying text. I want to display some text at a certain position - which is easy enough. The hard part is that after displaying, I want the text to travel 'up' the screen slowly and 'fade out'. I want this 'move up and fade out' to occur over a timespan of 2 seconds. The reason is that I want a 'score' to display when the player picks up some treasure, at the position of the treasure. Then I want the score text to rise up, fade and disappear. If I were doing this my old way (with hand-cranked css and html) then I would use css transitions & transforms but I'm a bit clueless when it comes to doing this with Phaser. For a start how do I specify a time period (2 seconds) between one state and another. Then how do I specify what change is to take place (fade out, travel upwards). It's also important that I can have many of these things on screen at once. (For when player picks up multiple treasures). Easy, right? Well I'm pretty sure this is extremely easy but I can't find any examples. I suspect it's to do with 'tweens' yes? ThanksOwen Link to comment Share on other sites More sharing options...
ZoomBox Posted August 18, 2014 Share Posted August 18, 2014 I believe this will do what you wantgame.time.events.add(2000, function() { game.add.tween(myText).to({y: 0}, 1500, Phaser.Easing.Linear.None, true); game.add.tween(myText).to({alpha: 0}, 1500, Phaser.Easing.Linear.None, true);}, this);What the code do:-Wait 2 seconds-Start 2 tweens: -One which will move the text to y=0 in 1500ms -One which will fade the text (from alpha = 1 to alpha = 0) in 1500ms too You can change the Easing-Equation and the time it'll take to fade and move (here it's 1500). menthos984 and owen 2 Link to comment Share on other sites More sharing options...
owen Posted August 19, 2014 Author Share Posted August 19, 2014 I believe this will do what you wantgame.time.events.add(2000, function() { game.add.tween(myText).to({y: 0}, 1500, Phaser.Easing.Linear.None, true); game.add.tween(myText).to({alpha: 0}, 1500, Phaser.Easing.Linear.None, true);}, this);What the code do:-Wait 2 seconds-Start 2 tweens: -One which will move the text to y=0 in 1500ms -One which will fade the text (from alpha = 1 to alpha = 0) in 1500ms too You can change the Easing-Equation and the time it'll take to fade and move (here it's 1500). That works great and I adjusted it slightly to suit my needs. Awesome thank you.!!!( where i used it - http://www.owensouthwood.com/mrgoggles ) Link to comment Share on other sites More sharing options...
ZoomBox Posted August 19, 2014 Share Posted August 19, 2014 Nice. It looks great. Link to comment Share on other sites More sharing options...
ZED Posted October 2, 2014 Share Posted October 2, 2014 Exactly what I needed, very fine thank you Link to comment Share on other sites More sharing options...
fhefh Posted October 6, 2014 Share Posted October 6, 2014 nice, mark it http://www.owensouthwood.com/mrgoggles i can't open it ~~ Link to comment Share on other sites More sharing options...
owen Posted October 8, 2014 Author Share Posted October 8, 2014 nice, mark it http://www.owensouthwood.com/mrgoggles i can't open it ~~ Hmmm seems to be openable right now, I'm using Google Chrome 37.0.What happens when you try? Link to comment Share on other sites More sharing options...
tomahawk Posted March 22, 2018 Share Posted March 22, 2018 Great example and works out of the box by just plugging in my var name. Thanks Owen and Zoombox! -tom Link to comment Share on other sites More sharing options...
Recommended Posts