Flash Game Dev Tip #2 – Flixel and TweenMax pausing together
Tip #2 – Flixel – Flixel and TweenMax pausing together
This is a super-simple tip, but I see it overlooked all the time. TweenMax is an extremely popular tweening engine for Flash. And rightly so. It’s fast, comprehensive, well documented and has loads of cool plugins. Ok so the object syntax is a little magical, but on the whole there are many good reasons to use it.
However one thing I see quite often is that when flixel games are paused, the tweens carry on playing. In a best case scenario it just causes visuals to glitch a little, in a worst case the game could crash.
The fix is amazingly easy, but it does require you to tamper with the core of flixel. For some reason there seems to be a serious allergy when it comes to devs wanting to do this, as if the framework itself is sacracant, never to be touched by mortal hands.
Utter bollocks.
Get in there and get dirty! It’s the only way to learn how it works. It’s a framework, not a bible. I’m quite sure when Adam created it he had no such illusion that it could do everything, and when it can’t, you bend it to do so.
So how do you get your tweens to pause in unison with your game? Easy, open up FlxGame.as and at the top import TweenMax, just like you would when using it in any other class. Then search for these two functions pauseGame() and unpauseGame()
For pauseGame change it to become:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/** * Internal function to help with basic pause game functionality. */ internal function pauseGame():void { if((x != 0) || (y != 0)) { x = 0; y = 0; } flash.ui.Mouse.show(); _paused = true; stage.frameRate = _frameratePaused; TweenMax.pauseAll(); } |
As you can see we’ve added the final line which tells TweenMax to pause everything. That’s tweens and delayed calls. This is an extremely useful feature of TweenMax, and well worth using instead of TweenLite (which doesn’t support this).
You can guess what we’re going to do with unpauseGame I’m sure:
1 2 3 4 5 6 7 8 9 10 11 |
/** * Internal function to help with basic pause game functionality. */ internal function unpauseGame():void { if(!FlxG.panel.visible) flash.ui.Mouse.hide(); FlxG.resetInput(); _paused = false; stage.frameRate = _framerate; TweenMax.resumeAll(); } |
In short – play and experiment! Flixel is not a religion, it’s a framework. You build on-top of frameworks, and you tweak them until they fit.
Posted on February 19th 2011 at 12:00 pm by Rich.
View more posts in Flash Game Dev Tips. Follow responses via the RSS 2.0 feed.
16 Responses
Leave a commentMake yourself heard
Hire Us
All about Photon Storm and our
HTML5 game development services
Recent Posts
OurGames
Filter our Content
- ActionScript3
- Art
- Cool Links
- Demoscene
- Flash Game Dev Tips
- Game Development
- Gaming
- Geek Shopping
- HTML5
- In the Media
- Phaser
- Phaser 3
- Projects
Brain Food
I love the Greensock Tweening engine and have been using it for a few years now. I wanted to point out one additional caveat to this great tip: You may run into issues if you have tweens that are already in a paused state! When the game is paused and then restarted it will play every tween and this may not be what you want. Just wanted to point out that the best I’ve found so far to handle this is on objects that have more advanced tween scenarios I have to track a state variable the stores whether the tweens on an object were already paused when game.pause was called and that way it knows not to just Tween.play() them when game.unpause is called again. I’m sure there are many different solutions to this but anyway it came to bite me before I noticed what was going on. Great tip though!
Very good point! Nice one. Thankfully(?!) I tend to use tweens quite superficially, so have never gotten into this situation. But thanks for posting the comment for others reading this who may experience it too.
You can manage complex scenes with TimelineLite/Max quite nicely, in those cases where you only want to pause/unpause certain groups of tweens–just group them accordingly.
A more interesting idea is pausing a game using Flixel’s FlxG.timescale property so that everything slows down nicely (which is also great for those slo-mo moments during gameplay). It’s difficult to pull off since it depends largely on your game, but it goes something like this:
_tweens = TweenMax.getAllTweens();
for (var i:int = 0; i < _tweens.length; ++i) TweenMax.to(_tweens[i], 0.5, {timeScale:0});
TweenMax.to(FlxG, 0.5, {timeScale:0, overwrite:5});
I'm pretty sure that by itself will not work, but you get the idea.
Nice tip! I primarily use the Eeze engine for my tweening needs (mostly because I like the jQuery-like syntax and the chaining possibilities it gives). The documentation is pretty poor though since the only documentation I’ve found is the “Basic syntax and Events” on http://code.google.com/p/eaze-tween/. But after searching the source code for a bit I found pauseAll() and resumeAll() methods. Nice indeed.
I love posting these hints up, because every time I do someone posts something cool to try out – Eaze being one such thing
Will happily look into this, cheers Daniel.
I’ve used gTween so far but I’ve read now that it’s kind of being abandoned. Time to switch to TweenLite/Max. Seems to be the most performant tween engine so far.
A better way, and possibly more efficient is:
if (TweenMax.getAllTweens()) { // For pausing.
TweenMax.pauseAll();
}
if (TweenMax.getAllTweens()) { // For resuming.
TweenMax.resumeAll();
}
To check if there is even any Tweens in the stage to begin with. So that it doesn’t need to activate a un-needed function at the time.
What un-needed function is that? The first thing TweenMax does when you call pauseAll is to run a getAllTweens, so in effect the above approach will do that twice.
I never knew that, but what I was trying to say was not to call the function when there aren’t any tweens to begin with. Sorry.
I understand, was a good idea too, but Mr. Greensock already thought of it
Seeing as flixel changed in v2.50, do you know where the pause function lies now?
2.5 doesn’t have pause support by default any more, you have to manage it manually – so the above technique is pretty much the same (still called TweenMax pause/resume, just in your own class now)
it just a matter of adding TweenMax.resume/pauseAll alongside with Flixel’s
if (!FlxG.paused) {
super.update();
TweenMax.resumeAll();
}else{
pause.update();
TweenMax.pauseAll();
}
good luck 😀
If you want to pause JUST the current FlxState, yes. If you need to do it more globally, you could, you know.. read the article 😉
..with some adaptation , from this website :
http://ludusnovus.net/2011/09/29/flixel-and-tweensy-working-together/
Put the following in your main class that extends FlxGame:
override protected function onFocus(FlashEvent:Event = null):void
{
super.onFocus(FlashEvent);
TweenMax.resumeAll();
}
override protected function onFocusLost(FlashEvent:Event = null):void
{
super.onFocusLost(FlashEvent);
TweenMax.pauseAll();}