Images vs Drawing (Canvas)

[prtksxna]

Hello,

 

I recently started work on a game whose code can be found here - https://github.com/prtksxna/jump and it can be played here - http://prtksxna.github.com/jump/ (Only works on Chrome for now). Please give it some time to load the images. Spacebar to pause the game.

 

I was initially drawing rectangles using fillRect instead of using drawImage to make the arrows. This has lead to major performance hit. I was initially getting 200-250 FPS, and now I am getting around 100-150 FPS and it sometimes randomly drops to 50 too 

 

I initialize a new image for every instance of the arrows here - https://github.com/prtksxna/jump/blob/master/res/js/button.js#L49 Is that what is causing the slow down?

 

Also, I am not planning to have very complicated graphic assets, so should I just draw straight on canvas. I am planning to do pixel art so there might be a lot of fillRects in that case as well.

 

How is this usually done? I am new to this and any pointers would be nice. I would not like to use a game or physics engine though.

 

Thanks,

Prateek

[Ezelia]

the game crashes on chrome too, I was not able to test it.

but there is something strange here ... 50FPS is almost perfect! the best you can do is 60FPS since human eye can't "process" more than 60FPS

so here I think you need to reduce your framerate or maybe adjust your FPS calculation method.

 

now if you feel drawing makes performance drop, you can use canvas cache. draw your rectangle one time to a dynamically generated canvas element (document.createElement('canvas') ... ) then pass that canvas to drawImage() method.
 

[prtksxna]

Thanks for the reply 

 

What version are you on? The images take a while to load so you need to pause the game (spacebar) as soon as it starts and then start playing. Did you get an error?

 

The problem is that the FPS is changing erratically I am unable to figure out from the profiler why that might be.

 

[NOOB]

Ooh! I never heard of canvas cache! Will look at docs. Thank you so much 

[Quetzacotl]

prtksxna. As I can see in your draw method:

 

   if(this.y > this.game.h){ // Out of the canvas out of the game            this.destroy();            return false;        }    var img = new Image();    img.src = "res/img/" + this.img;    this.game.canvas.drawImage(img, this.x, this.y);    return this.x 

You are creating new img every call to draw which is extremely inefficent!

You have to create every img you need in game, before game start and store it in some variable, in example 

arrow_img.src = 'path';var images = {  'arrow': arrow_img}

 

additionaly you have to wait till img loads, so add this:

var images = {};var images_count = 0;var ALL_IMAGES_COUNT = 1;var onLoad = function() {    images_count += 1;    if (images_count === ALL_IMAGES_COUNT) {        start_game();    }};var arrow_img = new Image();arrow_img.onload = onLoad;arrow_img.src = 'path';images['arrow'] = arrow_img;

 

Remeber that onLoad will be called in document scope.

 

When all images loads then in draw do simply:

this.game.canvas.drawImage(images['arrow'], this.x, this.y);

[prtksxna]

Added a method to load the images in the beginning (https://github.com/prtksxna/jump/blob/master/res/js/game.js#L22) and using those to load the images (https://github.com/prtksxna/jump/blob/master/res/js/button.js#L49) the FPS came back up 

 

Don't want to check for image loading so I just bound the game start to window.onload (https://github.com/prtksxna/jump/blob/master/res/js/game.js#L1)

 

Thanks Quetzacotl!

 

 

@Ezelia - I think I'll use this for now, drawing on canvas is possible but would be to cumbersome for now. Thanks for the advice, will use for something else