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

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

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 <img src="smileys/smiley20.gif" border="0" align="middle" />

(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.)

Cool!

Care to share the .capx!? :D

Sure. I'm at work now, but I'll try to whip something up on my lunchbreak. :)

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!

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!

6 years ago but still very good!!! Thank you! If you want to do the translucent blur effect, this'll make it happen! Thank you! I got it working!