Blurring text using SVGCanvas

Get help using Construct 2

Post » Wed Apr 18, 2012 1:53 am

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
B
126
S
7
G
4
Posts: 185
Reputation: 7,233

Post » Wed Apr 18, 2012 5:37 am

Nice effect, so i always static sprites are better when you fade text to blurry text due to performance reasons
B
96
S
25
G
20
Posts: 3,055
Reputation: 22,646

Post » Wed Apr 18, 2012 8:38 am

Yep, alpha-fading Sprites (or even the Text object) would be faster, this is just for when you need an actual blur effect.
B
126
S
7
G
4
Posts: 185
Reputation: 7,233

Post » Thu Apr 19, 2012 8:34 am

@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 .
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 !
B
33
S
9
G
6
Posts: 709
Reputation: 6,704

Post » Thu Apr 19, 2012 8:32 pm

@Pode, that sounds great! What would it dump the canvas to? A layer? Possibly a Sprite object? :)
B
126
S
7
G
4
Posts: 185
Reputation: 7,233


Return to How do I....?

Who is online

Users browsing this forum: Callan S, getplay, Kagubro and 26 guests