[SOLVED] Unexpected behavior when coloring sf::Vertex

[Glocke]

Hi, I was working with sf::Vertex and sf::VertexArray to achieve lineare gradients over tile graphics diagonals. But I was facing something ... imho "strange behavior".

Here's my code (demo code providing my "problem"):

(click to show/hide)

#include <SFML/Graphics.hpp>

int main() {
    sf::RenderWindow window(sf::VideoMode(640, 480), "Demo");
    sf::Texture tile;
    tile.loadFromFile("tile.png");
   
    sf::VertexArray array(sf::Quads, 16);
    // topleft tile
    array[0].position = sf::Vector2f(0.f, 0.f);
    array[0].texCoords = sf::Vector2f(0.f, 0.f);
    array[0].color = sf::Color::Black;
    array[1].position = sf::Vector2f(64.f, 0.f);
    array[1].texCoords = sf::Vector2f(64.f, 0.f);
    array[1].color = sf::Color::Black;
    array[2].position = sf::Vector2f(64.f, 64.f);
    array[2].texCoords = sf::Vector2f(64.f, 64.f);
    array[2].color = sf::Color::White;
    array[3].position = sf::Vector2f(0.f, 64.f);
    array[3].texCoords = sf::Vector2f(0.f, 64.f);
    array[3].color = sf::Color::Black;
   
    // topright tile
    array[4].position = sf::Vector2f(64.f, 0.f);
    array[4].texCoords = sf::Vector2f(0.f, 0.f);
    array[4].color = sf::Color::Black;
    array[5].position = sf::Vector2f(128.f, 0.f);
    array[5].texCoords = sf::Vector2f(64.f, 0.f);
    array[5].color = sf::Color::Black;
    array[6].position = sf::Vector2f(128.f, 64.f);
    array[6].texCoords = sf::Vector2f(64.f, 64.f);
    array[6].color = sf::Color::Black;
    array[7].position = sf::Vector2f(64.f, 64.f);
    array[7].texCoords = sf::Vector2f(0.f, 64.f);
    array[7].color = sf::Color::White;
   
    // bottomright tile
    array[8].position = sf::Vector2f(64.f, 64.f);
    array[8].texCoords = sf::Vector2f(0.f, 0.f);
    array[8].color = sf::Color::White;
    array[9].position = sf::Vector2f(128.f, 64.f);
    array[9].texCoords = sf::Vector2f(64.f, 0.f);
    array[9].color = sf::Color::Black;
    array[10].position = sf::Vector2f(128.f, 128.f);
    array[10].texCoords = sf::Vector2f(64.f, 64.f);
    array[10].color = sf::Color::Black;
    array[11].position = sf::Vector2f(64.f, 128.f);
    array[11].texCoords = sf::Vector2f(0.f, 64.f);
    array[11].color = sf::Color::Black;
   
    // bottomleft tile
    array[12].position = sf::Vector2f(0.f, 64.f);
    array[12].texCoords = sf::Vector2f(0.f, 0.f);
    array[12].color = sf::Color::Black;
    array[13].position = sf::Vector2f(64.f, 64.f);
    array[13].texCoords = sf::Vector2f(64.f, 0.f);
    array[13].color = sf::Color::White;
    array[14].position = sf::Vector2f(64.f, 128.f);
    array[14].texCoords = sf::Vector2f(64.f, 64.f);
    array[14].color = sf::Color::Black;
    array[15].position = sf::Vector2f(0.f, 128.f);
    array[15].texCoords = sf::Vector2f(0.f, 64.f);
    array[15].color = sf::Color::Black;

    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event)) {
            if (event.type == sf::Event::Closed) {
                window.close();
            }
        }
       
        window.clear(sf::Color::Black);
        window.draw(array, &tile);
        window.display();
    }
   
    return 0;
};
 

I attached the tile-graphic to this post and it's original taken from http://opengameart.org/content/fancy-dungeon-tileset.

Well, the result renders "correct" for topleft and bottomright situation. But the situations at topright and bottomleft doesn't make sense to me. I want to achieve the same lineare gradient "around" the tile's diagonal - but with another direction.

Any idea what's wrong with my approach?

Kind regards & thanks in advance!

[Hapax]

