Forums » Impact Engine » Font opacity/alpha?

Hello, I've been playing around with some finishing touches for a little game and I use Impact's font's quite a bit. I was looking for an easy way to adjust a font's alpha channel just like you can with any entity's animation. It'd be cool to fade text in and out to achieve some cool effects.

Anyways, my guess is it would be taken care of inside font.js but I'm not completely sure...

Fonts don&039;t have an #.alpha property yet. I'll add this in the next version.

For now, you can set the global alpha "by hand" and then draw your font like this:

ig.system.context.globalAlpha = 0.5;
font.draw( 'test', x, y );
ig.system.context.globalAlpha = 1;

Ah, didn't think about the globalalpha, that's cleaner then I thought! Thanks for planning to add an .alpha property to fonts in the future as well.

Can this get bumped into 1.20 please?

Quote from Arantor
Can this get bumped into 1.20 please?

You may have already done this, but I'll post it here for anyone else who finds this thread. You can add the feature to font.js with only seven lines of code.

Add this with the other properties.

alpha: 1,

Put this at the start of the draw routine.

if( this.alpha != 1) {
	ig.system.context.globalAlpha = this.alpha;
}

Put this at the end.

if( this.alpha != 1) {
	ig.system.context.globalAlpha = 1;
}

Yes, yes, I realise that. That wasn't what I was asking.

Dominic said in the above that he was going to include it 'in the next version'. That hasn't happened, so I was bumping in the hope it would be included by default next time around.

Quote from Arantor
Yes, yes, I realise that. That wasn't what I was asking.

I know. But I might as well post how to do it for anyone who doesn't know off-hand seeing as releases appear to be a few months apart.

@Ryiah, you'd be better of doing it with an inject instead of directly hacking the code.

ig.Font.inject({
	draw: function( text, x, y, alpha, align ) {
		ig.system.context.globalAlpha = alpha ? alpha : 1;
		this.parent( text, x, y, align );
		ig.system.context.globalAlpha = 1;
    }
});

font.draw( 'Some text', x, y, 0.5 );

Quote from Graphikos
@Ryiah, you'd be better of doing it with an inject instead of directly hacking the code.

Probably. At least you wouldn't have to worry about changing it back to 1.0 when you don't want transparency. Still very new to ImpactJS and JavaScript in general so I wasn't sure how to do it better. Nice to know how to overload functions (assuming I stick to this class system).