Vertex Array how to draw many textures,text and outline ?

[lori3]

I have successfully set up my menu for my game however i saw a significant drop in fps when displaying about 50-60 buttons.

I searched up for ways to improve and found out that VertexArray is quite a good class for my purpose, however
I have problems setting my buttons in it:

I can't set more than one separate texture to the vertex array at once,
I can't set text to the vertex array
I can't set Outlines for my textures(buttons themselves)

here is some snippet from my code that i thought would be helpful:
Button.h

class Button : public sf::Drawable
{
private:
      const sf::Vector2f size = { 224,28 }; //this is the sprites size

sf::RectangleShape *sprite = new sf::RectangleShape{ size }; //creates a rect with that size
sf::Text *text = new sf::Text; // a text to be on the button
 /*..........*/
public:
void draw(sf::RenderTarget& target, sf::RenderStates states) const;
}

Button.cpp

   void Button::draw(sf::RenderTarget & target, sf::RenderStates states) const
   {
      target.draw(*sprite, states);
      target.draw(*text, states);
   }
/*...........*/
   void Button::setSelected(const sf::Vector2f & mouse)
   {
      isSelected = (sprite->getPosition().x - this->size.x / 2 * sprite->getScale().x <= mouse.x &&
         sprite->getPosition().x + this->size.x / 2 * sprite->getScale().x >= mouse.x &&
         sprite->getPosition().y - this->size.y / 2 * sprite->getScale().y <= mouse.y &&
         sprite->getPosition().y + this->size.y / 2 * sprite->getScale().y >= mouse.y);

      if (isSelected)
         sprite->setOutlineThickness(-1);
      else
         sprite->setOutlineThickness(0);
   }
/*.............*/

[Hapax]

Firstly, no, you can't add texts to a vertex array; they can't even be batched. However, if you have multiple texts that don't change - or at least don't change often - then you can pre-render them to a render texture and just draw that (one draw call).

Secondly, if you're creating your button with a vertex array, its outline can also be added to that vertex array; you just have to do it manually. It's probably best to use separate triangles (although you can currently still use quads too) so look for the Triangles primitive type.

Lastly, you can use different parts of a texture for each triangle so you can "batch-up" those textures onto one image (AKA texture sheet or sprite sheet etc.). The restriction for vertex arrays is that it must be a single sf::Texture, which is a single image, but it doesn't restrict how large those images are or which part to use per triangle.
Note, however, that there is a maximum size for an sf::Texture that is a restriction of the hardware. You can query this at runtime:
sf::Texture::getMaximumSize()

Although it's not actually clear in that documentation, the "size" represents both the width and the height of the texture, not the actual size in pixels (the number of pixels in the texture).