Forums » Help » draw HUD

hi all

I'm trying to dynamically draw. Some text in screen, the code works but because its in the draw function it only draws each letter for one frame, noob error, but how do I do this:

while ( length <= I -1) [

ig.game.font.draw.(ig.game.wordstring[letter], 410, yval);

yval = yval + 27;
length ++;
letter ++;

]

I'm not sure I understand what you are trying to do...

Are you trying to write text to the screen, such that the letters appear one by one as time progresses?

PaulH did you check your brackets ?

while(...) { .... }

not

while(...) [....]

.H

brackets were typo on my behalf in post.

I'm trying to draw text on screen dynamically but each letter is only drawn for one frame rather than staying on screen until I reset it.

so code works but only for oneframe?

please help tried all I could think of now :'( missing something obvious!

If only a single letter is drawn, then your while loop increments once and fails the initial condition of length < I. What is the starting value of both?

word is created in a differnet entity:

var wordrand = ig.game.wordlist.random();
		console.log ("randomword :", wordrand);
		ig.game.wordstring = wordrand.toString();
		ig.game.wordlength = ig.game.wordstring.length;//drawing the words in matchplay

then the hud entity controls what i drawn on screen:

	init:function( x, y, settings ){
	    var font = new ig.Font( 'media/04b03.font.png' );
	    this.secTimer = new ig.Timer(1);// second counter initialise
	  
	   	console.log("what gametype is it " , gametype);
	   	xval =-5;
	   	w=7;
		letter =0;
		length=0;
		var i = 0;
	},

run:function(){
     	
     switch(gametype){
    	case 1://freeplay
    	break;
    	
    	case 2://storymode
    	break;
    	
    	case 3://matchplay
    	

		for (var i =0;i<= ig.game.wordlength;i++){
			
		ig.game.font.draw( ig.game.wordstring[letter], 410, xval);
		xval= xval + 27;
		letter++;		
		}
    
    	break;
    	case 4: //timeattack
    	break;
    	}
    },

This is error on top of the fact it only draws the words for a frame or two...

TypeError: 'undefined' is not an object (evaluating 'text.toString')  font.js 34

So the for loop doesn;t seem to stop, which i think is creating the error, and i'm stooopid which means it wont draw for more than a frame ;-)

Try this:

for( var i = 0; i < ig.game.wordlength; i++ ){   
        ig.game.font.draw( ig.game.wordstring[letter], 410, yval, ig.Font.ALIGN.LEFT );
        yval += 27;
        letter++;        
}

thanks for trying, same errors, words just drawn for a frame or two!

P

Prior to the for loop do this:

console.log( ig.game.wordstring );
console.log( ig.game.wordstring[0] );

What does the console say?

Also, change the for loop like so:

for( var i = 0; i < ig.game.wordlength; i++ ){   
        ig.game.font.draw( ig.game.wordstring[i], 410, yval, ig.Font.ALIGN.LEFT );
        yval += 27;       
}

""Quote from quidmonkey
Prior to the for loop do this:

console.log( ig.game.wordstring );
console.log( ig.game.wordstring[0] );

GAUNTLY
G

for( var i = 0; i < ig.game.wordlength; i++ ){   
        ig.game.font.draw( ig.game.wordstring[i], 410, yval, ig.Font.ALIGN.LEFT );
        yval += 27;       
}

This fixes the console error, but still only drawn for one frame .. thanks for your help!

Geez, why didnt i see that, so obvious and so much cleaner :-( :-)

Now jut the draw to fix, which will also be something daft im doing:-)

Do this:

var str = ig.game.wordstring;
for( var i = 0; i < str.length; i++ ){   
        ig.game.font.draw( str[i], 410, yval, ig.Font.ALIGN.LEFT );
        yval += 27;
}

thanks again, but still just drawn for a frame, no other problems!

this is within an Entity, if that changes anything?

Which letter is being drawn? And where is this.run() being called from?

all the letters are drawn but just for a frame, run is called as part of the entity code after the init....

the switch value is set in a menu entity

You need to call this.run() every frame. ig.game.draw() clears the canvas with black every frame. Thus, in order for your word to continue to appear, you need to paint it onscreen every frame, otherwise it'll get drawn once and then disappear. I'd recommend moving the for loop from the Entity's run() and into the Entity's draw().

so if i change run:fucntion(){}
to

draw:function(){

your code here

}

then it still doesnt stay on screen, how do i make it draw every frame?

if i add

this.draw();

then it repeats inefinatly and reaches a maximum stack size :-(

Can you post your entire class?

this is how i updated it to put it in the draw:

ig.module(
    'game.entities.hud'
).requires(
    'impact.entity'
).defines(function(){
    
EntityHud = ig.Entity.extend({
	size: { x:0, y:0 },

	collides: ig.Entity.COLLIDES.NEVER,
	font : new ig.Font( 'media/04b03.font.png' ),
    
init:function( x, y, settings ){

	 var font = new ig.Font( 'media/04b03.font.png' );
	   console.log("what gametype is it " , gametype);

yval =-5;

	},

	draw:function(){
		ig.game.font.draw( ig.game.min, 200, 10);
		ig.game.font.draw( ":", 235, 10);
		ig.game.font.draw( ig.game.sec, 250, 10);
		ig.game.font.draw( ig.game.myword, 40, 280);
		
		var str = ig.game.wordstring;
        for( var i = 0; i < str.length; i++ ){   
        ig.game.font.draw( str[i], 410, yval, ig.Font.ALIGN.LEFT );
        yval += 27;  
        


}

}

    });
    });

tidied it up a little ( a lot) after posting...

Try:

ig.module(
    'game.entities.hud'
)
.requires(
    'impact.entity'
)
.defines(function () {

EntityHud = ig.Entity.extend({

        collides: ig.Entity.COLLIDES.NEVER,
        font: new ig.Font('media/04b03.font.png'),
        size: { x: 0, y: 0 },
        yval: -5,

        draw: function () {
            this.font.draw(ig.game.min, 200, 10);
            this.font.draw(":", 235, 10);
            this.font.draw(ig.game.sec, 250, 10);
            this.font.draw(ig.game.myword, 40, 280); //draws the word array of killed letters
            var str = ig.game.wordstring;
            for (var i = 0; i < str.length; i++) {
                this.font.draw(str[i], 410, this.yval + i * 27, ig.Font.ALIGN.LEFT);
            }

        }

});

});

I LOVE YOU!!!

Works fine, now i have to work out what you did, thank you so much!!!

You might want to consider picking up a Javascript book to learn your way around a bit better. You can compare what you posted vs. my version and see a fair amount of changes. In particular, watch out for identifying variables with this when referencing a Class&039;s property. You'll notice that #yval had no this prefixed to it identifying it as such.

so why do you call

this.font.draw

instead of

ig.game.font.draw

Also, if your game's gravity > 0, don't forget to set your HUD's gravityFactor to 0.

This is also a good link to read through.

Quote from paulh
so why do you call

this.font.draw

instead of

##

ig.game.font.draw

##

Because you have a this.font property defined for the Entity. No need to reference ig.game&039;s #.font property if you already have one defined in the current class!