Posted onAug 9, 2024

Como utilizar sf::Vertex em SFML

🚀 Saber desenhar formas geométricas com código é uma das bases para aprender OpenGL e Vulkan.

Futuramente pretendo trazer mais conteúdos sobreOpenGL eVulkan, no entanto, uma das melhores ferramentas para se "preparar" para essas próximas realidades é oSFML.

Aliás,SFML também é interessante para entrar no mundo dodesenvolvimento de games e gráficos, além de você passar a entender melhor outras bibliotecas, tais como:SDL2,Raylib,Allegro, além de facilitar também o aprendizado de motores gráficos como:Godot,Unity e entre outros.

E uma das ferramentas interessantes do SFML, para usar, é asf::Vertex.

sf::Vertexé umaclasse (ou mais precisamente, umastruct) do SFML que representa um único vértice no espaço 2D e armazena informações como:

posição;
cor;
e coordenadas de textura.

01. O Básico do básico

Inciando do zero para entender como funciona de verdade osf::Vertex.

1.1. Isso só mostra o fundo preto, mas note que emdraw é necessário passar 3 parâmetros, além do&vertex como referência, pois ele não édrawable.

...sf::Vertexvertex;...window.draw(&vertex,1,sf::Points);...

Note que usamos o modelo:sf::Points, ele só desenha um único ponto. Existem outros modelos, veremos mais à frente.

Ele está aparecendo na tela, no entanto, na posição:0, 0, ou seja, você não conseguirá notar.

1.2. Para notar posicione ele mais para direita e para baixo. Para isso use aestrutura de união:.position, exemplo:

vertex.position=sf::Vector2f(100.f,100.f);

Note que aparecerá um pontinho(1 único vértice) branco na tela!

Esse exemplo básico poderia ser substituído usando somente o construtor:

sf::Vertexvertex(sf::Vector2f(100.f,100.f));

1.3. Você também pode definir cor para o vertex usando aestrutura de união.color

vertex.color=sf::Color::Red;// Ou diretamente no construtor:sf::Vertexvertex(sf::Vector2f(100.f,100.f),sf::Color::Red);

1.4. Você notou que o construtor é sobrecarregado como a maioria das declarações noSFML. E há mais um argumento para o construtor que é aestrutura de união:.texCoords.

Como o próprio nome sugere, ela é usada para definircoordenadas para uma possíveltextura que você queira "encaixar" ao seu vertex. Além de poder passá-la diretamente no construtor, você também pode definir posteriormente:

vertex.textCoords=sf::Vector2f(0.f,0.f);

Desenhar só um vértice pode até ter alguma utilidade, dependendo do que você está fazendo, mas geralmente não há utilidade na maioria dos casos. No próximo tópico veremos como usar múltiplos vertex(s).

02. Múltiplos vertex(s)

A forma correta de usar vertex é em conjunto. Nesse exemplo vamos posicionar um em cada ponto de um possível quadrado:

