prtksxna Posted March 29, 2013 Share Posted March 29, 2013 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 Quote Link to comment Share on other sites More sharing options...
Ezelia Posted March 29, 2013 Share Posted March 29, 2013 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. Quote Link to comment Share on other sites More sharing options...
prtksxna Posted March 29, 2013 Author Share Posted March 29, 2013 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 Quote Link to comment Share on other sites More sharing options...
Quetzacotl Posted March 29, 2013 Share Posted March 29, 2013 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); Quote Link to comment Share on other sites More sharing options...
prtksxna Posted March 30, 2013 Author Share Posted March 30, 2013 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.