It's because the quad is splitting into triangles differently.

Try this part:

        array[5].position = sf::Vector2f(64.f, 0.f);
        array[5].texCoords = sf::Vector2f(0.f, 0.f);
        array[5].color = sf::Color::Black;
        array[6].position = sf::Vector2f(128.f, 0.f);
        array[6].texCoords = sf::Vector2f(64.f, 0.f);
        array[6].color = sf::Color::Black;
        array[7].position = sf::Vector2f(128.f, 64.f);
        array[7].texCoords = sf::Vector2f(64.f, 64.f);
        array[7].color = sf::Color::Black;
        array[4].position = sf::Vector2f(64.f, 64.f);
        array[4].texCoords = sf::Vector2f(0.f, 64.f);
        array[4].color = sf::Color::White;

Notice the vertex renumbering.

[Glocke]

So it's just a matter of the right order while adding to the array? Hmm, makes sense referring to the splitting into triangles.

/EDIT: I applied the alternative order to my actual project and it works fine. Thanks!

[Hapax]

You're welcome 

If this is the exact effect that you're looking for, wouldn't it be more simple to provide 4 triangles instead of 4 quads?

(click to show/hide)

Like this:

        sf::VertexArray array(sf::Triangles, 12);
        // topleft tile triangle
        array[0].position = sf::Vector2f(64.f, 0.f);
        array[0].texCoords = sf::Vector2f(64.f, 0.f);
        array[0].color = sf::Color::Black;
        array[1].position = sf::Vector2f(64.f, 64.f);
        array[1].texCoords = sf::Vector2f(64.f, 64.f);
        array[1].color = sf::Color::White;
        array[2].position = sf::Vector2f(0.f, 64.f);
        array[2].texCoords = sf::Vector2f(0.f, 64.f);
        array[2].color = sf::Color::Black;

        // topright tile triangle
        array[3].position = sf::Vector2f(64.f, 0.f);
        array[3].texCoords = sf::Vector2f(0.f, 0.f);
        array[3].color = sf::Color::Black;
        array[4].position = sf::Vector2f(128.f, 64.f);
        array[4].texCoords = sf::Vector2f(64.f, 64.f);
        array[4].color = sf::Color::Black;
        array[5].position = sf::Vector2f(64.f, 64.f);
        array[5].texCoords = sf::Vector2f(0.f, 64.f);
        array[5].color = sf::Color::White;

        // bottomright tile triangle
        array[6].position = sf::Vector2f(64.f, 64.f);
        array[6].texCoords = sf::Vector2f(0.f, 0.f);
        array[6].color = sf::Color::White;
        array[7].position = sf::Vector2f(128.f, 64.f);
        array[7].texCoords = sf::Vector2f(64.f, 0.f);
        array[7].color = sf::Color::Black;
        array[8].position = sf::Vector2f(64.f, 128.f);
        array[8].texCoords = sf::Vector2f(0.f, 64.f);
        array[8].color = sf::Color::Black;

        // bottomleft tile triangle
        array[9].position = sf::Vector2f(0.f, 64.f);
        array[9].texCoords = sf::Vector2f(0.f, 0.f);
        array[9].color = sf::Color::Black;
        array[10].position = sf::Vector2f(64.f, 64.f);
        array[10].texCoords = sf::Vector2f(64.f, 0.f);
        array[10].color = sf::Color::White;
        array[11].position = sf::Vector2f(64.f, 128.f);
        array[11].texCoords = sf::Vector2f(64.f, 64.f);
        array[11].color = sf::Color::Black;

[Glocke]

If this is the exact effect that you're looking for, wouldn't it be more simple to provide 4 triangles instead of 4 quads?

Well, I'd need to create two vertex arrays: one using quads (for completly rendered tiles) and one using triangles (for those edges). This would really enlarge my current rendering code - but possible fix an issue, which I have with a friend's machine's rendering result (his machine seems to triangulate the quads exactly in the way I want to avoid ^^)

EDIT: I changed my rendering code to triangulate everything on its own. Else I'd have to draw-calls (on triangles and on quads). Now it's one again (triangles ^^). And my friend's machine's rendering is now as expected... Triangulation ftw! 

[Hapax]

Triangulation ftw!

Explicit triangulation ftw!