shape texture and fill Colour

[starkhorn]

Hi Folks,

So I setup a shape and put in a fill color. I then set a texture to the shape which has a transparent background. What I was expecting was that the fill color would remain as the background color of that shape and the texture would sit on top of the back ground color. However that doesn't seem to be correct?

However instead, the background is black as I am using the default window.clear().

Basically how can I set the background colour of a shape so it remains whilst having a texture (with a transparent background) applied. Also when I remove the setTexture statement, the fillColour is visible.

Here is a fully working example so should be possible to copy/paste.

class header file

#include <math.h>

using namespace std;


class hexgrid : public sf::Drawable
{
        public:
                hexgrid(sf::RenderWindow& window);
                ~hexgrid();

                void draw(sf::RenderTarget& target, sf::RenderStates states) const;

        private:
                std::vector<sf::CircleShape> hexaGrid;
                sf::Texture hexTexture;
};
 

class cpp file

#include "hexgrid.h"

hexgrid::hexgrid(sf::RenderWindow& window)
{
        sf::CircleShape hexagon;
        hexagon.setPointCount(6);
        hexagon.setRadius(40);
        hexagon.setFillColor(sf::Color(225, 247, 164));
        hexagon.setOutlineThickness(-1.5);
        hexagon.setOutlineColor(sf::Color::Black);
       
        if (!hexTexture.loadFromFile("E:\\downloads\\grassland.png"))
        {
                std::cout << "Failed to load hex texture image!" << std::endl;
        }

        hexagon.setTexture(&hexTexture);

        float xpos = 0, ypos = 0;
        hexagon.setPosition(xpos, ypos);
        hexaGrid.push_back(hexagon);
}

hexgrid::~hexgrid()
{

}

void hexgrid::draw(sf::RenderTarget& target, sf::RenderStates states) const
{
        std::vector<sf::CircleShape>::const_iterator hexit;

        for (hexit = hexaGrid.begin(); hexit != hexaGrid.end(); ++hexit)
        {
                target.draw(*hexit, states);
        }
}
 

and my main

#include <iostream>
#include <SFML/Graphics.hpp>
#include "hexgrid.h"

int main()
{
        sf::ContextSettings settings;
        settings.antialiasingLevel = 8;

        sf::RenderWindow window(sf::VideoMode(800, 600, 32), "Hexgrid Example", sf::Style::Default, settings);

        hexgrid grid(window);
               
        sf::Event e;
        bool running = true;
        while (running)
        {
                while (window.pollEvent(e))
                {
                        if (e.type == sf::Event::Closed)
                        {
                                window.close();
                                return 0;
                        }
                }
                window.clear();
                window.draw(grid);
                window.display();
               
        }
        return 0;
}
 

[Hapax]

SFML Shapes (also sprites and vertex arrays) all have their textures 'multiplied' by their colour. The texture replaces the fill (you could consider setTexture to be setFillTexture) and the colour is incorporated into the texture's colour. e.g. If you apply a red colour to a rainbow texture, only the colours with red in the them would be visible.

To display a filled shape and a textured shape, you will need two shapes. You can: have two shapes - one set up for the fill, other set up for texture; one shape - set it up for the fill, draw it, set it up for the texture, draw it; or use a vertex array (with two quads, assuming your shape is rectangular) - one quad for the background fill, the other quad for the texture.

I think it would also be possible with shaders, if you want to venture down that route.

[starkhorn]

ok thanks. I think I will just add the background colour I want via a layer in GIMP.

[Hapax]

You're welcome.

Although just modifying the image directly is the simplest method, it also means that you can't change the background without modifying the image. In addition, if you wanted to move the actual object, the background would always follow it. Of course, if these limitations are fine for your design, it's the perfect route.