Using the Vertex Array

[Riton_Lafouine]

Hello,

I'm trying to use Vertex Array to rebuild a drawing i made with simples quads :

i'm happy with this graphics but as it is in a class and the class can be called several times (up to 2048 times), the rendering time is so long because it creates for every time the class is called 3 rectangles. On those rectangles, some dynamic text showing values wich will refreshed regularly.

Here is the current code for the 3 rectangles :

// Underground Rectangle
    sf::RectangleShape unders(sf::Vector2f(50.f, 70.f));
    unders.setFillColor(sf::Color(0 , 0, 0));
    unders.setOutlineThickness(1.f);

    if(_channel_select == true)
    unders.setOutlineColor(sf::Color(255, 255, 255));
    else
    unders.setOutlineColor(sf::Color(255, 255, 255, 50));

    unders.setPosition(x+10, y+10);
    window.draw(unders);
    // Channel strip rectangle
    sf::RectangleShape channel_strip(sf::Vector2f(50.f, 15.f));
    channel_strip.setFillColor(sf::Color(20, 30, 60));
    channel_strip.setPosition(x+10, y+10);
    window.draw(channel_strip);
    // info strip rectangle
    sf::RectangleShape info_strip(sf::Vector2f(50.f, 20.f));
    info_strip.setFillColor(sf::Color(20, 30, 60));
    info_strip.setPosition(x+10, y+60);
    window.draw(info_strip);

the 2 last rectangles are overlapping the first, then text is drawn (not shown in the code i provided).

Now i think this should be drawn in a vertex array, but with examples of the library, i'm not sure of what to do.

i understood i can draw multiple rectangle in on array and found how to do. But how can i assign different colors to the different Quads of the array, or at least, is it possible to do this.

For the time beeing, i just draw the first rectangle in the array an can't figure out how to change its color, except with setteing color of each vertex but  i want a plain color and it is blended.

Here is my first part of code for the array :

 sf::Vertex vertex;
   
    sf::VertexArray ch_quad(sf::Quads, 4);


    vertex.color = sf::Color(255, 255, 255, 50); // the color is not shawn, the Quad remains black
    ch_quad[0].position = sf::Vector2f(10, 10);
    ch_quad[1].position = sf::Vector2f(60, 10);
    ch_quad[2].position = sf::Vector2f(60, 80);
    ch_quad[3].position = sf::Vector2f(10, 80);

    window.draw(ch_quad);

To be clear, here are my questions : Is it possible to assigne multiple plain color do different quad in the same vertex array and how, is what i'm trying to do is what i should do (using vertex array instead or rectangles), will i gain render time if i do so ? and if not, how can i gain render time ?

Thanks by advance for your answers !

[Hapax]

To apply colour to your quad, you set all four vertices' colours to that colour:

    sf::VertexArray ch_quad(sf::Quads, 4);
    const sf::Color vertexColor(255, 255, 255, 50);
    ch_quad[0].position = sf::Vector2f(10, 10);
    ch_quad[1].position = sf::Vector2f(60, 10);
    ch_quad[2].position = sf::Vector2f(60, 80);
    ch_quad[3].position = sf::Vector2f(10, 80);
    ch_quad[0].color= vertexColor;
    ch_quad[1].color= vertexColor;
    ch_quad[2].color= vertexColor;
    ch_quad[3].color= vertexColor;

You can have multiple quads, each with different colours.
You can, technically, give a different colour to each vertex but you must be aware that it can look weird when it splits the quad into triangles.

[Riton_Lafouine]

Ok thanks, i successfully drawn my vertex but this calls many other questions :

as i said before, the vertex is drawn in an object. Before when i was creating multiple instance of the same objects, i had my rectangles drawn for every object. Nowthat i'm using vertex array, when i draw only one object, display is fine, but when i draw multiple objects, only the first is drawn.

Also, text disapear on the first and only vertex drawn (maybe under the vertex ?).

Does it means that only one instance of the vertex array can be drawn at the same time ?

Also, i'm loading font in the class, is it an issue ? i'm wondering if the font is loaded each time the object is created ans slows global performance ? in that case should i load it externaly and use a pointer ? i know this is more C++ general coding than SFML specific, but i'm there, so ...

***EDIT***

If you look at attachements, you can see the how it is with vertex array, and the how it should be (where all is drawn fine with rectangles)

Regards

[Hapax]

So, you have 48 (12 * 4) vertices in the vertex array?
Is every quad at a different position or do they all have the same 4 position co-ordinates?
Each quad should have the same texture co-ordinates if they use the same part of the texture.

