Fade in to another layout

0 favourites
  • 15 posts
From the Asset Store
Transition Layout C3
$22.50 USD
10% off
Plugin Transition Layout C3. Layout opening and closing animation for C3. Quickly set up transitions between lay
  • After clicking start on the menu, I would like the next layout to fade in, instead of just suddenly appearing, how could I accomplish this?

  • Full black layer above all others. Starting from start of layout, gradually reduce layer's opacity until it becomes fully transparent, at which you can disable it altogether.

    Bonus points: add a "loading" sprite or something.

  • Example capx

    As you can see, the button object appears on top, whatever layer it is.

    Use sprites as buttons, they'll get covered.

    EDIT: See this post for a more recent example (2015 with r206), simpler, using the fade behavior

  • Thanks! Great example <img src="smileys/smiley4.gif" border="0" align="middle" />

  • Full black layer above all others. Starting from start of layout, gradually reduce layer's opacity until it becomes fully transparent, at which you can disable it altogether.

    How do you "gradually reduce" the value of the opacity at runtime?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Fade Behavior

  • In order to fade away the layer, you'd do something like:

    System > On layout start > Black Screen > Set Opacity to 100

                               System > Wait .5sec

                               Black Screen > Opacity 80

                               System > Wait .5sec

                               Black Screen > Opacity 60

    etc.

    So basically, every half second, you'd be lowering the opacity of the object until it reaches zero. At that rate, the screen will transition from black to invisible in about 3 seconds.

    If the transition is too blocky or takes too much time, try something like lowering the opacity by 5 every .1 seconds. This would change you from black to clear in about two seconds, with a fairly smooth transition.

    Or you could play around with fade. I haven't found a fade button yet, so...

  • ok , i have tried this idea long time ago when i tried to make my 3rd game but i found some problem that its hard to do it perfectly so i made a way i think that is the best >>>

    the way is : you will have 2 object and lets call them : black1, black2

    ok lets say these are the events :

    when player collision with win ---> then play the winning animation then fade in ( black1 ) with waiting = 2sec , then the 2nd event will be :

    at the start of layout play fade out of (black2) without any waiting... so in this case you will have object for fading in and another for fading out and i made this in my latest game ( gathering the sheep ) you can check it out if you like it

  • Example capx

    Go check the "FadeIn" and "FadeOut" group in the "Common" event sheet.

    That's how you gradually modify the opacity over time.

  • > dl.dropbox.com/u/36472942/construct/forumhelp/LayoutFade.capx

    >

    Go check the "FadeIn" and "FadeOut" group in the "Common" event sheet.

    That's how you gradually modify the opacity over time.

    In your example, I can't find the variables "fading" and "faded" Is there somewhere they are placed?

  • The gist:

    Every tick

    If object.opacity>0 | set opacity to object.opacity-100*dt

    It will fade out in one second. Switch to > and + to fade in. Change the values to chande the speed, but multiply by dt to make it framerate independent and smooth.

  • Update. Now in 2015 with r206 it is possible to achieve the same effect thanks to the Fade behavior.

    Here is a commented simple example.

  • Update. Now in 2015 with r206 it is possible to achieve the same effect thanks to the Fade behavior.

    Here is a dl.dropboxusercontent.com/u/36472942/construct/forumhelp/FadeIn_FadeOut_layout_2015.capx commented simple example.

    Hey there, i hope you'll see this message and can answer me . I've tried out your example, but it doesn't start on the first page. How can i modify your example so it starts black, fades out slowly to the first page and when a button is clicked it should fade back in, then fade back out again showing the second page?

    Greetz, horoblast.

  • horoblast:

    Subscribe to Construct videos now
  • horoblast: youtube.com/watch How to make cut scenes and fade transitions using Finish State Machine

    Oh nice, thank you.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)