Gradient or fading colours...

Post reply
1 favourites
From the Asset Store
Creepy Sprite Font (+ Kerning settings for Construct 2/3) in 10 colours
$3.95 USD
Creepy Sprite Font suitable font for your Dark/Horror/Halloween games.
Biim Games's avatar
Biim Games

  • Is there a way to create natural gradients in Construct.

    Or is there a way to have one colour fade into another colour. For example if the background layer started off red but as the game progresses it fades into a blue or yellow etc?

    Thanks all :)

  • Maybe just adding a 'Set Color' effect to the sprite and then changing the parameters of it every 0.1s and then stopping that process when it reaches for example 255, 0, 255?

  • Maybe just adding a 'Set Color' effect to the sprite and then changing the parameters of it every 0.1s and then stopping that process when it reaches for example 255, 0, 255?

    I'm not sure how I'd go about this - can anyone expand on how I'd do this?

    I've created a white tiled background sprite and I've given it an Effect of Set Colour.

    Now what?

  • Maybe :

  • Thanks pilpgam - I appreciate your help with this. I've replicated your event sheet and I've been fiddling around with the colours but I can't seem to get the correct colours I need.

    I need the following colours:

    R 255

    G 225

    B 0

    fading into

    R 255

    G 0

    B 255

    ...and every colour between - so it passes through the green and blues also.

    Ashley is there a way to implement this easily?

  • For each RGB use lerp (a, b, x)

    a is colour 1

    b is colour 2

    then set x [0-1] in events based on how you need to move from one colour to another

    (0=colour 1 , 1 = color 2, 0.5 = half between the two etc)

  • Hmm, that seems a bit advanced for my current level. Are there tutorials or basic projects that I can look at that will help clarify the process?

  • Tis not advanced very basic stuff

    you really need lerp for a lot of things in games so good to understand

    here I did background RED only on one slider to keep it simple so you can see how it works

    the slider just moves value from 0 to 1 so result is it is setting red from 0 to 255

    green and blue I left at 0 but if you clone 2 more sliders and put the same lerp then you can control all the colours

    drive.google.com/open

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • pilpgam - thanks for the plugin suggestions but I might look into the code/event sheet suggestion by NetOne. The AdjustHSB plugin looked promising but it altered all the colours in the game as opposed to just colours on a specific level.

    Tis not advanced very basic stuff

    you really need lerp for a lot of things in games so good to understand

    here I did background RED only on one slider to keep it simple so you can see how it works

    the slider just moves value from 0 to 1 so result is it is setting red from 0 to 255

    green and blue I left at 0 but if you clone 2 more sliders and put the same lerp then you can control all the colours

    https://drive.google.com/open?id=1Rx7ysE4UydFQnvB0EmC2MWwFYY9G2FQb

    NetOne - thanks for this.

    I cloned the slider bar and called them SliderBarR, SliderBarG, and SliderBarB - then did:

    System > Every Tick > System > Set layer 0 background color to rgb(lerp(0,255,SliderBarR.Value), 0, 0)

    ---------------------> System > Set layer 0 background color to rgb(0, lerp(0,255,SliderBarG.Value), 0)

    ---------------------> System > Set layer 0 background color to rgb(0, 0, lerp(0,255,SliderBarB.Value))

    However, when I do this only the last slider bar in the event sheet works - in this case, SliderBarB. If I disable that then SliderBarG only works. Does this make sense?

    Also, once I do get all 3 slider bars working together, I'm not sure how I'll automate it so it runs through a set selection of colour points.

  • Yea you got it just put them lerps all in the one event (the first event where the zeros are) instead of 3 seperate events. (Otherwise You are changing the colour three times and will only see the last)

    Actually you don't even need 3 sliders if you just want to move from one colour to another. Just use the one slider.

    Once u see it working you should understand that you can replace the sliders references with a single variable and control colour change in events in game.

  • Nope - completely lost.

    When I put all Lerps in the one event:

    rgb(lerp(0,255,SliderBar.Value), lerp(0,255,SliderBar.Value), lerp(0,255,SliderBar.Value))

    ...the slider just turns the background from black to white.

    I've tried adding instance variables (TestSpriteR, TestSpriteG, TestSpriteB) to a yellow TestSprite:

    system > every tick > Test Sprite > Set TestSpriteR to (lerp(255,0,0))

    ---------------------------------- Set TestSpriteG to (lerp(0,255,0))

    ---------------------------------- Set TestSpriteB to (lerp(0,0,255))

    But that didn't do anything. Yep, I've no idea what I'm doing.

  • I need the following colours:
R 255
G 225
B 0

fading into
R 255
G 0
B 255

    global number t = 0

    t<0

    --- set t to min(t+dt/2, 1)

    every tick

    --- set background color rgb(lerp(255,255,t), lerp(255,0,t), lerp(0,255,t))

    In the "t<0" event you can change the 2 to how many seconds the transition will take.

  • Nope - completely lost.

    When I put all Lerps in the one event:

    rgb(lerp(0,255,SliderBar.Value), lerp(0,255,SliderBar.Value), lerp(0,255,SliderBar.Value))

    ...the slider just turns the background from black to white.

    no you have got it!, and it is working,

    you are getting black to white as those are the colours specified. The 3 zeros above represent RGB of the first colour so it is black and the three 255s are the RGB of of the second colour so is white. if you change those rgbs to other colours then you can fade from what ever colour you like to whatever other colour.

    Then ROJOhound has shown you the next step, that you can replace the slider with a variable controlled in game in this case (t).

  • I found this new plugin interesting, and remind me about this gradient post..

    the new AdvancedRandom plugin could make the colour gradient ?

    construct.net/en/tutorials/getting-started-with-the-advanced-random-plugin-30

    How to implement this cool stuff into game..

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