If you want the text to appear above/in front of the vertex array, it must be drawn after it.

[Riton_Lafouine]

Hello,

Thanks for your answer.

This is not exact, this might be an issue with my bad english.

Each rectangle you see is a separate entity wich is drawn in a class.

The vertex array has 16 Vertex, Background (white), another over background (black) and foreground (the 2 blue rectangles). i don't use a texture, only colors for vertex because i want the colors to change dynamically.
Text is drawn after the vertex.

for the 2 screenshots, you have a vertex version (the one with only 1 rectangle and no text on it plus 9 text with no rectangle. This is the bug i don't understand.

The screenshot with the rectangles that are drawn correctly is a non vertex array version and is drawn with rectangles.

The question : Why is my vertex not repeated correctly ? it should, because it is in a class. And why is the text  not dramwn on it ? i did respect the good drawing order, text is drawn after the vertex array.

Note that if i create a single object of the class, the render is OK but i want it to be ok with multiple objects of the class.

Here is my vertex array code :

sf::Vertex vertex;
    //vertex.position = sf::Vector2f(0, 0);
    sf::VertexArray ch_quad(sf::Quads, 16);


    vertex.color = sf::Color(255, 0, 0);
    // Draws under quad supposed to be outline (draw order)
    ch_quad[0].position = sf::Vector2f(10, 10);
    ch_quad[1].position = sf::Vector2f(60, 10);
    ch_quad[2].position = sf::Vector2f(60, 80);
    ch_quad[3].position = sf::Vector2f(10, 80);
    //insert here if / else for select color change
    ch_quad[0].color = sf::Color(255, 255, 255, 50);
    ch_quad[1].color = sf::Color(255, 255, 255, 50);
    ch_quad[2].color = sf::Color(255, 255, 255, 50);
    ch_quad[3].color = sf::Color(255, 255, 255, 50);
    //draws the inside under quad ad sets the color (black)
    ch_quad[4].position = sf::Vector2f(12,12);
    ch_quad[5].position = sf::Vector2f(58,12);
    ch_quad[6].position = sf::Vector2f(58,78);
    ch_quad[7].position = sf::Vector2f(12,78);
    ch_quad[4].color = sf::Color(0, 0, 0);
    ch_quad[5].color = sf::Color(0, 0, 0);
    ch_quad[6].color = sf::Color(0, 0, 0);
    ch_quad[7].color = sf::Color(0, 0, 0);
    //draws the channel strip
    ch_quad[8].position = sf::Vector2f(12,12);
    ch_quad[9].position = sf::Vector2f(58,12);
    ch_quad[10].position = sf::Vector2f(58,27);
    ch_quad[11].position = sf::Vector2f(12,27);
    ch_quad[8].color = sf::Color(20, 30, 60);
    ch_quad[9].color = sf::Color(20, 30, 60);
    ch_quad[10].color = sf::Color(20, 30, 60);
    ch_quad[11].color = sf::Color(20, 30, 60);
    //draws the info strip
    ch_quad[12].position = sf::Vector2f(12,60);
    ch_quad[13].position = sf::Vector2f(58,60);
    ch_quad[14].position = sf::Vector2f(58,78);
    ch_quad[15].position = sf::Vector2f(12,78);
    ch_quad[12].color = sf::Color(20, 30, 60);
    ch_quad[13].color = sf::Color(20, 30, 60);
    ch_quad[14].color = sf::Color(20, 30, 60);
    ch_quad[15].color = sf::Color(20, 30, 60);

    window.draw(ch_quad);
 ch.setFont(font);
    ch.setString(std::string("ch ") + chnbr.str());
    ch.setCharacterSize(12);
    ch.setLetterSpacing(0.3);
    ch.setFillColor(sf::Color(255, 255, 255));

    ch.setPosition(x+12, y+12); // Positionnement
    window.draw(ch);
    // Level Text
    lvl.setFont(font);
    lvl.setString(std::string("") + lvlstr.str());
    lvl.setCharacterSize(18);
    lvl.setLetterSpacing(0.3);
    lvl.setFillColor(sf::Color(255, 255, 255));

    lvl.setPosition(x+14, y+28); // Positionnement
    window.draw(lvl);
}
 

Regards,

[Hapax]

Are the vertex array being transformed? If not, they will all be at the same place.

Try commenting out drawing the (just one) of the vertex arrays and see if the text appears.

Whatever is drawn last between window.clear() and window.display() will always be shown on top.

[Riton_Lafouine]

You were right again,

the vertex were drawn stacked, i used the transform method and everything is in the right place ...

i will open another thread for the last question.