Crafty Blog - JavaScript Game Engine Development

Development of Crafty

1 note &

Another Canvas Drawing Method - Back to Basics

It looks like Crafty will be going back to basics in terms of Canvas drawing for the next version.

Much time has been spent on trying to get drawing on Canvas to have decent performance and a decent frame rate, but nearly every solution has brought on more problems and I’m starting to think Occam’s razor has it right.

Apparently the Flash player has a total of two redraw regions when redrawing changed elements. I can see now how that might be beneficial as Crafty implements as many regions as objects have changed. Whilst this may work well with very few changing entities, moving lots of objects (like scrolling) means that all the redraw calculations are doing lots of unnecessary work.

After some experiments, the basic method of clearing everything and then redrawing everything isn’t half bad and is more flexible and MUCH MUCH MUCH (times infinity) easier to debug.

One idea I had was to introduce a concept of render modes. The two being ‘naive’ and ‘redraw’ where naive is: clear and draw everything, and redraw is: create redraw regions around changed objects. It takes away a lot of automation but it would be helpful to switch depending on what’s going on in the game.

The naive method is great when 80% of the screen is changing where as redraw regions is pretty much the opposite; when one thing is changing and the rest is static.

For 0.3 I will change it to the basic method (the naive method, I call it) and will see how that works out for people. Currently redraw regions is very buggy with transparency and especially rotation.

  1. atimmer reblogged this from craftyjs
  2. craftyjs posted this