Forums » Code » Image Draw Counter

Enable this when you want to optimize the performance of a game by seeing if too many images are being drawn at once to make up a frame.

Do this in a init function of a game if you want to debug the number of images and keep track of fps (frames-per-second)

ig.DrawCounter.enable(); // Count image drawing and FPS

or

ig.DrawCounter.enable(false); // Just count image drawing

In a game&039;s #draw function, do this:

draw: function() {

	if (ig.drawCounter) {
		ig.drawCounter.addInterval();
	}
       
    this.parent(); // Call standard game draw code after a new interval is added

    // Now ig.drawCounter.imageCount has the number of images
   // Use a font to draw the value of ig.drawCounter.imageCount somewhere or use some other debugging tool
}

Download the plugin

Great plugin, hope you don't mind but I went ahead and forked, cleaned - https://github.com/Hareesun/ImpactJS-Image-Draw-Counter :)

I couldn't get this to work. I used Hareesun's code but when I console.log(ig.drawCounter.imageCount) it is always 0, even when many things are going on in the game.

Hey Jesse

Would you mind if I ported this into my Debug Information plugin? I think it would nicely complement the bits i've cobbled together.

Quote from stahlmanDesign
I couldn't get this to work. I used Hareesun's code but when I console.log(ig.drawCounter.imageCount) it is always 0, even when many things are going on in the game.

Did you call ig.DrawCounter.enable(); in a game init function?
Does your game draw function follow the same pattern as the example?

It is case sensitive, make sure there isn&039;t a mixup of the class #DrawCounter and the instance stored at ig.drawCounter which is used as the main instance.

If you need a working example, I'll provide one.

Quote from empika
Hey Jesse

Would you mind if I ported this into my Debug Information plugin? I think it would nicely complement the bits i've cobbled together.

No, I don't mind if anyone copies it because it's free and open source.

@Jesse - I check the things you pointed out and it's still not working for me. If you have a minute I wouldn't mind seeing it in action, and maybe from that I'll figure out my problem.

I took the Jump'n'Run demo from the Downloads page and added in this plugin and also the ScreenFader plugin at half speed.

Just add in your ImpactJS "impact" folder into "lib".

source

Thank you so much for this. I don't get why Im not getting the FPS when i use this.. I am calling it the way described, but im just getting one line with the ever increasing number... does that sound correct, or is something wrong....

// check if DrawCounter instance is enabled
if (ig.drawCounter) {
     // Draw the total number of images used to draw the scene, but not counting the image drawing the letters of that number require
     this.font.draw(ig.drawCounter.imageCount, 2, 10 );			
}

80bit,

Something is up with the FPS counter, and I think I know what it is, but I haven't spent any time trying to fix it. I think FPS gets miscalculated when the game is no longer being drawn by the browser (like when I change browser tabs or minimize the browser). It seems to be right if the game is played without any interruptions. I do believe the image counting logic is 100% accurate even with interruptions though so I may just remove the FPS logic to lighten up the plugin. FPS counting was an afterthought of this plugin, it was really all about counting the images.

Thx mate! Found another thread on here with a functioning version so im good to go. I appreciate your script too though - If i see my number constantly rising does that basically mean i have a leak or something?

It doesn&039;t mean you have any leaks, I think it's something do with the timer and the counting in the plugin. With the image count number, it's bad to have a high number of images being drawn per frame, it's going to result in lower frame rate. If you have #BackgroundMap that isn&039;t pre-rendered or use #Font to draw strings that have a lot of characters (each character is a draw image call) and of course Entity. The amount of flexibility you have is pretty good, you get to draw a few dozen images before things get slow. I set my ig.Timer.maxStep to a lower value which helps browsers in iOS and Android (or any mobile) devices.