How do I make a dark/night mask over a single layer?

Get help using Construct 2

Post » Sun Oct 19, 2014 6:54 pm

Hello, I would like to achieve something like this (Starbound):

Image

On the image above a foreground layer mask masks only non-transparent parts of the single (foreground) layer. Every other layer is unaffected by the darkness of the foreground layer mask. Lights "punch" holes in this mask using, I suppose, a "destination out" blend type.

Now, I know how to make a whole layer partially non-transparent or fully opaqu and punch wholes in order to see lower layers (layers beneath it). This is demonstrated in C2 Lighting example. However, this is NOT something I want, since a sky layer should not be affected by the foreground dark mask.

Is it possible to achieve this in C2 and what would be the best way to do it?
B
6
S
2
Posts: 64
Reputation: 576

Post » Mon Oct 20, 2014 8:44 am

I also like to know,
You can make it with C2 but i don't know how.
Game called "Reven" have the same effect, And "Our darker purpose" also.
B
60
S
10
G
10
Posts: 1,013
Reputation: 9,155

Post » Mon Oct 20, 2014 9:00 am

I actually managed to solve the problem myself. Here is the result

Image

As you can see, the sky is bright (not masked by foreground layers) and the background layers are not affected by the foreground layer light system.

I achieved this using Paster plugin. Bascially, you use an invisible layer to render a tint mask image which you paste, using a Paster plugin, on the target layer (the layer which you want to mask).

A more detailed version:
1)
- I created an invisible layer called "NightMask".
- I placed a "Night" black rectangular sprite over the layer.
- I placed "LightMask" (images with alpha transparency) with the blend mode "destination out" over the black rectangular sprite "Night". This has punched the holes in the "Night" sprite. These holes will act as lights.
2)
- I created a Paster object on the target foreground layer - a layer which has to be darkened completely (without affecting the luminosity/brightness of other layers) and partially lit by the lights. I added a Tint Mask effect to the Paster object.
- I checked the Force own texture option on the target layer. In that way we ensure that the Tint Mask effect affects only the target layer.
- I pasted in Paster all objects from the "NightMask" invisible layer. That has created a dark tint mask with alpha transparency holes punched in it.

Hope someone will find this explanation helpful... :)
B
6
S
2
Posts: 64
Reputation: 576

Post » Mon Oct 20, 2014 9:26 am

ADDENDUM 1

As Ashley points out, "Prefer to add the shader effect to a whole layer, then put any objects you want to have that effect on that layer. This means the overhead of processing a shader only happens once." Thus, I control the tint and brightness of other layers independently (per layer basis) using the Tint effect applied on a layer.

Unlike the Tint mask, Tint affects only the tinted object/layer (and does not affect background objects/layers). As a further optimization, be sure to keep the option "Force own texture" of non masked layers (simply tinted layers) off.

ADDENDUM 2
Anyway, @Ashley, it would be very useful, for situations like this, to have a plugin which composits/blends chosen images/sprites in real-time (per tick basis) and gives them readily available as a single image/sprite object. Thus, we could elminate the overhead of using the transitory invisible layer (as is the case with Paster plugin) and would have a more elegant overall solution.
B
6
S
2
Posts: 64
Reputation: 576

Post » Mon Oct 20, 2014 12:44 pm

Thanks for sharing this! I thought about this Paster method just yesterday :)

I got the same effect before using Destination atop and Source atop Blend modes but for some reason it didn't work on Node-Webkit.
You do not have the required permissions to view the files attached to this post.
B
34
S
9
G
3
Posts: 517
Reputation: 5,226

Post » Mon Oct 20, 2014 1:24 pm

Thanks for sharing your capx. Sadly, a node-webkit does not work...

On the other hand, I've tested my solution, and it works in a node-webkit :) This C2 is such a fine tool... Look what I've got with different tint settings...

Image

p.s. Sorry, cannot send capx... I'm working on a commercial project... But the explanation / mini tutorial above should help. If anyone is in doubt, I can explain further, if need be...
B
6
S
2
Posts: 64
Reputation: 576

Post » Mon Oct 20, 2014 1:44 pm

@Lunarovich Looks really nice, is it possible to make the light another colour, like red and put a multiply effect on it,so it looks like a flare or something.
B
22
S
6
Posts: 244
Reputation: 2,690

Post » Mon Oct 20, 2014 2:12 pm

Thanks! :) Actually, yes, you can tint your light...

Image

However, since original LightMask is in a "destination out" blend mode, you'll have to make another mask (I call it originally TintMask :) ) and synchronize its position, angle, etc. with the LightMask. You put your TintMask on top of all objects in the target level.

I am using the sine behavior for the opacity and size on the LightMask in order to give some flicker to it. Naturally, you do not see it on the picture, but the effect is just great :)
B
6
S
2
Posts: 64
Reputation: 576

Post » Mon Oct 20, 2014 2:52 pm

Here is another nice light tinting screenshot...

Image
B
6
S
2
Posts: 64
Reputation: 576

Post » Mon Oct 20, 2014 3:06 pm

Good explanation Lunarovich.

I've read what you wrote about the "no uploading capx", and of course, everybody understand your work in a project. So, could you write on a capx only the part which make this achievement possible? It would be very helpful for many of us, and it should be the best explanation.

Anyway, thank you for your topic.
B
25
S
3
G
1
Posts: 53
Reputation: 1,417

Next

Return to How do I....?

Who is online

Users browsing this forum: No registered users and 25 guests