Jump to content

Game engine - stress test and performance


Recommended Posts

Hi,  After writing few times games in different languages (mostly some student projects), I came up with an idea to write my own 2d engine in JavaScript. My main goal is to learn something new (and to have fun with it).

Simple project became huge and even lived to see its own sprite-model'ish-animations editor. 

My problem is performance and not fixed number of frames:

1500 elements stress test:

(I tried to remove unnecessary lines of code to improve readability)

Conclusions: drawImage function occupies 83% of total script execution time (screen: http://i.imgur.com/zy5SB7s.png) and the frame rate is not stable (~40-60) (screen: http://i.imgur.com/KBNF4V7.png). I'm pretty sure that it's not garbage collector's fault.

I would like to mention that i cache every 'shape' and draw it as whole image later because it is faster than painting each shape 60 times per second also in example above i draw everything even if some element is outside the canvas. 
You probably wonder why would anyone need 1500 objects on screen, well i don't need them but it should be possible to do. For example Pixi can handle (on my machine) 10 000 bunnies at the same time (http://www.goodboydigital.com/pixijs/bunnymark/) and I'm sure they are not using web workers in that example.

I even tried to get some hints how to improve code from Chrome's V8 JavaScript engine  but results are not stunning.
Pre-rendering frames sounds cheap for only 1500 elements so i didn't try it.

My question is: are there any tricks to improve performance of drawing images? Or maybe I'm doing wrong something else?



Link to comment
Share on other sites

Canvas is quite fast if used properly, but WebGL approaches are usually always going to win Bunnymark tests.


Consider that performance of drawImage() can vary significantly from device to device, browser to browser dependent upon whether Canvas or Image is passed as the input source.  An elaborate engine tests which performs best ahead of time, and uses the optimal input at runtime.  Also consider that drawImage() calls using integers often perform better than floats.


As always with HTML5, no golden rules exist, every case is a unique case :)

Link to comment
Share on other sites

  • 2 weeks later...

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.

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.


  • Recently Browsing   0 members

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