Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: [Solved] Fade effect  (Read 8326 times)

0 Members and 1 Guest are viewing this topic.

Debonair

  • Newbie
  • *
  • Posts: 16
    • View Profile
[Solved] Fade effect
« on: July 30, 2015, 12:43:37 pm »
Been trying to create a fading effect, made a separate class for it, everything works fine, except not really. The basic idea was to draw a RectangleShape across the whole screen with a black fillcolor, and an alpha of 0, then the class gradually increases it over a period of time. When I run the thing, that period of time is noticeable, so the class does what it is supposed to do, except I don't see the rectangleshape at all, even though it is being drawn, it is transparent during the whole thing. Tried to do it just within the loop as well, without the class, the issue is the same.

Without class version:
        Clock clock;
        RectangleShape fade;
        fade.setPosition(Vector2f(0,0));
        fade.setFillColor(Color(0,0,0,0));
        fade.setSize(Vector2f(800,600));
        int i=0;
    while (window.isOpen())
    {
        if(clock.getElapsedTime()>seconds(0.04)){
            i++;
            fade.setFillColor(Color(0,0,0,i));
            clock.restart();
        }
     ///other stuff
        window.draw(fade);
     }
 

Am I just not supposed to be doing this with a RectangleShape?
« Last Edit: July 30, 2015, 01:13:07 pm by Debonair »

Hapax

  • Hero Member
  • *****
  • Posts: 3360
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Fade effect
« Reply #1 on: July 30, 2015, 12:51:32 pm »
What is "other stuff"? If it's window.clear(), that's good. However, nothing suggests that you're using window.display() after that draw.
You should also be aware that this rectangle is fading from black transparent to black opaque so if the window is already black, you still won't see the rectangle.

If you're still having problems, a complete and minimal example should be provided.

EDIT: I just added your code to a standard SFML skeleton and it does what I expected it to: fades from green (I cleared the window to green) to black (the colour of the rectangle). It's slow, and takes around 10 seconds (as expected).
You might want to also check i has reached 255 as continuing after that makes no sense (and can cause unseen errors).
« Last Edit: July 30, 2015, 12:59:05 pm by Hapax »
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

Debonair

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Fade effect
« Reply #2 on: July 30, 2015, 12:58:23 pm »
What is "other stuff"? If it's window.clear(), that's good. However, nothing suggests that you're using window.display() after that draw.

My bad. Yeah, clear, display is there, along with other stuff being drawn, so it should be noticeable.

Hapax

  • Hero Member
  • *****
  • Posts: 3360
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Fade effect
« Reply #3 on: July 30, 2015, 01:01:21 pm »
Yeah, clear, display is there, along with other stuff being drawn, so it should be noticeable.
Again I ask, are you clearing the window as black? (window.clear() defaults to black)
If you're also drawing other objects, make sure the rectangle is not behind them all (draw before them).

Also, see my edit in my previous post.
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

Debonair

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: Fade effect
« Reply #4 on: July 30, 2015, 01:03:29 pm »
Yes, the fade is on the top of everything else (drawn last).
EDIT: Tried the classless version again, it does work actually, didn't notice because I didn't wait enough I guess, so it did work. Something with my class did not though, I'll figure that out. Thanks for the help.
« Last Edit: July 30, 2015, 01:11:15 pm by Debonair »

Synyster_Coder

  • Newbie
  • *
  • Posts: 20
    • View Profile
    • Email
Re: [Solved] Fade effect
« Reply #5 on: July 31, 2015, 01:55:52 pm »
Hey I know this is solved but I thought I might share a little more knowledge. If you use linear interpolation you should get a more manageable effect:

        int startAlpha = 0;
        int endAlpha = 255;
        int targetTime = 1000;
        sf::Clock timer;

        int currentTime = timer.getElapsedTime().asMilliseconds();
        int currentAlpha = endAlpha;
        if (currentTime >= targetTime)
        {
                //you are done
        }
        else
        {
                currentAlpha = startAlpha + (endAlpha - startAlpha)*currentTime / targetTime;
        }
        fade.setFillColor(Color(0, 0, 0, currentAlpha));
 

Hapax

  • Hero Member
  • *****
  • Posts: 3360
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: [Solved] Fade effect
« Reply #6 on: July 31, 2015, 02:35:32 pm »
There's no need to explicitly use certain formats of time. You can use sf::Time more intuitively like so:
// this is outside the loop
int startAlpha = 0;
int endAlpha = 255;
sf::Time targetTime = sf::Seconds(1);
sf::Clock timer;

{
    // this is inside the loop
    sf::Time currentTime = timer.getElapsedTime();
    int currentAlpha = endAlpha;
    if (currentTime >= targetTime)
    {
        // oops: currentAlpha = endAlpha; // make certain that the alpha is at its final destination
        //you are done
    }
    else
    {
        currentAlpha = startAlpha + (endAlpha - startAlpha) * currentTime / targetTime);
    }
    // apply alpha to whatever colour is previously set
    sf::Color fadeColor = fade.getFillColor();
    fadeColor.a = currentAlpha;
    fade.setFillColor(fadeColor);
}
Be aware that alpha could be less than the end alpha when the time passes the target time.

EDIT: I realised that my point about alpha passing the final alpha was incorrect.
« Last Edit: August 18, 2015, 04:00:47 pm by Hapax »
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

Nexus

  • SFML Team
  • Hero Member
  • *****
  • Posts: 6286
  • Thor Developer
    • View Profile
    • Bromeon
Re: [Solved] Fade effect
« Reply #7 on: August 02, 2015, 10:03:44 am »
Or you just use thor::FadeAnimation ;)
Zloxx II: action platformer
Thor Library: particle systems, animations, dot products, ...
SFML Game Development:

Debonair

  • Newbie
  • *
  • Posts: 16
    • View Profile
Re: [Solved] Fade effect
« Reply #8 on: August 02, 2015, 07:41:54 pm »
Thanks for the input guys.
Havent't tried Thor out yet, will check it out sometime.

Ashenwraith

  • Sr. Member
  • ****
  • Posts: 270
    • View Profile
Re: [Solved] Fade effect
« Reply #9 on: August 18, 2015, 04:20:33 am »
Hi, I solved a similar issue and wrote a simple code example 5 years ago, maybe it might help:

http://en.sfml-dev.org/forums/index.php?topic=2693.msg17640#msg17640

 

anything