[Q] A Fog of War/Flashlight Type Question

[UchihaKite]

Good afternoon Fellow Programmers,

So, I have this idea of a game that involves having the player escape from a maze that is completely blacked-out other than a small area around the player, and wherever this flashlight is pointing. This issue I am having is I literally have no idea how to do something like this. I was hoping someone could give me some ideas, so I can look into it, study up on some concepts and figure out how to do it. Thank you to anyone that reads this and decides to help me out!

[FRex]

Basically:
1. Draw a fully lit scene.
2. Draw your (potentially colorful) lights to a render texture using additive blending.
3. Draw that render texture on top of the scene using multiplicative blending.

If you want your lights to cast shadows or be soft it might be a bit more difficult.

You might look into LTBL (Let There Be Light) library that is floating around here (I'm not 100% sure of its current status).
I experimented with lighting years ago (the code sucks by now though and using clipper lib might be an overkill): https://github.com/FRex/HardLight
This is also a good reading resource (this approach should work well for a maze with well defined walls I'd think, it doesn't work for intersecting lines though so be careful around that): http://ncase.me/sight-and-light/

Fog of War is a slightly different and (IMO) easier effect and usually just refers to how RTS games cover unseen land, just draw your 'fog' over any place you want, there aren't shadows, colors, etc. to be considered.

[Hapax]

For simple soft lights, you could try this shader (when applying step 2 of FRex's solution):
https://github.com/SFML/SFML/wiki/Source%3A-Radial-Gradient-Shader
 

[UchihaKite]

2. Draw your (potentially colorful) lights to a render texture using additive blending.
3. Draw that render texture on top of the scene using multiplicative blending.

I'm still new to Game Development, so I am not entirely sure what Additive Blending and Multiplicative Blending is, but I am sure that is something I can figure out with a Google Search.

If you want your lights to cast shadows or be soft it might be a bit more difficult.

You might look into LTBL (Let There Be Light) library that is floating around here (I'm not 100% sure of its current status).
I experimented with lighting years ago (the code sucks by now though and using clipper lib might be an overkill): https://github.com/FRex/HardLight
This is also a good reading resource (this approach should work well for a maze with well defined walls I'd think, it doesn't work for intersecting lines though so be careful around that): http://ncase.me/sight-and-light/

Yeah, I assumed that this would be hard. Putting aside the fact I have never done this before, the concept of having the Player be the Light Source with a small "cone" of light in front to represent the light of the flashlight, is something that excites me to try to program, but freaks me out because I'm not entirely sure how to do that. Not to mention that when the Light hits, an object, not only is that object now visible but produces shadow....almost makes me feel like I am a little in over my head, but I gotta try and see if I can do it

For simple soft lights, you could try this shader (when applying step 2 of FRex's solution):
https://github.com/SFML/SFML/wiki/Source%3A-Radial-Gradient-Shader
 

This look super interesting, I am going to play around with that code asap so I have a better idea on how it works

Thank you both for taking the time to reply to my thread! I'm still not entirely sure of what to do, but at least now I have some stuff to look into and try to figure out a gameplan. If I run into any more issues, I will be sure to come to you guys ^_^

[FRex]

It's really not that hard. Cool effects are but basics aren't. Here's a quick demo.

#include <SFML/Graphics.hpp>
#include <vector>

int main()
{
    sf::RenderWindow app(sf::VideoMode(800u, 600u), "blending lights");
    app.setFramerateLimit(60u);

    sf::RenderTexture tex;
    tex.create(app.getSize().x, app.getSize().y);

    sf::Texture pic;
    pic.loadFromFile("pano.jpg");

    std::vector<sf::Vector2f> lights;

    const sf::Color colors[3] = { sf::Color::Red, sf::Color::Green, sf::Color::Blue };

    while(app.isOpen())
    {
        sf::Event eve;
        while(app.pollEvent(eve))
        {
            if(eve.type == sf::Event::Closed)
                app.close();

            if(eve.type == sf::Event::MouseButtonPressed)
                lights.push_back(app.mapPixelToCoords(sf::Vector2i(eve.mouseButton.x, eve.mouseButton.y)));
        }


        app.clear();

        //start = no light
        tex.clear(sf::Color::Black);

        //add the lights together
        sf::CircleShape sha;
        sha.setRadius(150.f);
        sha.setOrigin(sha.getRadius(), sha.getRadius());
        sha.setPosition(app.mapPixelToCoords(sf::Mouse::getPosition(app)));
        tex.draw(sha, sf::BlendAdd);
        for(int i = 0; i < lights.size(); ++i)
        {

            sha.setPosition(lights[i]);
            sha.setFillColor(colors[i % 3]);
            tex.draw(sha, sf::BlendAdd);
        }
        tex.display();

        //lit scene
        app.draw(sf::Sprite(pic));

        //multiply by light
        app.draw(sf::Sprite(tex.getTexture()), sf::BlendMultiply);
        app.display();
    }
}

Picture (can be anything really): http://imgur.com/a/NhaBM

[UchihaKite]

FRex. My dude. Thank you for taking the time to whip something up for me like that. I'm going to further analyze this code to make sure I understand it and then play around with it to see if I can expand it
Curious though, did you come up with this on your own, or is there something I can go to study up on stuff like this?

[FRex]

I wrote the example from memory in one go but of course I had to learn it somewhere, I don't remember where, I probably asked around on this forum too though. The example should explain what I wrote about lights without shadows. For shadows you can read the ncase link from before. For extra effects, flickering light, etc. you can look into fragment shaders. I never went much further than that but I'd think there is stuff to read if you google around for it but most might be 3D focused, modern AAA rendering, etc.