Forums » Help » RPG style floating combat text question

I'm trying to have it so the combat text floats above an enemy target's on receiving damage but so far I'm only successful in centering the text in the viewport. It has to be an offset issue but I'm not sure how to do it when translating enemy positions relative to the camera centred on the player.

Has anyone coded a flexible approach to that would enable damage types to show up in different coloured text?

enemy.js

	// Floating combat text
	damageTimer: function(time){
		this.dmgTimer = new ig.Timer(time);

		// Center in the viewport - would be better if the position was above enemies head
		this.dmgtext = {x: ig.system.width/2, y: ig.system.height/2};
	},

	// called from draw() function
	damageText: function(value){
		if(this.dmgTimer){
				if(this.dmgTimer.delta() < 0){
						ig.game.font.draw(value, this.dmgtext.x, this.dmgtext.y-=2);
				}
		}
	},

	receiveDamage: function(value){
		this.parent(value);
		this.damageTimer(1);
		this.currentAnim = this.anims.hit;
		ig.game.spawnEntity(EntityExplosion, this.pos.x, this.pos.y, {particles: 2, colorOffset: 0});
	},

Something like this should work:

this.dmgtext = {
	x: this.pos.x - ig.game.screen.x, 
	y: this.pos.y - ig.game.screen.y - 32
};

To draw differently colored fonts, you need differently colored font files. Or you can draw the text using the Canvas&039; native #fillText() method, instead of Impact's bitmap fonts. Quidmonkey wrote a helpful plugin for that: Canvas Native Font Plugin.

Thanks Dominic you rock!