sf::Vertexvertex[4]={sf::Vertex(sf::Vector2f(100.f,100.f),sf::Vector2f(0.f,0.f)),// Top-leftsf::Vertex(sf::Vector2f(200.f,100.f),sf::Vector2f(100.f,0.f)),// Top-rightsf::Vertex(sf::Vector2f(200.f,200.f),sf::Vector2f(100.f,100.f)),// Bottom-rightsf::Vertex(sf::Vector2f(100.f,200.f),sf::Vector2f(0.f,100.f))// Bottom-left};

E agora, como não é um único e sim 4 vertex, nao usamos mais referência para desenhar:

window.draw(vertex,4,sf::Points);

Vai renderizar assim:

Modelos para`sf::Vertex`

Nós usamos e falamos sobre osf::Points, logicamente, ele só desenha pontos, mas existem outros. São eles:

sf::Lines, ele liga os pontos que estão na mesma linha:

sf::LineStrip, similar aosf::Lines, mas ele faz uma ligação a mais em uma das verticais:

sf::Quads, ele preenche(fill) o conteúdo tomando os vértices como coordenada:

sf::Triangles, similar aosf::Quads, mas é para triângulos, lógico que seu array precisa ter 3 elementos agora:sf::Vertex vertex[3]:

sf::TriangleStrip, voltamos para os 4 elementos para o array, e note que ele preenche, menos um formato de triângulo:

sf::TriangleFan, termina no mesmo vértice que inicio gerando um efeito similar aosf::Quads comfill:> Agora tem um vertex com 5 vértices:

...sf::Vertexvertex[5]={sf::Vertex(sf::Vector2f(150,150)),// iníciosf::Vertex(sf::Vector2f(100,100)),sf::Vertex(sf::Vector2f(150,100)),sf::Vertex(sf::Vector2f(200,100)),sf::Vertex(sf::Vector2f(150,150))// final};...window.draw(vertex,5,sf::TriangleFan);...

Exemplos

01. Desenhando triângulo colorido estilo o exemplo básico doOpenGL

...sf::Vertexvertex[3]={sf::Vertex(sf::Vector2f(400.f,100.f),sf::Color::Red),// Topo (vermelho)sf::Vertex(sf::Vector2f(300.f,300.f),sf::Color::Green),// Esquerda (verde)sf::Vertex(sf::Vector2f(500.f,300.f),sf::Color::Blue)// Direita (azul)};...window.clear(sf::Color::White);window.draw(vertex,3,sf::Triangles);...

02. Criando um "quase"C++

#include<SFML/Graphics.hpp>intmain(){sf::RenderWindowwindow(sf::VideoMode(800,450),"C++ sf::Vertex",sf::Style::Titlebar|sf::Style::Close);sf::VertexcPlusPlus[15];// "C"cPlusPlus[0]=sf::Vertex(sf::Vector2f(100.f,200.f),sf::Color::Blue);// Superior esquerdocPlusPlus[1]=sf::Vertex(sf::Vector2f(200.f,200.f),sf::Color::White);// Superior direitocPlusPlus[2]=sf::Vertex(sf::Vector2f(200.f,250.f),sf::Color::Blue);// Inferior direitocPlusPlus[3]=sf::Vertex(sf::Vector2f(150.f,250.f),sf::Color::White);// MeiocPlusPlus[4]=sf::Vertex(sf::Vector2f(150.f,300.f),sf::Color::Blue);// Inferior direitocPlusPlus[5]=sf::Vertex(sf::Vector2f(100.f,300.f),sf::Color::White);// Inferior esquerdocPlusPlus[6]=sf::Vertex(sf::Vector2f(100.f,200.f),sf::Color::Blue);// Fechando o C// 1º "+"cPlusPlus[7]=sf::Vertex(sf::Vector2f(250.f,225.f),sf::Color::Blue);// Meio esquerdocPlusPlus[8]=sf::Vertex(sf::Vector2f(350.f,225.f),sf::Color::White);// Meio direitocPlusPlus[9]=sf::Vertex(sf::Vector2f(300.f,175.f),sf::Color::Blue);// SuperiorcPlusPlus[10]=sf::Vertex(sf::Vector2f(300.f,275.f),sf::Color::White);// Inferior// 2º "+"cPlusPlus[11]=sf::Vertex(sf::Vector2f(400.f,225.f),sf::Color::Blue);// Meio esquerdocPlusPlus[12]=sf::Vertex(sf::Vector2f(500.f,225.f),sf::Color::White);// Meio direitocPlusPlus[13]=sf::Vertex(sf::Vector2f(450.f,175.f),sf::Color::Blue);// SuperiorcPlusPlus[14]=sf::Vertex(sf::Vector2f(450.f,275.f),sf::Color::White);// Inferiorwhile(window.isOpen()){sf::Eventevent;while(window.pollEvent(event)){if(event.type==sf::Event::Closed)window.close();}window.clear(sf::Color::Black);window.draw(cPlusPlus,7,sf::TriangleFan);window.draw(&cPlusPlus[7],4,sf::Lines);window.draw(&cPlusPlus[11],4,sf::Lines);window.display();}return0;}