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

Author Topic: [Q] A Fog of War/Flashlight Type Question  (Read 1889 times)

0 Members and 1 Guest are viewing this topic.

UchihaKite

  • Newbie
  • *
  • Posts: 33
    • View Profile
    • Email
[Q] A Fog of War/Flashlight Type Question
« on: June 29, 2017, 08:26:16 pm »
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

  • Hero Member
  • *****
  • Posts: 1843
    • View Profile
    • My GitHub Page
    • Email
Re: [Q] A Fog of War/Flashlight Type Question
« Reply #1 on: June 29, 2017, 10:46:09 pm »
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.
« Last Edit: June 29, 2017, 10:49:55 pm by FRex »
ZipSavings, script to count rar/7z/zip savings: https://goo.gl/vvBj5M
LuaConsole: https://goo.gl/X4kRUk
FoxRaycaster: https://goo.gl/27nVS8
Small Games - Heart, Routing and Snek: https://goo.gl/15ZGWE https://goo.gl/k5gwWD https://goo.gl/4nKPnT
Botes - a notes app in Pascal: https://goo.gl/bzTqsi

Hapax

  • Hero Member
  • *****
  • Posts: 3017
  • My number of posts is shown in hexadecimal.
    • View Profile
Re: [Q] A Fog of War/Flashlight Type Question
« Reply #2 on: July 01, 2017, 03:12:42 pm »
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
 :)
Selba Ward - SFML drawables
Kairos - Timing Library
Rectangular Boundary Collision - Rectangular SAT Collision

@Hapaxiation - Hapaxia on Twitter

UchihaKite

  • Newbie
  • *
  • Posts: 33
    • View Profile
    • Email
Re: [Q] A Fog of War/Flashlight Type Question
« Reply #3 on: July 06, 2017, 12:37:24 am »
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. :D

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

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

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

  • Hero Member
  • *****
  • Posts: 1843
    • View Profile
    • My GitHub Page
    • Email
Re: [Q] A Fog of War/Flashlight Type Question
« Reply #4 on: July 07, 2017, 12:02:29 am »
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
ZipSavings, script to count rar/7z/zip savings: https://goo.gl/vvBj5M
LuaConsole: https://goo.gl/X4kRUk
FoxRaycaster: https://goo.gl/27nVS8
Small Games - Heart, Routing and Snek: https://goo.gl/15ZGWE https://goo.gl/k5gwWD https://goo.gl/4nKPnT
Botes - a notes app in Pascal: https://goo.gl/bzTqsi

UchihaKite

  • Newbie
  • *
  • Posts: 33
    • View Profile
    • Email
Re: [Q] A Fog of War/Flashlight Type Question
« Reply #5 on: July 08, 2017, 11:59:04 pm »
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 :P
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

  • Hero Member
  • *****
  • Posts: 1843
    • View Profile
    • My GitHub Page
    • Email
Re: [Q] A Fog of War/Flashlight Type Question
« Reply #6 on: July 09, 2017, 02:32:18 am »
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.
ZipSavings, script to count rar/7z/zip savings: https://goo.gl/vvBj5M
LuaConsole: https://goo.gl/X4kRUk
FoxRaycaster: https://goo.gl/27nVS8
Small Games - Heart, Routing and Snek: https://goo.gl/15ZGWE https://goo.gl/k5gwWD https://goo.gl/4nKPnT
Botes - a notes app in Pascal: https://goo.gl/bzTqsi