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

0 favourites
From the Asset Store
A fun horror zombie game you can upload to your website
  • Hello, I would like to achieve something like this (Starbound):

    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?

  • 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.

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

    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:


    • 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.


    • 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...


    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.


    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.

  • 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.

  • 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...

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

  • 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.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Thanks! Actually, yes, you can tint your light...

    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

  • Here is another nice light tinting screenshot...

  • 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.

  • Here is my attempt. I use Source atop blend mode instead of TintMask.

  • And here is my LightMask/TintMask example, made specially for this friendly forum...

    EDIT: This example has a single layer dark mask (whit light hole punched in), light tint mask (cycle) and sine opacity and size behavior, used to simulate the light flicker.

  • Good job Katala.

    Lunarovich, thanks for your example.

    Certainly, this forum is full of friendly people. From the creators of the TOOL (in capitals), the software itself, and all the community, have reached a level I haven't seen before on any site.

    I learn a lot every day with every topic.

  • Katala, thanks for the blend mode additive tip for pre-baked light tints. Probably a better solution on the level of aesthetics and performance than my TintMask application.

  • One thing to note is that it is better to make Paster object follow screen and make it slightly bigger than what can be seen to cope with set position lag.

    On larger levels the image memory usage will rise quickly if Paster object is very large.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)