Layer Masks? (like photoshop, gimp, etc..)

Get help using Construct 2

Post » Fri Jul 19, 2013 2:33 am

Hello my fellow Constructors!

I'm wondering if anyone has found a way to create something similar to layer masks in Construct 2, similar to how they work in image editing programs.

I'm gathering ideas for a future game and I would really like a way to have a sort of faded blur or haze effect on the screen. By that I mean, the original art naturally fading into a blurred portion of the screen. (ie: bottom of screen = clear, middle of screen = kind of blurry, top of screen really blurry)

In most art programs, you do this by creating a layer mask with a black and white gradient. The mask basically controls the layer's opacity.

Does anyone have any ideas on how to accomplish this in Construct 2? I tried looking through the WebGL effects and couldn't find much. But then again there are so many I may have missed it!

Thanks,
Dustin
B
16
S
2
G
4
Posts: 42
Reputation: 2,642

Post » Fri Jul 19, 2013 3:05 am

Got it! (maybe!)

I created a layer with a single white image fading from 0% to 100% opacity. This layer has the "divide" and the "horizontal blur" effects in that order (NOT the sprite on the layer, but the layer itself.) Higher opacity = more effect.

Awesome


(on a side note, the current game I'm working on uses a similar trick to add scanlines to the entire game without using multiple layers. Single white image on the top most layer with the divide and scanlines layer effects applied.)
B
16
S
2
G
4
Posts: 42
Reputation: 2,642

Post » Fri Jul 19, 2013 3:46 am

Cool!
Care to share the .capx!? :D
B
108
S
40
G
10
Posts: 456
Reputation: 13,257

Post » Fri Jul 19, 2013 2:17 pm

Sure. I'm at work now, but I'll try to whip something up on my lunchbreak. :)
B
16
S
2
G
4
Posts: 42
Reputation: 2,642

Post » Fri Jul 19, 2013 4:40 pm

Tada!

https://dl.dropboxusercontent.com/u/161279569/construct2/forum/mimic_layer_mask.capx


This is a very quick example of applying a "dream like" effect to the top and bottom portions of the screen. It uses Construct 2's built-in autorunner demo.

Steps to reproduce:
1. Create a new layer with a parallax of 0,0 and place it above the layer(s) you would like to change. This will effect all layers underneath this "layer mask."
2.) Create/import a new sprite on this new layer or tiled background that fades from white to transparent.
3.) First apply the "Divide" effect to the new layer and the add any other effects you would like after that.

That's really all there is to it. The whiter the area, the more of the effect you'll have and the more transparent the area, the less of the effect you'll have.

I plan on using it to create a tilt-shift effect in a future game, but I can also see this as a way to create patchy fog, fuzzy line-of-sight by pinning the image to the player, etc. This method should work with all effects so you should be able to do things like apply a wave effect just above the ground to imitate a hot sunny day, etc.

Pretty cool!
B
16
S
2
G
4
Posts: 42
Reputation: 2,642


Return to How do I....?

Who is online

Users browsing this forum: repkino and 3 guests