SFML community forums

Help => Graphics => Topic started by: etixpp on October 31, 2013, 08:53:23 am

Title: Round View
Post by: etixpp on October 31, 2013, 08:53:23 am
Hello,
i want to make a Minimap in form of a round circle.
I already managed it without problems to make a foursquare minimap with a second view, but is there a way to make it round?
Title: Re: Round View
Post by: fallahn on October 31, 2013, 09:50:28 pm
Assuming you're rendering the minimap to a render texture you can use a shader:

Uniform sampler2d tex;

Const float radius = 0.5;
Const float centre = 0.5;

Void main
{
Vec2 UV = gl_texcoord[0].xy;
Vec4 colour = texture2d(TeX, UV);
Const float distance = distance(centre, UV);
If(distance > radius) colour.a = 0;
gl_fragcolor = colour;
}

 
Title: Re: Round View
Post by: AlejandroCoria on October 31, 2013, 10:39:13 pm
if you're rendering the minimap to a render texture you can also use a vertexarray, to create a circle with vertices and texture coordinates.
Title: Re: Round View
Post by: etixpp on October 31, 2013, 11:05:01 pm
Sounds good fallahn, but my experience with shader is nearly zero.

i tried to implement your snippet with  (tried vertex and fragment)

sf::Shader shader;

// load only the vertex shader
if (!shader.loadFromFile("shader.vert", sf::Shader::Vertex))
{
    std::cout << "errorshadder";
}
shader.setParameter("texture", sf::Shader::CurrentTexture);
 


and


                        /* MINIMAP */
                        sf::View testview(sf::FloatRect(0, 0, 120, 120));
                        testview.setViewport((sf::FloatRect(0.75, 0.1, 0.2, 0.2)));
                        testview.zoom(10);
                        testview.setCenter(MainPlayer.GetPlayerSprite().getPosition().x+16,MainPlayer.GetPlayerSprite().getPosition().y+16);
                        window.setView(testview);
                        window.draw(MainChunk->GetBgSprite(),&shader);
       
                        if(MainPlayer.GetPlayerDirection() == 1)
                        {
                        window.draw(MainChunk->GetMainSprite(),&shader);
                        window.draw(MainPlayer.GetPlayerSprite(),&shader);

                        }
                        else
                        {
                        window.draw(MainPlayer.GetPlayerSprite(),&shader);
                        window.draw(MainChunk->GetMainSprite(),&shader);
                        }
                        window.draw(circle);
                        window.draw(MainChunk->GetCollisionSprite(),&shader);


but i get a mass of compiling errors, i tried a few things and tried to set it up like in the tutorial but failed kinda hard x.X
(http://s1.directupload.net/images/131031/4k34h2xc.png)
Title: Re: Round View
Post by: Nexus on October 31, 2013, 11:16:05 pm
No shader is necessary.

By the way: This will be much simpler once render masks are implemented in SFML, but this may take a while. To learn about shaders, read a GLSL tutorial. But computing the distance for every single pixel will be expensive, even with obvious optimizations such as comparing squares.
Title: Re: Round View
Post by: fallahn on October 31, 2013, 11:19:31 pm
yeah sorry, my tablet messed up the casings of the variables (the predictive text was determined to fight me :S ) Anyway what Nexus said about CircleShape actually sounds like a much better idea
Title: Re: Round View
Post by: etixpp on October 31, 2013, 11:30:53 pm
                        // MINIMAP
                        RenderTexture.clear(sf::Color(0,0,0,0));
                        sf::CircleShape MinimapShape(50.F);
                        sf::View testview(sf::FloatRect(0, 0, 120, 120));
                        testview.setViewport((sf::FloatRect(0.75, 0.1, 0.2, 0.2)));
                        testview.zoom(10);
                        testview.setCenter(MainPlayer.GetPlayerSprite().getPosition().x+16,MainPlayer.GetPlayerSprite().getPosition().y+16);
                        RenderTexture.setView(testview);
                        RenderTexture.draw(MainChunk->GetBgSprite());
                        if(MainPlayer.GetPlayerDirection() == 1)
                        {
                        RenderTexture.draw(MainChunk->GetMainSprite());
                        RenderTexture.draw(MainPlayer.GetPlayerSprite());

                        }
                        else
                        {
                        RenderTexture.draw(MainPlayer.GetPlayerSprite());
                        RenderTexture.draw(MainChunk->GetMainSprite());
                        }
                        //RenderTexture.draw(circle);
                        RenderTexture.draw(MainChunk->GetCollisionSprite());
               
                        MinimapShape.setTexture(&RenderTexture.getTexture());
                        window.draw(MinimapShape);
                        window.display();

I did it like this but actually nothing happens, probably a mistake by me?
Title: Re: Round View
Post by: Nexus on October 31, 2013, 11:40:57 pm
How do you usually solve problems? Don't write such a lot of code at once and wonder why it doesn't work. Get first familiar with sf::RenderTexture (which includes reading the doc and finding out about display()), then test the render texture on its own to make sure you use it correctly, and then embed it into the existing application.

Also, I don't see why you declare MinimapShape miles before it is used. Keep variables local, it helps you (and others) understand your code better.
Title: Re: Round View
Post by: etixpp on November 01, 2013, 12:12:41 am
Fixed it now, thanks for great help :)