JeZxLee Posted January 30, 2015 Share Posted January 30, 2015 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 JeZxLee16BitSoft Inc.Video Game Design Studiohttp://16BitSoft.com Quote Link to comment Share on other sites More sharing options...
ericjbasti Posted January 30, 2015 Share Posted January 30, 2015 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). Olle 1 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.