HaxeFlixel button

In this post I will explain how you can build interactive objects in HaxeFlixel. There are 2 great buttons in HaxeFlixel (FlxButton and FlxUIButton), so if you need a standard button you can use them. As I wanted to use a texture from atlas for buttons, I couldn’t use them, so I searched for alternative. Thanks to HaxeFlixel community I got some other way to create buttons in HaxeFlixel. You can’t add event listeners directly to FlxSprite, but you can use flixel.plugin.MouseEventManager for that.

The basic example of using it would be:

class ButtonBase extends FlxSprite
{

	public function new(X:Float=0, Y:Float=0, ?SimpleGraphic:Dynamic)
	{
		super(X, Y, SimpleGraphic);
		MouseEventManager.add(this, onDown,onUp, onOver, onOut);
	}

	function onOut(target:FlxSprite)
	{

	}

	function onOver(target:FlxSprite)
	{

	}

	function onUp(target:FlxSprite)
	{

	}

	function onDown(target:FlxSprite)
	{

	}

	override public function destroy():Void
	{
		super.destroy();
		MouseEventManager.remove(this);
	}

}

You can override these methods for your concrete buttons to react on events. As a big fan of signals I made a button for my project using them.

class ButtonBase extends FlxSprite
{
 var dispatcher(default,null):FlxTypedSignal <ButtonEvent,?Dynamic->Void>;

public function new(X:Float=0, Y:Float=0, ?SimpleGraphic:Dynamic)
{
  super(X, Y, SimpleGraphic);
  dispatcher = new FlxTypedSignal <ButtonEvent,?Dynamic->Void>();
  MouseEventManager.add(this, onDown,onUp, onOver, onOut);
}

function onOut(target:FlxSprite)
{
  dispatcher.dispatch(ButtonEvent.OUT, this);
}

function onOver(target:FlxSprite)
{
  dispatcher.dispatch(ButtonEvent.OVER, this);
}

function onUp(target:FlxSprite)
{
  dispatcher.dispatch(ButtonEvent.UP, this);
}

function onDown(target:FlxSprite)
{
  dispatcher.dispatch(ButtonEvent.DOWN, this);
}

override public function destroy():Void
{
  super.destroy();
  MouseEventManager.remove(this);
}

}

enum ButtonEvent
{
  UP;
  DOWN;
  OVER;
  OUT;
}

Now you can listen to a signal from outside. To do that you need to add a listener for the dispatcher:

var btn = new ButtonBase();
    btn.dispatcher.add(onButton);

function onButton(event:ButtonEvent,?target:Dynamic)
{

}

Also you can make one signal for each event and then listen to it, but I am more used to one listener with event types :)

Happy coding :)