Nanfeng

Notes on software development, code, and curious ideas

Nine-Slice Image Scaling in Cocos2d-x Lua

In
Resize a panel without distorting its corners by using a nine-slice sprite in Cocos2d-x Lua.

Environment: Cocos2d-x 3.17
Language: Lua

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:

1
2
3
4
5
6
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.

+