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

Get help using Construct 2

Post » Fri May 29, 2015 9:57 pm

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?
B
4
Posts: 15
Reputation: 226

Post » Fri May 29, 2015 10:06 pm

Are you wanting to fade through a colour or do a direct fade?
Nothing goes unanswered!
B
24
S
5
G
1
Posts: 434
Reputation: 3,446

Post » Fri May 29, 2015 10:08 pm

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
B
4
Posts: 15
Reputation: 226

Post » Fri May 29, 2015 10:20 pm

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.
Nothing goes unanswered!
B
24
S
5
G
1
Posts: 434
Reputation: 3,446

Post » Tue Jun 02, 2015 8:03 am

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
B
29
S
6
G
2
Posts: 232
Reputation: 2,893

Post » Tue Jun 02, 2015 10:29 am

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.
New to Construct ? Where to start

Image Image

Image Image

Please attach a capx to any help request or bug report !
Moderator
B
284
S
109
G
91
Posts: 7,319
Reputation: 87,487

Post » Tue Jun 02, 2015 10:35 am

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

Layout-transition-plugin
I told my dentist I had trouble with my teeth and asked her to fix it without looking in my mouth..
B
54
S
16
G
8
Posts: 6,160
Reputation: 19,775

Post » Tue Jun 02, 2015 10:39 am

@mrlight234

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) ?
B
11
S
1
Posts: 63
Reputation: 658

Post » Tue Jun 02, 2015 4:27 pm

@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
B
29
S
6
G
2
Posts: 232
Reputation: 2,893

Post » Tue Jun 02, 2015 5:27 pm

@mrlight234

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:
Image

It's easy to set, but takes little more time, because you need to do some variables etc. for your object.
B
11
S
1
Posts: 63
Reputation: 658

Next

Return to How do I....?

Who is online

Users browsing this forum: 99Instances2Go, Syazanie Amirin and 9 guests