Blurring text using SVGCanvas

Hi everyone,

Sorry first off, if this is in the wrong place. It's basically answering my own question, but I figured it'd be best placed here in the "How to" section.

Anyway, I was wondering how I could go about getting some blurred text with the current version of C2, which doesn't yet provide a blur effect as Construct Classic did.

Then I tried out Pode's SVGCanvas plugin and found a nice way to add that effect!

You can utilize SVG filters to achieve any number of effects. More than that, the free Inkscape software provides a massive plethora of filters that you can easily reuse by exporting the SVG file you create, then copy-pasting the filter code into the SVGCanvas, like the example below does.

Here's that example: SVGCanvas Blurring Text

And here's a .capx: svgcanvas-blurring-text.capx

One word of caution, for those unaware, SVG can be a bit resource intensive. Unlike the HTML5 canvas, SVG uses HTML tags for its composing element, thus more HTML to load on the page. SVG would probably be best used sparingly in most cases.

Happy Constructing!

-David

Nice effect, so i always static sprites are better when you fade text to blurry text due to performance reasons

Yep, alpha-fading Sprites (or even the Text object) would be faster, this is just for when you need an actual blur effect.

Ugotsta : it's great that you find a use for the plugin !

I need to add some basic filters by default to that plugin, so thanks for nudging me <img src="smileys/smiley2.gif" border="0" align="middle" />.

I'm also going to add the possibility to dump the whole SVG canvas at once inside the 'regular' canvas (the one from C2). That means that after the first rendering, no more penalty hit !

Pode, that sounds great! What would it dump the canvas to? A layer? Possibly a Sprite object? :)