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:

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:

While we are poking around here you’ll also notice that flixel changes the stage frame rate when it’s paused. If you don’t want it to you could always comment that line out. Equally you’ll see the Mouse pointer is shown and hidden from here too. If you’re not using a custom cursor, or want your mouse pointer visible all the time (like I do) then comment out both those lines as well.

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 .
View more posts in Flash Game Dev Tips. Follow responses via the RSS 2.0 feed.


16 Responses

Leave a comment
  • February 19th 2011 at 2:06 pm

    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!

  • February 19th 2011 at 2:49 pm

    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.

  • February 19th 2011 at 7:26 pm

    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.

  • February 20th 2011 at 5:21 pm

    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.

  • February 21st 2011 at 12:03 am

    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.

  • February 21st 2011 at 4:16 am

    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.

  • April 2nd 2011 at 5:20 pm

    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.

  • April 2nd 2011 at 7:01 pm

    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.

  • April 2nd 2011 at 7:22 pm

    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.

  • April 2nd 2011 at 8:16 pm

    I understand, was a good idea too, but Mr. Greensock already thought of it :)

  • Clyde
    August 1st 2011 at 12:40 am

    Seeing as flixel changed in v2.50, do you know where the pause function lies now?

  • August 1st 2011 at 10:30 am

    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)

  • Jaspery
    March 27th 2013 at 7:24 am

    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 😀

  • March 27th 2013 at 9:38 am

    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 😉

  • Gabriele
    November 26th 2014 at 5:40 pm

    ..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();}

Make yourself heard