How do I fade in\out of a layer or layout?

So I have a Main Menu & a Game layout.

How do I make it so when I click a button the Main Menu fades out, and the Game fades in?

Are you wanting to fade through a colour or do a direct fade?

I don't get what you mean.

Can it just fade black then fade out to the new layout. Or directly fade from one layout to the other?

Can you write a tutorial how I can do either? Thank you

Have a layer on top of all layers in the main menu which is just coloured black and set its opacity to 0. When the player clicks play or whatever, increase the opacity over time until it reaches 100. Then switch to the game layout.

On the game layout, have the same top black layer, instead with its opacity as 100. Then at the start of the layout do what you did before but in reverse to get the game to fade in.

you can fade-in by using Lerp

lerp takes 3 values --> Lerp( from, To, Speed( less than 1 gets slower))

every tick - set Lerp( (layer or layout *whichever*).opacity, 0, 0.1)

lowers the opacity from where it currently is in a smooth fashion to "0"

you can do the same for different things

There is an example named "Fading in/out between layouts" that you can find in the how do I FAQ along many other implemented mechanics.

Is it what you're looking to achieve ? This example is pretty old to be fair, you can manage doing pretty much the same thing with the fade behavior nowadays.

I'll upload a more recent example in the mentioned topic.

If you don't want to write your own events for layout transition there is also this third-party-plugin:

Layout-transition-plugin

—

Would this work?

lerp(ObjectName.opacity.0, ObjectName.opacity.100, 0.5)

I don't exactly get how do i need to code these expressions, but i think this can help the topic starter also.

edit: oh wait. I need to write this to the opacity effect itself to the value form.

So it would be like lerp(ObjectName.0, ObjectName.100, 0.5) ?

sorbias if you put "ObjectName.opacity" - it gets the opacity value currently for the object , putting a number to it will make it not work should be a syntax error judging from your example

you can also use Lerp to do Camera delay to the position of the player too typically making a sprite to act as the camera with the scroll to behaviour and setting the position of the player (usually my camera target)

///Every tick - CameraSprite -> set position

X - Lerp(Camera.x, CameraTarget.x, 0.1)

Y - Lerp(Camera.Y, CameraTarget.Y,0.1)

try this example if you want to understand it, This is what helped me to understand it after seeing it work

—

I Can't believe it can be that easy to use lerp as you explain here. When last time i was asking about lerp, they recommended me to read this:

https://www.scirra.com/blog/ashley/17/u ... delta-time (I'm still not finished with that text. It's too deep.)

And they said that this would help me somehow: "lerp(a, b, c) = c * (b - a) + a"

Nobody explained me about what are a, b, and c or why i would need to use that math to do simple animation.

Thats why i "invented" my own method to do animations:

It's easy to set, but takes little more time, because you need to do some variables etc. for your object.

—

I tried that, but it seems that it does not work, I just don't have clue about what I did wrong:

Menu_small.Opacity will give you the value of the current opacity of the object Menu_small..

Adding a dot behind it does nothing..

I guess what you are trying to do is

every tick set menu_small opacity to: lerp(Menu_small.opacity,100,0.2)

so the first value is the current opacity, the second value is the number you want to get to and 0.2 is the amount it will shift between the two..

This works because every tick the current opacity is changed to a number closer to 100..

so tick 1 Menu_small.opacity = 0

lerp(Menu_small.opacity,100,0.2) value is 0+(100-0)*0.2= 20

so tick 2 Menu_small.opacity = 20

lerp(Menu_small.opacity,100,0.2) value is 20+(100-20)*0.2= 36

so tick 3 Menu_small.opacity = 36

lerp(Menu_small.opacity,100,0.2) value is 36+(100-36)*0.2= 48.8

so tick 4 Menu_small.opacity = 48.8

lerp(Menu_small.opacity,100,0.2) value is 48.8+(100-48,8)*0.2= 59.04

etcetera..

LittleStain, thank you. You made me understand.