Cocos2d-x Lua Nine-Slice Scaling: Resize UI with Scale9Sprite

Post author: Nanfeng
Post link: <a href="https://lengmo714.top/en/63240.html" title="Cocos2d-x Lua Nine-Slice Scaling: Resize UI with Scale9Sprite">https://lengmo714.top/en/63240.html
Copyright Notice: All articles in this blog are licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="noopener" target="_blank"> BY-NC-SA unless stating additionally.

In Game Development

Resize Cocos2d-x Lua panels and buttons without distorting corners by using Scale9Sprite, cap insets, content size, and reusable nine-slice UI textures.

Environment: Cocos2d-x 3.17
Language: Lua

Resize UI without Distorting Corners

Scaling a normal parent sprite also scales its visual details and may affect the appearance of its child hierarchy. For resizable panels and buttons, nine-slice scaling divides an image into nine regions: the corners remain fixed, the edges stretch in one direction, and the center stretches in both directions.

Create a scale-nine sprite with quick-Cocos2d-x:

local panel = display.newScale9Sprite(
    "Box.png",
    0,
    0,
    cc.size(400, 300)
)

The exact overload depends on the engine wrapper. For precise control, provide an appropriate cap inset that marks the stretchable center region. Design the source texture with borders and corners that remain visually correct at the smallest supported size.