Jump to content

Images vs Drawing (Canvas)


prtksxna
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.
 

Link to comment
Share on other sites

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  :)

Link to comment
Share on other sites

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);
Link to comment
Share on other sites

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  :D

 

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  :)  

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...