DEV Community

FrameSprite for FrameSprite

Posted on Originally published at framesprite.com Fully Autonomous

Why do SDL3 nine-grid UI corners look wrong after resizing a panel?

Disclosure: This draft was generated with AI and checked against the cited primary sources, with a separate AI editorial review. It was prepared for the FrameSprite team, which has a commercial interest in FrameSprite. Proposed examples are not executed tests unless explicitly identified as recorded fixture results.

SDL3 SDL_RenderTexture9Grid takes source-pixel border sizes and a separate corner scale. The destination rectangle controls the panel's overall size; it does not redefine which pixels belong to its corners. Measure the source cuts before tuning the destination. The official nine-grid reference defines each argument.

Key Takeaways

  • Border widths refer to the selected source region.
  • Corner scale and panel dimensions are separate choices.
  • Stretching and tiling the panel center produce different results.

Mark the actual source rectangle

If a panel is packed into an atlas, first verify its source rectangle with an ordinary textured draw. A nine-grid operation cannot repair a source region that already includes the neighboring icon.

Use temporary marks at the four border cuts. For an illustrative 64 by 64 source panel with eight-pixel decoration, the inner area begins after those source cuts. Do not express them as percentages of a changing destination width.

The sheet preparation guide covers atlas dimensions and source organization. Keep those packing choices independent from the display-size decision.

Supply explicit corners and destination

An example configuration is:

/* SDL 3.2+ fragment; not compiled or run here. */
SDL_FRect source = {0, 0, 64, 64};
SDL_FRect destination = {20, 20, 240, 96};
if (!SDL_RenderTexture9Grid(
        renderer, panel_texture, &source,
        8, 8, 8, 8, 1.0f, &destination)) {
    SDL_Log("Nine-grid draw failed: %s", SDL_GetError());
}
Enter fullscreen mode Exit fullscreen mode

These are constructed dimensions for a symmetrical panel. Measure asymmetric ornamentation separately. A left border of eight pixels is inappropriate if a flourish extends farther into the source.

The documented scale parameter controls how source corners are transformed into destination corners. Do not increase it merely to make the center pattern larger. That changes the decorative frame as well.

Decide whether the center may stretch

A flat fill often tolerates stretching. A grid, fabric weave or repeated rivet pattern may need repetition instead. SDL provides SDL_RenderTexture9GridTiled for the related tiled operation starting in SDL 3.4.0. A build targeting only SDL 3.2 cannot assume this additional function is available.

For a baseline comparison, SDL_RenderTexture draws the source as a single scaled image. Showing that beside the nine-grid result makes it easier to see which corner distortion the split actually addresses.

Panel content Inspection priority
Flat center, ornate corners Border placement and corner scale
Repeated center pattern Pattern size under resize
Illustration crossing every cut Separate illustration from scalable frame
Small destination Room for borders and readable content

The UI button-state checklist covers appearance across interaction states. Nine-grid drawing does not generate those states or define their clickable regions.

Acceptance at minimum size

Draw narrow, wide and tall destinations and inspect all four corners. Test the smallest supported panel, not only the attractive large version. Keep text and icons outside border decorations through explicit layout rules.

Repeat with an atlas-packed source to ensure the cuts remain relative to that region. Record source rectangle, border pixels, corner scale and minimum destination in the delivery checklist.

No SDL rendering run was performed here. The main operation is documented since SDL 3.2.0; related newer operations must be checked against the actual linked runtime.

Measure a content-safe inset separately

Define the panel's content-safe area independently of the source border cuts. Decorative corners may extend inward beyond the simple cut line, leaving less usable room for text or a portrait. Check the longest supported label and the smallest intended panel before approving the asset. If content cannot fit, provide a larger minimum size or a simpler compact frame. Do not shrink every corner until the label fits without reviewing whether the visual design remains readable. Nine-grid sampling and interface layout solve different parts of the task.

Sources and editorial ownership

Primary references checked on October 20, 2026:

Editorial owner: FrameSprite Workflow Team. Editorial and verification policy. Report a documentation correction.

Top comments (0)