Jump to content

Possible To Do "Dirty Rectangle" Draw Optimization?


JeZxLee
 Share

Recommended Posts

Possible To Do "Dirty Rectangle" Draw Optimization?

 

Hi,

 

My team and I finished a beta1 release of our HTML5/JS word game "LettersFall 5".

We have shifted our focus now on HTML5 game engine drawing optimization.

 

Would "Dirty Rectangle" drawing optimization be technically possible in HTML5?

If it's possible then could someone explain how to do it or show us a website that describes it?

(we are not interested in using WebGL)

 

Thank you in advance...

 

P.S. - You can play and download the source code project at the following URL address: http://lettersfall.com

 

JeZxLee

16BitSoft Inc.

Video Game Design Studio

http://16BitSoft.com

Link to comment
Share on other sites

Totally possible. But not always realistic. I actually use a slight variation of dirty boxing in this example : http://codepen.io/ericjbasti/pen/gpfuH

 

Instead of getting the bounding box (dirty rect) I pop a sprite from a linked list of sprites, clear its representation from a cached canvas and place it into a linked list of sprites that are in the act of changing. When the change is complete they are pushed back into the original linked list and that cache is updated by simply drawing the updated rect to the cache. In the example on codepen its pushing 1024 sprites but only rendering the cached group and any sprites that may have been hovered. This reduces the number of draw calls by quite a bit (usually around 10-20, instead of 1024). 

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...