How do I make a color overlay for an area?

Post reply
0 favourites
  • 7 posts
From the Asset Store
Color Flow
$5 USD
Color all tiles with the same color in 22 moves or less!
01smile's avatar
01smile

  • So this one is a little hard to describe. Imagine I want to have a green screen overlay for a swamp type area and then overlay a red screen effect for an area that has fire or magma type setting what approach would you you do to have a smooth transition between the effects? The idea is setting the mood for a section of the game. Think of the screen slowly getting more yellow as you get to a magma source etc.. What would be the best method for CPU performance.

    Thinking a box that was the whole screen area that just changed RGB based on player distance to a sprite but may be going in the wrong direction.

    Massive PNG overlays for an area is probably a bad waste of disk space and CPU. Any ideas? Thanks.

  • You can use a layer with color background and some effect like "Soft light" or "Overlay".

    See this demo:

    dropbox.com/s/kpzrphtvcsswhsq/ColorOverlay.c3p

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Hi Dop2000 again,

    So I made a crude example of what I'm trying to figure out:

    drive.google.com/file/d/15CAMQy3kAiRhmlkLfnC81FZsXv1qYbTr/view

    As you move the black box around it sets the color from you example to green / red / blue however I'm puzzled how to ad the inverse (when your not on a color square... Alway only works only for the last in an inverse or else statement.

    Thanks for your help but what I was asking was the possibility of somehow fading between these colors. So if the black "player" in my capx example moves closer to the red square the "overlay" would slowly increase to 100% when it was finally overlapped then fade to 0 as you moved away. Same for the other squares. The closer you get to blue the more the "B" var would go up.

    Almost like you would have zones the the color overlay would slowly become active based on your distance from a sprite point.

    I know overlap is not the way to go - just for example.

    Cheers!

  • I'm guessing I need to use lerp between the character position an the color sprite but confused on how to translate that to the RGB value. The complexity comes from doing it on both the x and y axis. Any ideas are greatly appreciated.

  • If you look at my example, there is a disabled event 1, where I tried to fade from red to blue overlay. If you enable it, it happens pretty quickly immediately when you run the app.

    So the idea is when your character is getting close to some object (or starts overlapping it), to set target overlay color and then change R/G/B values of the layer over time to that color. As in my example, R is changing from 100 to 0, G stays 0, B changing from 0 to 100. You can use lerp, tween or any other method.

    There are probably other ways to do this. You can create several layers like that and change their opacity over time, making one visible and another invisible, or even mixing them together.

  • Sorry, I may have misunderstood your question. See this new demo:

    dropbox.com/s/qmax8i9vg3y0uux/ColorOverlay2.c3p

    The color starts to change as player gets close enough to each color square. If you need to change the color constantly, calculating an average R+G+B color in any given position on the layout, this will require some more math...

  • Yeah! Ok Thanks the distance(PLAYER.X, PLAYER.Y, Squares.X, Squares.Y) I'll need to study a little but it works great, Setting dist as a var is probably what I missed but its probably the best practice I would guess.

    Thanks for your help!

Post reply
  • 7 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)