Flash Custom Events

Question

I am working on a Flash Tower Defense game. I have a main game loop which is an eventListener for each frame. Whenever you gain money or lose a life, I want the GameUI to be updated to display this change. Right now, it checks every frame for a change. How can I create an event to only change this information whenever the lives or money changes?

Answer 1

While Valke answered your question regarding custom events perfectly, I usually try to avoid Events in Flash for game-development. Robert Penner lists some good points why Events are bad.

Custom events are especially bad, when you're dispatching them very frequently (a common scenario in games), because every time you dispatch the event a new Event object will be allocated and also has to be garbage-collected later on.

I found the signal/slot pattern to be a very good replacement for most event-related stuff. There's the excellent as3-signals library or the fast turbosignals library for flash.

With as3-signals, your game class could look something like this (I omitted any irrelevant stuff):

public class Game
{
    // the signal that will dispatch whenever the money changes
    public var moneyChanged:Signal = new Signal(int);

    // ENTER_FRAME listener
    private function handleEnterFrame(e:Event):void {
        // the player collected money.. we can dispatch an "event"
        if(player.hasCollectedMoney){
            // dispatch the collected money amount
            moneyChanged.dispatch(player.collectedMoneyAmount);
        }
    }
}

Your GameUI class would simply have a method to update the money:

public class GameUI
{
    public function updateMoney(amount:int):void {
        // .. update money...
    }
}

All that is left to do, is to connect the signal to the update method (slot). You usually do this somewhere at initialization time, but you can also add/remove listeners/slots during runtime. eg.

var game:Game = new Game();
var gui:GameUI = new GameUI();
game.moneyChanged.add(gui.updateMoney);

Done! Whenever the game dispatches "moneyChanged", the gui will be updated. This also works nicely with multiple listeners, so you could also have a ScoreManagerclass, that also listens to moneyChanged updates.

Answer 2

you can create a custom event class this way:

1 / In a new .as file (say GUIEvent.as) create the following class

package {

    import flash.events.*;

    public class GUIEvent extends Event {

        public static const DEFAULT_NAME:String = "GUIEvent";
        public var _params:*;

        // your events types
        public static const GET_LIFE:String = "getLife";
        public static const GET_MONEY:String = "getMoney";
        public static const GET_GLOBAL:String = "getGlobal";
        public static const GET_ETCETERA:String = "getEtc";

        public function GUIEvent($type:String, $params=null , $bubbles:Boolean=false, $cancelable:Boolean = false){
            super($type, $bubbles, $cancelable);
            this._params = $params;
        }

        public override function clone():Event{
            return new GUIEvent(type, this._params, bubbles, cancelable);
        }

        public override function toString():String{
            return formatToString("GUIEvent", "_params", "type", "bubbles", "cancelable");
        }   
    }
}

2/ In the place you want to register for the events (probably your MainClass.as)

import GUIEvent;

YourGuiObjectWaitingForTheUpdates.addEventListener(GUIEvent.GET_LIFE, GUIupdateHandler);
YourGuiObjectWaitingForTheUpdates.addEventListener(GUIEvent.GET_MONEY, GUIupdateHandler);
YourGuiObjectWaitingForTheUpdates.addEventListener(GUIEvent.GET_GLOBAL, GUIupdateHandler);

3/ Place the function provided to the addEventListener where it should be (still probably in your MainClass.as)

private function GUIupdateHandler(evt:GUIEvent):void
{
    switch(evt.type) { 
        case GUIEvent.GET_LIFE:
            //modify lives on the GUI using evt._params.life
            break;
        case GUIEvent.GET_MONEY:
            //modify money value on the GUI using evt._params.money
            break;
        case GUIEvent.GET_GLOBAL:
            //modify lives AND money value on the GUI using evt._params.life and evt._params.money
            break;
        default:
            //nothing ?
}

4/ Finally, dispatch the events when you need to update you GUI...

this.dispatchEvent(new GUIEvent(GUIEvent.GET_LIFE, {life:3}, true));
//or
this.dispatchEvent(new GUIEvent(GUIEvent.GET_MONEY, {money:333}, true));
//or
this.dispatchEvent(new GUIEvent(GUIEvent.GET_GLOBAL, {life:3, money:333}, true));

I do not practice AS3 anymore, but I have played with it for years so it should be almost OK... but I could have forgotten something through.