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

Author Topic: Create 2D torching lighting effect overlay  (Read 8597 times)

0 Members and 1 Guest are viewing this topic.

Canvas

  • Full Member
  • ***
  • Posts: 107
    • View Profile
Create 2D torching lighting effect overlay
« on: May 26, 2014, 09:52:56 pm »
Hello there people,

I'm creating a dungeon crawler using SFML (of course), and basically I want to try and create a simple torch effect that is over the screen which will change in size, and brightness (alpha). At the moment I have a simple image which is just very dark yellow on the outsides and slowly goes transparent. At the moment my code looks a like this

overlayFaderSizeChange++;

                if (overlayFaderSizeChange == 10)
                {
                        sf::Color overlayColor = overlayFader.getColor();
                        overlayColor.a = rand() % 10 + 245;
                        overlayFader.setColor(overlayColor);

                        float randomValue = rand() % 100;
                        randomValue = randomValue / 5000;
                        overlayFader.setScale(1 + randomValue, 1 + randomValue);

                        overlayFaderSizeChange = 0;
                }

This as an effect, but it is so shuttle you don't really see the effect. Now I know this is kinda down to personal preference, but does anyone have a better idea on how to achieve this in my 2D world? Advice is also very good :)

Ixrec

  • Hero Member
  • *****
  • Posts: 1241
    • View Profile
    • Email
Re: Create 2D torching lighting effect overlay
« Reply #1 on: May 27, 2014, 12:54:17 am »
For lighting effects like this, you pretty much always want to do something involving a shader.  http://en.sfml-dev.org/forums/index.php?topic=15272.0 has some more ideas.

From the code you posted it sounds like you're generating this image at runtime in the CPU.  That is definitely a bad idea, because it's slow.  If an actual image is involved at all, it should be a file you create in advance, or a texture created by drawing to a RenderTexture (possibly using shaders).

Canvas

  • Full Member
  • ***
  • Posts: 107
    • View Profile
Re: Create 2D torching lighting effect overlay
« Reply #2 on: May 27, 2014, 08:07:51 pm »
No at the moment I have a already defined image that is just overlays over all of the other sprites, I do change the width and height of that image to give a little flicker effect for light, but it doesn't really give that much of an effect. The links you have provided are ok but they don't really help with the shader i'm after. I don't want to try and place a light somewhere in my 2D world, I just want to give the screen a shader to make the screen as a whole look a little bit like a torch in a dungeon, so the middle graphics have like high contrast while the outer edges have lower contrast and are also darker

Ixrec

  • Hero Member
  • *****
  • Posts: 1241
    • View Profile
    • Email
Re: Create 2D torching lighting effect overlay
« Reply #3 on: May 27, 2014, 08:59:34 pm »
In that case you may be able to get away with putting the overlay image in a RenderTexture and drawing it on top of everything else with a particular blend mode.  Check the documentation for what blend modes are currently available (they've added more since 2.1).

That link wasn't meant to help with actually writing the shader, just to provide some more discussion on what was possible.  Shaders are complicated enough that you really have to sit down and study them properly for a while before you can do anything useful with them.  If you want to learn how to write them just look around for general OpenGL tutorials; modern OpenGL basically requires shaders so they'll all have to cover GLSL in some depth.

Canvas

  • Full Member
  • ***
  • Posts: 107
    • View Profile
Re: Create 2D torching lighting effect overlay
« Reply #4 on: May 27, 2014, 09:17:26 pm »
Ixrec I completely forgot about the sf::Blend, is there any code snippets on how to implement it?

Ixrec

  • Hero Member
  • *****
  • Posts: 1241
    • View Profile
    • Email
Re: Create 2D torching lighting effect overlay
« Reply #5 on: May 27, 2014, 09:23:38 pm »
Blend modes aren't a thing you implement, they're an argument you pass to a draw() call or a RenderStates constructor.  Thus the documentation should be plenty.  http://www.sfml-dev.org/documentation/2.1/classsf_1_1RenderStates.php#details is probably the best starting point.

Canvas

  • Full Member
  • ***
  • Posts: 107
    • View Profile
Re: Create 2D torching lighting effect overlay
« Reply #6 on: May 27, 2014, 09:25:31 pm »
Well I just used this code

Window.draw(fader, sf::BlendMode::BlendMultiply);

and my renderWindow is now always black , the fader is the image back in my first post

Ixrec

  • Hero Member
  • *****
  • Posts: 1241
    • View Profile
    • Email
Re: Create 2D torching lighting effect overlay
« Reply #7 on: May 27, 2014, 09:30:35 pm »
Then that's probably not the blend mode you want =P  You might want to go read about what these modes actually do.

And it's possible the default alpha blending is fine in your case.  I don't know your requirements in enough detail to say.

Canvas

  • Full Member
  • ***
  • Posts: 107
    • View Profile
Re: Create 2D torching lighting effect overlay
« Reply #8 on: May 27, 2014, 09:34:31 pm »
At the moment I am now using this

       
sf::RectangleShape rect;
rect.setSize(sf::Vector2f(1024, 768));
rect.setFillColor(sf::Color(255, 200, 140));
Window.draw(rect, sf::BlendMultiply);
 

This seems to do the trick, I will just keep changing the green and blue level to give it a odd torch flickering effect