How could I make light transitions smoothe?

[MaxGamz]

I want the atmosphere to darken the higher the rocket in my game rises. I didn't want to hard code in the values so I decided to use modulo do increment or decrement the color of the sky based on the vertical distance travelled. I found that it does work but not as smoothly as I predicted since there are some moments where the color change is more drastic and less obvious.'

Code: Select all

if Player.yVel < -10 and (distance % 100 >= 0 and distance % 100 <= 1) then  -- distance is the vertical distance the player is from spawn
        val = val - 1                                                                                       --  val is the green light value of the background
        val2 = val2 - 1										         --  val2 is the blue light value of the background
    elseif Player.yVel > -10 and (distance % 100 >= 0 and distance % 100 <= 1) then
        if val < 150 then
            val = val + 1
        end
        
        if val2 < 255 then
            val2 = val2 + 1
        end
    end

Here is the game to give full context:

Game.love

(864.04 KiB) Downloaded 95 times

[Bobble68]

I want the atmosphere to darken the higher the rocket in my game rises. I didn't want to hard code in the values so I decided to use modulo do increment or decrement the color of the sky based on the vertical distance travelled. I found that it does work but not as smoothly as I predicted since there are some moments where the color change is more drastic and less obvious.'

I'm not 100% sure what you're trying to do with your code here (side note, I'd really recommend naming variables more explicitly named than val and val2 - here they literally just mean green and blue, so they should be named as such) - modulo seems like a really strange operation to use, and I'm not sure why the player's velocity should have any affect on how the sky looks.

I had a look through the game's relevant code, and here's the solution I've come up with. Since the colour of the sky is purely a graphical change, I recommend doing this calculation in love.draw() instead. The attached solution uses only the distance for the height, so no addition global variables are needed.

Code: Select all

function love.draw()
  
  local fadeHeight = 1000 -- this is the height when the fade starts
  local atmosphereHeight = 1500 -- this is the height the fade stops, becoming black
  
  local fade = 1 - math.max(distance - fadeHeight, 0) / (atmosphereHeight - fadeHeight)
  
  -- Here you can set the sky colour by changing the number before fade
  local r = 0 * fade
  local g = 150/255 * fade
  local b = 1 * fade


  love.graphics.setBackgroundColor(r, g, b)
  cam:attach()
  Map:drawLayer(Map.layers["tiles"])
  --currAnim:draw(Player.img, Player.x, Player.y, nil, Player.factor * Player.zoom, Player.zoom, 4, 8)
  love.graphics.print("Distance = " .. math.floor(distance) .. " meters", Player.x - 180, Player.y - 140)
  Player:draw()
  cam:detach()
end

The colour values are multiplied by fade, which is calculated using height - when fade is 0, everything will be black, but when it is 1, the colours will be in their base state. You can change the fade and atmosphere height to change where the fade starts and ends to your liking, but atm they're just in a place that's easy to reach.

[MaxGamz]

I want the atmosphere to darken the higher the rocket in my game rises. I didn't want to hard code in the values so I decided to use modulo do increment or decrement the color of the sky based on the vertical distance travelled. I found that it does work but not as smoothly as I predicted since there are some moments where the color change is more drastic and less obvious.'

I'm not 100% sure what you're trying to do with your code here (side note, I'd really recommend naming variables more explicitly named than val and val2 - here they literally just mean green and blue, so they should be named as such) - modulo seems like a really strange operation to use, and I'm not sure why the player's velocity should have any affect on how the sky looks.

I had a look through the game's relevant code, and here's the solution I've come up with. Since the colour of the sky is purely a graphical change, I recommend doing this calculation in love.draw() instead. The attached solution uses only the distance for the height, so no addition global variables are needed.

Code: Select all

function love.draw()
  
  local fadeHeight = 1000 -- this is the height when the fade starts
  local atmosphereHeight = 1500 -- this is the height the fade stops, becoming black
  
  local fade = 1 - math.max(distance - fadeHeight, 0) / (atmosphereHeight - fadeHeight)
  
  -- Here you can set the sky colour by changing the number before fade
  local r = 0 * fade
  local g = 150/255 * fade
  local b = 1 * fade


  love.graphics.setBackgroundColor(r, g, b)
  cam:attach()
  Map:drawLayer(Map.layers["tiles"])
  --currAnim:draw(Player.img, Player.x, Player.y, nil, Player.factor * Player.zoom, Player.zoom, 4, 8)
  love.graphics.print("Distance = " .. math.floor(distance) .. " meters", Player.x - 180, Player.y - 140)
  Player:draw()
  cam:detach()
end

The colour values are multiplied by fade, which is calculated using height - when fade is 0, everything will be black, but when it is 1, the colours will be in their base state. You can change the fade and atmosphere height to change where the fade starts and ends to your liking, but atm they're just in a place that's easy to reach.

Thanks I honestly thought that things that changed needed love.update so I didn't think to know that I can change values in love.draw

[Bobble68]

Thanks I honestly thought that things that changed needed love.update so I didn't think to know that I can change values in love.draw

You can change values wherever you want, though it is better practice to keep changes in love.update for consistency. The main difference here though is that this doesn't actually change anything - since the local rgb values never leave love.draw, it's just a calculation done with an already existing value.