Rendering a dynamically sized box

Question

So in games where there are textboxes with different sizes appearing, how does one actually render them efficiently? Games like Final Fantasy IX have dynamically sized speechbubbles for example, each with a size so it exactly matches the rendered text.

I know the basic idea is to render the frame around the bounding box of the text and with different images for each component of a box: corners, edges, center. Though how should one design that rendering if the edges aren't of 1 pixel in size when one has to compute how often an edge piece needs to be drawn next to each other to form the whole edge of the box.

Here is my naive implementation of a hopefully good enough abstracted method:

public void drawBox(Renderer renderer, int x, int y, int width, int height){
    int es = this.components.getEdgeSize();
    renderer.renderSprite(this.components.getTopLeftCorner(), x, y);
    /* Render top edge of box */
    int i;
    for(i = es; i < width - es; i += this.components.getTop().getWidth()){
        renderer.renderSprite(this.components.getTop(), x + i, y);
    }
    renderer.renderSprite(this.components.getTopRightCorner(), x + i, y);
    /* Render left edge of box */
    int j;
    for(j = es; j < height - es; j += this.components.getLeft().getHeight()){
        renderer.renderSprite(this.components.getLeft(), x, y + j);
    }
    renderer.renderSprite(this.components.getBottomLeftCorner(), x, y + j);
    /*Render bottom edge of box */
    for(i = es; i < width - es; i += this.components.getBottom().getWidth()){
        renderer.renderSprite(this.components.getBottom(), x + i, y + j);
    }
    renderer.renderSprite(this.components.getBottomRightCorner(), x + i, y + j);
    /*Render right edge of box */
    for(j = es; j < height - es; j += this.components.getRight().getHeight()){
        renderer.renderSprite(this.components.getLeft(), x + i, y + j);
    }
    int k = i;
    int l = j;
    for(i = es; i < k; i+= this.components.getCenter().getWidth()){
        for(j = es; j < l; j += this.components.getCenter().getHeight()){
            renderer.renderSprite(this.components.getCenter(), x + i, y + j);
        }
    }
}

I feel that some loops did not have to be done and the loop filling the center feels like it could potentially kill the framerate.

Answer 1

A good way to think about it is this. You can always break the textbox up into 9 bits, top left, top center, top right, etc.

Now the corners will basically always be the same size the top and bottom side will be stretched along the x axis and the left and right sides will be stretched along the y-axis. The center will be stretched along both axis obviously.

So the question is then how do you draw each of those.

Drawing the corners is easy since they always have the same dimensions. But for the sides and the centers you have a few choices.
If the textures for them tile you can just scale the sides and their texture coordinates up to fit and use sampler state wrap so that it tiles naturally. You want to make sure to round your scaling so your highest uv coordinates are integers, so that the tiling continues properly towards the corners. You could also not scale your uv coordinates and just let the image be stretched if it isn't (too) noticeable.
And for the center you can do essentially the same thing.

TL;DR: You don't really need to figure out how many of those pieces to draw. Instead thing of just 9 parts that make up a box and draw each of the parts appropriately.