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.
Decide whether all inventory slots should share a fixed corner radius or scale the radius with the slot. Resizing a rounded rectangle and scaling a path-converted copy are not interchangeable editing operations. A family can have perfectly matched outer dimensions while its corners still look inconsistent.
Key Takeaways
- Define corner radii independently from width, height and stroke width.
- Keep live rectangle shapes when repeated radius adjustments are required.
- Inspect the inner and outer corners at the actual UI sizes.
Write the radius policy before cloning the panel
A compact item slot and a wide equipment panel may share the same radius to create a consistent UI system. An enlarged promotional badge may instead need all proportions scaled together. Neither policy is universally correct. Record which one the asset family uses before producing several copies.
The Squares and Rectangles manual documents width, height and the Rx/Ry corner controls. Inspect those values with the Rectangle tool rather than judging a transformed object only through its selection bounding box.
Preserve editable shape parameters
If the object is still a rectangle, use its shape controls to adjust the required dimensions and radii. If it has become a path, those original shape parameters no longer provide the same editing model. The Object to Path guide explains that conversion changes the representation. Preserve a live-shape master when the design is still evolving.
Do not apply non-uniform scaling to every finished corner and assume it remains circular. A wide panel can inherit visibly stretched curvature. Compare a dimension-adjusted live shape with a scaled path copy on a duplicate, then choose the result that satisfies the radius policy.
| Asset requirement | Control to preserve | Acceptance question |
|---|---|---|
| Fixed-radius UI family | Numeric rectangle radii | Do corners match across widths? |
| Proportional enlargement | Consistent overall transform | Do all details scale intentionally? |
| Custom asymmetric corners | Explicit path geometry | Are the selected corners deliberately different? |
Check corners with their outlines present
An unexecuted example: a 48-pixel square slot and a 144-by-48-pixel equipment slot should both use the same visual corner treatment. Set their dimensions and inspect the live radii, then compare them with the intended border. A stroke can change the visible inner and outer curves, so matching radius fields alone does not guarantee matching painted edges.
The Strokes reference covers outline width and join treatment. Keep border settings constant during the radius comparison. If only one slot looks tighter, inspect whether it contains extra nested shapes or an independently scaled border.
Place both candidates into a mock inventory grid at native size. Look at neighboring corners and the gap between slots. The practical question is whether the family looks coherent at use size, not whether the source remains mathematically identical under every transformation.
Deliver the shape policy with the assets
Keep a native master that retains the intended parameters and export each runtime image at its declared dimensions. For scalable in-game panels, agree whether the engine will stretch the complete image or use a sliced-border system; a pre-rendered rounded rectangle does not automatically become a correct nine-patch.
Related guides explain stroke scaling, slice pivots and nine-patch metadata and export-area selection. This is a proposed design and inspection workflow, with no executed UI render or measured visual result.
Written by the FrameSprite Workflow Team. Report a correction.
Top comments (0)