Back in September I invested a chunk of time into building a faster graphics system for Catastrophe X. However, there are still some situations where the graphics get sluggish, particularly in Firefox. The fundamental bottleneck was the underlying graphics technology (SVG/VML via Raphael.js), which was not designed to cope with the large number of shapes needed to fill the viewport with map tiles, craft, actions, etc.
I have spent the past few days creating a component that displays graphics using a technology that is better suited to games like Catastrophe X (HTML5 canvas). In older browsers that do not support this technology (including Internet Explorer up to version 8), the previous graphics component is automatically used as a fallback.
The new graphics system is really, really fast. Once the map has been loaded there is no longer any lag whatsoever when scrolling. This speed opens up new possibilities for future craft complexity and visual effects. And I haven't even fully tweaked the new component yet.
Having just implemented the new system, I am starting to see a few kinks. In particular, there are some artifacts that fade in and out as the canvas is repainted, and the hexagonal tile rounding system needs some work. Fortunately, these issues should not be too difficult to correct.
More soon!
No comments:
Post a Comment