Back to Posts

Floating text in FlashPunk

Konstantinos Egkarchos / October 13, 2011

In my flash games I usually have a floating text when an enemy dies. Here's how I do it.

package
{
    import net.flashpunk.Entity;
    import net.flashpunk.FP;
    import net.flashpunk.Graphic;
    import net.flashpunk.graphics.Graphiclist;
    import net.flashpunk.graphics.Image;
    import net.flashpunk.graphics.Text;
    import net.flashpunk.tweens.misc.NumTween;
    import net.flashpunk.utils.Ease;

    /**
     * ...
     * @author Konstantinos Egarhos
     */
    public class FloatingText extends Entity
    {
        public var title:Text;
        public var speed:int;
        public var image:Image;
        public var duration:Number;
        public var timeElapsed:Number;
        public var alpha:NumTween;

        /**
         * Creates a floating text.
         */
        public function FloatingText()
        {
            title = new Text("");
            title.font = 'FONT_STATS'; // A font variable.
            speed = 50;
            super();
        }

        /**
         * Fades the floating text, and lifts it up.
         */
        override public function update():void
        {
            title.alpha = alpha.value;
            this.y -= speed * FP.elapsed;
        }

        /**
         * Recycles the floating text.
         */
        public function disappeared():void
        {
            FP.world.recycle(this);
        }

        /**
         * Resets the floating text.
         * @param   x Location in the x (right-left) axis.
         * @param   y Location in the y (top-bottom) axis.
         * @param   text The number concatenated with a '+' in front.
         * @param   duration The time it takes to fade out.
         */
        public function reset(x:Number,y:Number, text:String, duration:Number=0.6):void
        {
            title.text = String("+" + text);
            this.duration = duration;
            timeElapsed = 0;
            title.color = 0x999999;
            title.size = 18;
            alpha = new NumTween(disappeared);
            alpha.tween(1, 0, duration, Ease.cubeIn);
            addTween(alpha);
            graphic = new Graphiclist(title);
            this.x = x - title.width / 2;
            this.y = y - title.height / 2;
        }

    }

}

The function disappeared() recycles the floating text when its called. Its not removed since the remove function would take much more processing power than recycle. Garbage collector will deal with this. Respectively the function reset(), adds the floating text onto the stage. It’s not used in the constructor because the Floating text gets recycled and not created, so the text already has these values and we need to set them again.

We set the text, duration, reset the time, the color (in case we need different, I didn’t), the size (the bigger the enemy gets, but I didn’t use it), the NumTween which sets to call function disappeared() when its done fading out, and we finally start the tween, add it, set the graphic, and the location x,y.

In my code I call it with FloatingText(world.create(FloatingText)).reset(this.x + this.halfWidth, this.y+halfHeight, points.toString()); // Where points are the score the player gets.