How to use Scale9 sprite?

[paulocoutinhox]

Hi,

Im trying make a simple dialog with a scale9 speech ballon generated from Android Studio:

Code:

void MainScene::createSpeechBubble(const std::string& text)
{
    // Limites do balão
    const float maxWidth = 400.0f; // Largura máxima antes de quebrar linha
    const float padding  = 50.0f;  // Espaço interno ao redor do texto

    // Criar um Label para o texto
    auto label = Label::createWithSystemFont(text, "Arial", 24);
    label->setAnchorPoint(Vec2(0.5f, 0.5f));
    label->setColor(Color3B::BLACK);
    label->setDimensions(maxWidth, 0); // Define largura máxima, altura ajusta automática
    label->setAlignment(TextHAlignment::LEFT, TextVAlignment::CENTER);

    // Medir o tamanho do texto ajustado
    Size textSize = label->getContentSize();
    Size balloonSize(textSize.width + padding * 2, textSize.height + padding * 2);

    // Criar o balão como Scale9Sprite
    auto balloon = ui::Scale9Sprite::create("cocosui/speech-bubble.9.png"); // <<<-------------
    auto capInsets = balloon->getCapInsets();
    AXLOGD("balloon capInset = {}, {} {}, {}", capInsets.origin.x, capInsets.origin.y, capInsets.size.width, capInsets.size.height);

    // Se o NinePatch não funcionar automaticamente, definir manualmente a região escalável
    balloon->setContentSize(balloonSize);
    balloon->setAnchorPoint(Vec2(0.5f, 0.5f));

    // Posicionar o label dentro do balão com padding
    balloon->addChild(label);
    label->setPosition(balloonSize / 2);

    // Transformar o centro da tela em coordenadas do gameLayer
    Vec2 screenCenter   = Vec2(visibleSize.width / 2, visibleSize.height / 2);
    Vec2 worldPosition  = screenCenter - gameLayer->getPosition(); // Ajusta para o cenário

    // Posicionar o balão no mundo do cenário
    balloon->setPosition(worldPosition);

    // Adicionar ao gameLayer (fixo no cenário)
    gameLayer->addChild(balloon, 1000);

    // Remover o balão após alguns segundos
    balloon->runAction(Sequence::create(DelayTime::create(3.0f), RemoveSelf::create(), nullptr));
}

Results:

Can anyone help me? The ballon is drawed very wrong.

[rh101]

You need set the cap insets, which seem to be missing from the code in your post.

For example:

balloon->setInsetLeft(32);
balloon->setInsetRight(32);
balloon->setInsetTop(32);
balloon->setInsetBottom(32);

[paulocoutinhox]

Ok, but it read the inset from the file, no? It already parse the scale9 info or im wrong?

[paulocoutinhox]

There is a tool that help us configure correctly the inset info?

[rh101]

Ok, but it read the inset from the file, no? It already parse the scale9 info or im wrong?

No, that's not how it works. There is no inset data in the image file, so the insets need to entered manually based on your requirements. Open the image in an image editor and work out the measurements from it.

[paulocoutinhox]

Hi,

I solved using this tool:
https://devxz.com/android-asset-studio/

From site:
https://devxz.com/

But something that i learn after test more than 20 sprites, is that sprites need be ready for scale, like this that i buy:

[paulocoutinhox]

Also, i don't need set inset manually, since Axmol has a parser for this, so i use only this code:

auto balloon   = ui::Scale9Sprite::create("cocosui/speech-bubble.9.png");

[rh101]

Also, i don't need set inset manually, since Axmol has a parser for this, so i use only this code:

Axmol only parses inset values if they exist in the sprite sheet data. The inset values are not stored inside the image file, and if the image is not in a sprite sheet, or does not have associated inset data for that image, then it uses default values, which are set in Scale9Sprite::setCapInsets:

void Scale9Sprite::setCapInsets(const ax::Rect& insetsCopy)
{
    Rect insets = insetsCopy;

    // When Insets == Zero --> we should use a 1/3 of its untrimmed size
    if (insets.equals(Rect::ZERO))
    {
        insets = Rect(_originalContentSize.width / 3.0f, _originalContentSize.height / 3.0f,
                      _originalContentSize.width / 3.0f, _originalContentSize.height / 3.0f);
    }

So, for example, if the image is 90x90, and no inset values are set by the developer, then it ends up as this:

insets = Rect(90 / 3.0, 90 / 3.0, 90 / 3.0, 90 / 3.0)
which is
insets = Rect(30, 30, 30, 30)

[paulocoutinhox]

To i understand, what is the inset in image editor? The pixel from the margin? Example:

[rh101]

You can only set the left, right, top and bottom values, so based on this image:

These are the corresponding settings:

balloon->setInsetLeft(L);
balloon->setInsetRight(R);
balloon->setInsetTop(T);
balloon->setInsetBottom(B);

Also, in order for the sprite to render the corners correctly, the final content size must be greater than the size of the total X and total Y inset sizes combined.

So, minimum content size is:
balloon->setContentSize(L+R, T+B)

So, for your example,:

Size balloonSize(std::max(textSize.width + padding * 2, L + R), std::max(textSize.height + padding * 2, T + B));

[paulocoutinhox]

Perfect, thanks.