how to create ragnarok online style bouncing damage text

[nietger]

Hi

I'm in the process of creating a ragnarok online style game, and I would like to know how to create bouncing damage style text. I find this effect in multiple games and would like to implement it in my own. I added a youtube link to show the effect I'm looking for. Any advice greatly appreciated. If possible it would be great if the solution would use actionscript 3.0 and bitmapData instead of vector graphics to optimize speed.

PS : notice how damage text both scales and fades over time.
http://www.youtube.com/watch?v=WzEMJ_LD99A&feature=related

Thanking you in advance

[SparK_BR]

_alpha--;
_xscale--;
_yscale--;

[nietger]

Thanks for the reply. I just need help wrapping my head around a concrete implementation. I was wondering if the effect was achieved using a really simple particle system? Would it be possible to post an example using actionscript 3.0?

[Krilnon]

How about this?: http://reclipse.net/kirupa/damageTest.html

It hasn't been optimized for speed since I find that process to be boring, but it doesn't seem to be much of a hog anyway.


package {
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import flash.text.*;
import flash.utils.*;

public class DamageText extends Sprite {
private static var _duration:int = 1 * 1000;
private var _text:Bitmap;
private var _spanX:int;
private var _spanY:int;
private var _startTime:int = 0;
private var _progress:Number;
private var _complete:Boolean = false;

public function DamageText(text:String, spanX:int, spanY:int){
init(text, spanX, spanY);
}

private function init(text:String, spanX:int, spanY:int){
var field:TextField = new TextField();
field.text = text;
field.background = false;
var lm:TextLineMetrics = field.getLineMetrics(0);
var bmp:BitmapData = new BitmapData(lm.width + 4, lm.height + 4, true, 0x00ffffff);
bmp.draw(field);
_text = new Bitmap(bmp);
_spanX = spanX;
_spanY = spanY;
addChild(_text);
visible = false;
}

public function start():void {
_startTime = getTimer();
addEventListener(Event.ENTER_FRAME, update);
}

private function update(e:Event):void {
if(_complete){
finalize();
return;
}
if(!visible) visible = true;
_progress = (getTimer() - _startTime) / Number(DamageText._duration);

if(_progress >= 1){
_complete = true;
_progress = 1;
}

var p:Point = location;
_text.x = p.x;
_text.y = p.y;
_text.alpha = 1 - _progress;
_text.scaleX = 2 + (1 - _progress * 1.5);
_text.scaleY = 2 + (1 - _progress * 1.5);
}

private function finalize():void {
removeEventListener(Event.ENTER_FRAME, update);
dispatchEvent(new Event(Event.COMPLETE));
removeChild(_text);
_text.bitmapData.dispose();
_text.bitmapData = null;
_text = null;
}

private function get location():Point {
return new Point(_progress * _spanX, f(_progress - (1.0/3)) * (_spanY * (f(1)/f(2.0/3))));
}

// f := Function[x, x^2]
private function f(x:Number):Number {
return Math.pow(x, 2);
}
}
}

A way to test the class:

doDamage();

function doDamage():void {
var d:DamageText = new DamageText(Math.ceil(Math.random() * 501).toString(), 100, 150);
addChild(d);
d.addEventListener(Event.COMPLETE, onComplete);
d.start();

setTimeout(arguments.callee, 100 + Math.floor(Math.random() * 400));
}

function onComplete(e:Event):void {
e.target.removeEventListener(Event.COMPLETE, arguments.callee);
removeChild(e.target as DisplayObject);
}

[therobot]

Or consider using something like Tweener.

[nietger]

Thanks Krilnon for your excellent code. It's exactly what I'm looking for, but I have another question concerning the scaling. I notice that the scaling happens in the upper left corner and I wanted to know if there's any way to make it scale from the center of the bitmap.

Thanks

[Krilnon]

I think that you can use DisplayObject#transform along with the flash.geom.Matrix class to translate to the center, scale, and then translate back.

[SparK_BR]

sorry about my 3 lines...
if you look closely they are the core of the code XD

[Krilnon]

if you look closely they are the core of the code XD

Yep!

[nietger]

Excellent! Thx guys.