c++sfml

SFML Gradient Rectangle


There seems to be a problem with the gradient which I cannot figure out. It should fill the whole window but I am missing one triangle on the right side of the screen. Any ideas on how to fix it?

As said before there is a triangle missing on the right side of the rectangle. As mentioned I have tried and tried, googled (if there is something I missed it) and even tried using ChatGPT for it. The following is the code used now:

void setBackgroundGradient(sf::RenderWindow& window) {
    // Create a vertex array for the background
    sf::VertexArray background(sf::Quads, 4);

    // Define the gradient colors
    sf::Color colorLeft(117, 58, 136);
    sf::Color colorRight(174, 50, 111);

    // Set the gradient colors and positions for each vertex
    for (int i = 0; i < 4; ++i) {
        // Set the position for each vertex
        background[i].position = sf::Vector2f((i % 2) * window.getSize().x, (i / 2) * window.getSize().y);

        // Interpolate color between colorLeft and colorRight based on the x-position percentage
        float factor = background[i].position.x / window.getSize().x;

        background[i].color = sf::Color(
            static_cast<sf::Uint8>((1.0f - factor) * colorLeft.r + factor * colorRight.r),
            static_cast<sf::Uint8>((1.0f - factor) * colorLeft.g + factor * colorRight.g),
            static_cast<sf::Uint8>((1.0f - factor) * colorLeft.b + factor * colorRight.b)
        );
    }

    window.draw(background);
}


void createWindow() {
    sf::RenderWindow window{ sf::VideoMode(1200,800), "TGUI window with SFML"}; //{1200, 800}

    //A Gui Object that works with Sfml window. 
    tgui::GuiSFML gui{ window };

    runGUI(gui, window);

    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            gui.handleEvent(event);

            if (event.type == sf::Event::Closed)
                window.close();
        }

        //Set background color and display window
        //window.clear(sf::Color(50,50,50));

        window.clear();

        setBackgroundGradient(window);

        gui.draw();

        window.display();

    }
}

And this is the result that I get now: [Image][1] [1]: https://i.sstatic.net/jV8c4.png


Solution

  • Fixed it myself by manually setting each of the 4 indexes:

    // Define the gradient colors
    sf::Color colorLeft(117, 58, 136);
    sf::Color colorRight(174, 50, 111);
    
    // Set the gradient colors and positions for each vertex
    for (int i = 0; i < 4; ++i) {
        // Set the position for each vertex
        background[0].position = sf::Vector2f(0, 0);
        background[1].position = sf::Vector2f(window.getSize().x, 0);
        background[2].position = sf::Vector2f(window.getSize().x, window.getSize().y);
        background[3].position = sf::Vector2f(0, window.getSize().y);
    
        // Interpolate color between colorLeft and colorRight based on the x-position percentage
        float factor = background[i].position.x / window.getSize().x;
    
        background[i].color = sf::Color(
            static_cast<sf::Uint8>((1.0f - factor) * colorLeft.r + factor * colorRight.r),
            static_cast<sf::Uint8>((1.0f - factor) * colorLeft.g + factor * colorRight.g),
            static_cast<sf::Uint8>((1.0f - factor) * colorLeft.b + factor * colorRight.b)
        );
    }
    
    window.draw(background);