Author Topic: Custom FlxPause  (Read 2436 times)

xhunterko

  • Contributor
  • ****
  • Posts: 449
  • Karma: +0/-0
    • View Profile
Custom FlxPause
« on: Wed, May 2, 2012 »
So this has popped up on the forums here and there and I needed one for my current game I'm doing. So I decided to write a quick pause class. Place it in your org folder where the rest of flixel is and add it to the playstate like this:

Class:
Code: [Select]
package org.flixel
{

import org.flixel.*;


public class FlxPaused extends FlxGroup
{


/**
* Background rect for the text
*/
private var _bg:FlxSprite;

/**
* The text field used to display the text
*/
private var _field:FlxText;

/**
* Use this to tell if dialog is showing on the screen or not.
*/
public var showing:Boolean;

internal var _displaying:Boolean;

/**
 * Called when dialog is finished (optional)
 */
private var _finishCallback:Function;


public function FlxPaused()
{


_bg = new FlxSprite(88,56).makeGraphic(420, 72, 0xff808080);
_bg.scrollFactor.x = _bg.scrollFactor.y = 0;
add(_bg);

_field = new FlxText(_bg.x,_bg.y+16, 410, "Paused");
_field.setFormat(null, 12, 0xff00FFFF, "center");
_field.scrollFactor.x = _field.scrollFactor.y = 0;
add(_field);

}

/**
* Call this from your code to display some dialog
*/
public function showPaused():void
{
_displaying = true;
showing = true;
}

/**
* The meat of the class. Used to display text over time as well
* as control which page is 'active'
*/
override public function update():void
{
if (_displaying)
{
{
_field.text = "Paused";
}
if(FlxG.keys.SPACE)
{
this.kill();
this.exists = false;
showing = false;
_displaying = false;
if (_finishCallback != null) _finishCallback();

}
else
{

showing = true;
_displaying = true;

}

super.update();
}
}

/**
* Called when the dialog is completely finished
*/
public function set finishCallback(val:Function):void
{
_finishCallback = val;
}

}
}

Playstate with callback example:
Code: [Select]
package com
{
import org.flixel.*;
import org.flixel.plugin.photonstorm.*;
import com.*;


//DAME FILE ALLOCATION

public class Tribute extends FlxState
{

[Embed(source = '../pics/RedRacer.png')] public static var RedRacer:Class;
[Embed(source = '../../data/ball.png')] private var ImgBall:Class;

public var _player:player;

//DAME
private var coinsGroup:FlxGroup = null;
private var level:BaseLevel;
private var camera:FlxCamera;
public static var elapsedTime:Number = 0;
private static var lastTime:uint = 0;

//Player UI
//Status Bars
public var fuelBar:FlxSprite;
public var powerBar:FlxSprite;
public  var powerLimit:int = 0;

//Pause Test
public var paused:FlxPaused;

//DAME INPUT
//Box2d objects should follow the same structure if they are to be placed in
//a DAME project.
protected function onSpriteAddedCallback(sprite:FlxSprite, group:FlxGroup):void
{
if (sprite is Coin)
{
coinsGroup = group;
}
}

override public function create():void
{
FlxG.bgColor = 0xff0000FF;

//DAME INPUT
level = new Level_dummy(true, onSpriteAddedCallback);
camera = new FlxCamera(0, 0, FlxG.width, FlxG.height);
FlxG.resetCameras(camera);
camera.follow(_player, FlxCamera.STYLE_PLATFORMER);
FlxG.worldBounds = new FlxRect(level.mainLayer.x, level.mainLayer.y, level.mainLayer.width, level.mainLayer.height);

FlxG.camera.follow(_player, FlxCamera.STYLE_PLATFORMER);

_player = new player(120, 120);
add(_player);


//Player GUI to be created above everything else to be visible
//the weapon cool down bar
powerBar = new FlxSprite(32,38);
powerBar.makeGraphic(1,4,0xff4DFDFC); //The yellow bar itself
powerBar.scrollFactor.x = powerBar.scrollFactor.y = 0;
powerBar.origin.x = powerBar.origin.y = 0; //Zero out the origin
powerBar.scale.x = 20;
add(powerBar);


//To be on top of everything else
paused = new FlxPaused;
//add(paused);
}

override public function update():void
{
//The pause menu is popped up here
if (!paused.showing)
{


super.update();



//DAME MAP COLLISIONS
FlxG.collide(level.mainLayer, _player);
FlxG.collide(level.mainLayer, coinsGroup);


FlxG.camera.follow(_player);
FlxG.worldBounds = new FlxRect(0, 0, 640, 480);
FlxG.camera.bounds = new FlxRect(0, 0, 640, 480);
//FlxG.camera.bounds(0, 0, level.boundsMaxX, level.boundsMaxY);


FlxG.debug = true;
FlxG.visualDebug = true;

//Something to pause with
if (FlxG.keys.P)
{
//paused.showPaused();
paused = new FlxPaused;
paused.showPaused();
paused.finishCallback = dialogKill;
add(paused);
}


} else
{
paused.update();

}

}
//Example call back function. could be sound, or anything
public function dialogKill():void
{
_player.kill();
//header.kill();
//headerTxt.kill();
}




}
}

Enjoy!
Now on twitter: http://twitter.com/xhunterko I made a game that's in alpha you can buy here: http://xhunterko.itch.io/wave-miner-alpha

Snowzurfer

  • Member
  • **
  • Posts: 8
  • Karma: +0/-0
    • View Profile
Re: Custom FlxPause
« Reply #1 on: Sun, Jul 1, 2012 »
Thank you very much, it was very helpful for me  :)

Tap

  • Macromedia, we miss you.
  • Member
  • **
  • Posts: 46
  • Karma: +0/-0
  • Hi.
    • View Profile
    • my blog
Re: Custom FlxPause
« Reply #2 on: Mon, Jul 2, 2012 »
Funny, I did my custom pause screen the same way.  Didn't know someone else did it already and posted it here.  Oh well.

The solution is pretty simple, though.  You just add a condition to the playstate that says something like "If the playstate is paused, don't call the parent's update function.  Otherwise, call the parent's update function."  I needed to fix a few other things when I wanted to add some eye candy behind the menu, so I added a second update function as a quick workaround.  I called it updateExt() or "update extension" for example.  It calls the updateExt() function when the game is paused, sort of like a "If the game is paused, tell all sprites to do updateExt().  Otherwise, they do update()."

If you know an easier, faster way to do this, let me (and everyone else) know, but I didn't want to add a ton of if statements inside each class.
Looking to join a talented game dev team as a programmer and/or artist.  Want to make games similar to Rogue Legacy and Terraria.