19th Feb 2011

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:

/** * 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(); } 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:

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

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.