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

Author Topic: "toon" style fade out ideas?  (Read 5258 times)

0 Members and 1 Guest are viewing this topic.

cassioraposa

  • Newbie
  • *
  • Posts: 4
    • View Profile
    • Email
"toon" style fade out ideas?
« on: February 12, 2013, 12:30:13 am »
Hey guys, how's going?
So here's the thing: we're creating this nice platformer and I'm trying to implement a fade out, like Mario games do, where a black screen closes around the player at the end of the level.
I thought of creating a huge black texture with a circular hole in its middle and zoom it out over the game screen but it seems to me that such a huge image (talking about much more than fullhd size) would mess up with a lot of videocards - also it just seems the wrong way of doing it :P.
We are working with C++, SFML and Box2D and this is one of the last things about our neat puzzle that we can't figure out how to do.
Any ideas anyone?
Thank you very much in advance!
"Argue for your limitations, and sure enough, they're yours." - Richard Bach

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 11032
    • View Profile
    • development blog
    • Email
Re: "toon" style fade out ideas?
« Reply #1 on: February 12, 2013, 01:30:58 am »
Hey guys, how's going?
Good, how about yourself? :D

All the nice effects you can think of are nowadays mostly done with shaders, unfortunately I've actually no idea in that area, so I can't help you.

Otherwise I guess you could still use a texture with a hole, but instead of making it fullscreen you could fill the already black spots with a RectangleShape or so.
Official FAQ: https://www.sfml-dev.org/faq.php
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

cassioraposa

  • Newbie
  • *
  • Posts: 4
    • View Profile
    • Email
Re: "toon" style fade out ideas?
« Reply #2 on: February 12, 2013, 03:41:48 am »
Thanks, eXpl0it3r , I guess I'll really have to go with shaders but was trying to avoid it :D.
I found out the transition I'm trying to use is called “iris wipe”. Living and learning.
The texture with the hole is just too much... bizarre and I can sense glitches on that way lol.
I found a nice code that I'll try to translate to cpp/sfml, it uses native gl calls but it's quite easy to read, I just need a bunch of triangles :). If it turns to something nice I'll post the final code here! But not today, gotta sleep.
Anyone with different ideas is still welcome of course :).
"Argue for your limitations, and sure enough, they're yours." - Richard Bach

FRex

  • Hero Member
  • *****
  • Posts: 1848
  • Back to C++ gamedev with SFML in May 2023
    • View Profile
    • Email
Re: "toon" style fade out ideas?
« Reply #3 on: February 12, 2013, 05:35:42 am »
#include <SFML/Graphics.hpp>
int main()
{
    sf::RenderWindow app(sf::VideoMode(512,512),"Indeed..");
    app.setFramerateLimit(60);
        sf::Shader shader;
        shader.loadFromFile("shader.glsl",sf::Shader::Fragment);
        sf::Texture tex;//this texture has to be same size as the screen
        tex.loadFromFile("tiles.png");//load some 512x512 image
        shader.setParameter("tex",tex);
        float dist=200.f;//this is multiplied by 100 so that float coordinates don't lose so much precision on cpu
        shader.setParameter("dist",dist);
        sf::Event eve;
        while(app.isOpen())
        {
                while(app.pollEvent(eve))if(eve.type==sf::Event::Closed)app.close();


                sf::Vector2f vec=sf::Vector2f(sf::Mouse::getPosition(app));
                vec.x/=app.getSize().x;
                vec.y/=app.getSize().y;
                shader.setParameter("centre",sf::Vector2f(vec));



                if(sf::Mouse::isButtonPressed(sf::Mouse::Left))
                {
                        shader.setParameter("dist",dist-=1.5f);//this WILL get onto negatives but catching/preventing that is up to you
                }
                app.clear(sf::Color::Magenta);
                app.draw(sf::Sprite(tex),&shader);
                app.display();
        }
    return 0;
}
uniform sampler2D tex;
uniform vec2 centre;
uniform float dist;
void main()
{
        gl_FragColor=(1.0-(100.0*distance(gl_TexCoord[0].xy,centre)/dist))*texture2D(tex,gl_TexCoord[0].xy);
//could add clamping to not go over 1.0 and under 0.0
        gl_FragColor.a=1.0;
}
 
I'm not an expert, this needs improvements.
Press left mouse button to make darkness creep towards the cursor, it takes few seconds for it to happen.
« Last Edit: February 12, 2013, 05:42:53 am by FRex »
Back to C++ gamedev with SFML in May 2023

mateandmetal

  • Full Member
  • ***
  • Posts: 171
  • The bird is the word
    • View Profile
    • my blog
Re: "toon" style fade out ideas?
« Reply #4 on: February 12, 2013, 04:05:54 pm »
I thought of creating a huge black texture with a circular hole in its middle and zoom it out over the game screen but it seems to me that such a huge image...

You don´t need the full image, just 1/4...
rotate and draw this to get the full image  8)
 ;D
- Mate (beverage) addict
- Heavy metal addict _lml
- SFML 2 addict
- My first (and free) game: BichingISH!

FRex

  • Hero Member
  • *****
  • Posts: 1848
  • Back to C++ gamedev with SFML in May 2023
    • View Profile
    • Email
Re: "toon" style fade out ideas?
« Reply #5 on: February 12, 2013, 04:30:12 pm »
Quote
You don´t need the full image, just 1/4...
rotate and draw this to get the full image  8)
 ;D
Sounds legit. Joking of course..
Back to C++ gamedev with SFML in May 2023

mateandmetal

  • Full Member
  • ***
  • Posts: 171
  • The bird is the word
    • View Profile
    • my blog
Re: "toon" style fade out ideas?
« Reply #6 on: February 14, 2013, 04:07:23 pm »
 ;D
- Mate (beverage) addict
- Heavy metal addict _lml
- SFML 2 addict
- My first (and free) game: BichingISH!

cassioraposa

  • Newbie
  • *
  • Posts: 4
    • View Profile
    • Email
Re: "toon" style fade out ideas?
« Reply #7 on: February 15, 2013, 02:02:24 am »
FRex, thank you, your code did the trick with some tweaks to fit my game :D.
Thank you all and sorry for the daley replying, I've spent the last two days away from home. You guys rock!
"Argue for your limitations, and sure enough, they're yours." - Richard Bach

cassioraposa

  • Newbie
  • *
  • Posts: 4
    • View Profile
    • Email
Re: "toon" style fade out ideas?
« Reply #8 on: February 15, 2013, 02:12:24 am »

You don´t need the full image, just 1/4...
rotate and draw this to get the full image  8)
 ;D
[/quote]

That's right, i feel stupid now lol. Anyway, problem solved, thanks again :)
"Argue for your limitations, and sure enough, they're yours." - Richard Bach