Forums » Help » Popup message

Hi
I have a game which have a 20 fps
When I display my 'message' entity, the framerate falls down to 2-3fps !!
Any idea why ?

ig.module(
	'game.entities.message'
)
.requires(
	'impact.entity',
	'impact.font'
)
.defines(function(){ 

	EntityMessage = ig.Entity.extend({

		font: new ig.Font( 'media/font48verdana.png' ),
		
		animSheets: {
			ok: new ig.AnimationSheet( 'media/message_ok.png', 340, 220 ),
			erreur: new ig.AnimationSheet( 'media/message_erreur.png', 340, 220 ),
			info: new ig.AnimationSheet( 'media/message_info.png', 340, 220 )    
		},		
		checkAgainst: ig.Entity.TYPE.NONE,		
		
		size: {x: 340, y: 220},
		
		init: function( x, y, settings ) {							
			this.parent( x, y, settings );
			
			this.anims.ok= new ig.Animation( this.animSheets.ok, 0.1, [0],true );
			this.anims.erreur= new ig.Animation( this.animSheets.erreur, 0.1, [0],true );
			this.anims.info= new ig.Animation( this.animSheets.info, 0.1, [0],true );
			
			this.value=settings.value;
			
			this.timer=new ig.Timer(settings.duration);												
			this.zIndex=10000;												
			this.pos.x=(ig.system.width-this.size.x)/2 -2;
			this.pos.y=(ig.system.height-this.size.y)/2 ;
					
			this.currentAnim = eval('this.anims.'+settings.type);
			
			//this.addAnim( 'idle', 1, [0],true );				
		},
		draw: function() 
		{
			this.parent();
			var w = this.font.widthForString(this.value);
			var h = this.font.heightForString(this.value);
			
			
			this.font.draw( this.value, this.pos.x+(this.size.x-w)/2, this.pos.y+(this.size.y-h)/2, ig.Font.ALIGN.LEFT );								
		},	
		update: function()
		{					
			if(ig.input.released('MouseUp') && this.inFocus() ) {
				ig.game.clicked.push(this);				
			}							
			if(this.timer.delta()>0)
			{
				this.click();
			}			
			this.parent();
		},	 
		click: function()
		{
			
			this.kill();			
		},
		inFocus: function() {	
			return (
				(this.pos.x <= (ig.input.mouse.x + ig.game.screen.x)) &&
				((ig.input.mouse.x + ig.game.screen.x) <= this.pos.x + this.size.x) &&
				(this.pos.y <= (ig.input.mouse.y + ig.game.screen.y)) &&
				((ig.input.mouse.y + ig.game.screen.y) <= this.pos.y + this.size.y)
			);
		}	
	});
});

thx
Fabien

Problem solved
It comes from

this.font.draw( this.value, this.pos.x+(this.size.x-w)/2, this.pos.y+(this.size.y-h)/2, ig.Font.ALIGN.LEFT );                                

I use now
##
ig.system.context.fillStyle = "black";
ig.system.context.font = "60px Verdana";
ig.system.context.fillText(this.value,this.pos.x+(this.size.x-w)/2, this.pos.y+(this.size.y-h)/2);//
## and my fps is around 17

Yeah, using ig.Font is expensive because it's another draw call per letter, doubly so on mobile.