Nine-Slice de UI de Jogo e Painéis Escaláveis: Marcas no Figma / PSD e QA de Fatiamento na Engine

Quando um painel é esticado mais largo, cantos borrados, textura central repetida ou cantos ovais geralmente significam que o nine-slice (9-slice / cap insets) não foi especificado na entrega, ou que a engine usa escala Simple no sprite inteiro. Ajustar Image Type e bordas no Unity Editor pode salvar uma tela, mas a próxima entrega de design sobrescreve isso—se as bordas não correspondem à escala de exportação, ciclos de retrabalho.

Os exemplos abaixo focam em Unity UGUI Image (Sliced / Tiled). Godot StyleBoxTexture e nine-slice de sprite no Cocos mapeiam para as mesmas ideias, incluindo content padding. Âncoras e Safe Area: checklist de engine + MCP item 6. Padding de região de esticamento com locales: overflow de locale verificação de design 7.

O checklist de handoff de design item 6 exige regiões claras de nine-slice / esticamento. Este post cobre quando fatiar, marcas no Figma/PSD, aceitação em três engines e caminho de canvas full-screen, além de uma tabela de correções.

Critérios de reprovação (qualquer um = não aprovado): arte de canto deforma ao esticar; repetição ou emendas não intencionais na região de esticamento; raio de canto muda com o tamanho do painel; fundo escalável escalado junto com ícones/avatares fixos; escala de exportação não corresponde aos pixels de borda da engine (lacunas de 1px ou bordas suaves).

---

Quando nine-slice é necessário vs esticamento rígido proibido

Tipo de asset	Faça	Não faça
Fundo de diálogo / painel de configurações	Nine-slice + content padding	Sprite Simple único em sangria total
Containers de input / barra	Nine-slice ou cap L/R + repetição central	Achatar altura sem regras de arte
Botões primários (tamanho fixo)	Sprite fixo ou nine-slice + largura mínima	Botão arredondado infinitamente largo como um único esticamento
Ícones, avatares, molduras de habilidade	Tamanho fixo, sem nine-slice	Mesclar com fundo do painel em uma única imagem esticada
Fundo full-screen (sem caixa emoldurada)	Imagem completa ou estratégia de tile na spec	Reutilizar bordas de painel em sangria total

Regra: Se largura ou altura muda com resolução, texto ou conteúdo de lista e os cantos devem manter a forma → nine-slice ou equivalente na engine. Controles de tamanho fixo → sprite fixo + restrições de layout.

---

Marcas de handoff no Figma / PSD (lista de verificação)

#	Verificação	Padrão de aprovação
1	Camada de esticamento separada de decor / ícones / texto	Fundo do painel reskin + slice; ícones não escalados com o fundo
2	Border / cap inset em px (quatro lados)	Corresponde a @1x ou escala de exportação do time nas notas de entrega
3	Escala de exportação fixa (@1x/@2x ou baseline 1080)	Engenharia não adivinha a matemática da borda
4	Raio de canto fora da região de esticamento ou spec permite cantos não esticáveis	Sem aprovação de “cantos viram cápsulas”
5	Região de esticamento tile-friendly ou sólida	Repetição central sem desalinhamento óbvio
6	Nomes semânticos	ex.: Panel_Shop_9s, Input_Field_9s
7	Multi-estado (normal / desabilitado) mesma borda	Insets correspondem; apenas cor/skin muda
8	Slice no PSD ou notas de exportação no Figma padding transparente	Não contar sombra na borda a menos que a spec diga
9	Entregar com item 5 do handoff estados de botão	Não remendar estados ausentes com arte 9s errada
10	Reskin de evento muda apenas a arte, borda inalterada	Veja spec de reskin

Figma: coloque cap inset na documentação do componente ao usar frames redimensionáveis ou plugins de slice. PSD: alinhe slices com PSD para Unity em 5 minutos.

---

Três engines: componentes e aceitação

Item	Unity UGUI	Godot 4 Control	Cocos UI
Componente	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite nine-slice / Sliced
Fonte da borda	Sprite Editor Border (L/T/R/B px)	content_margin / patch	Cap insets (LTRB)
Área de conteúdo	RectTransform + padding de filhos	MarginContainer + Theme	Widget / padding de layout
Falha típica	Uso incorreto de Simple; borda em escala errada	Incompatibilidade entre patch e tamanho da textura	Rotação de atlas quebra inset
Aprovação	Em 150% / 200% de largura: cantos nítidos, centro limpo	Igual; preview do Theme corresponde ao Play	Igual; spot-check no dispositivo com lista longa

Aceitação no Unity Editor (mapeie para outras engines):

1. Defina o Image do Prefab como Sliced com bordas correspondendo ao design.
2. Arraste o RectTransform do painel para as larguras mínima e máxima do design.
3. Compare cantos, bordas e centro com a captura do Figma/PSD.
4. Se o modo Play estiver OK → uma passagem em dispositivo por checklist pré-lançamento.

---

Conceito full-screen: divisão de canvas e reexportação

Com apenas arte full-screen em PNG ou AI, a borda não pode ser inferida. Caminho: VberAI Studio (AI Studio, ≠ Google AI Studio) divisão in-place → marcar painéis escaláveis → exportar Prefab (determinístico, não YAML de LLM).

Passo	Ação	Aceitação
1	Tela cheia no canvas; dividir Panel_* e ícones fixos	Hierarquia nomeada
2	Confirmar intenção de 9-slice do painel no canvas ou antes da exportação	Responsável pelo inset documentado
3	Exportar Prefab Unity / Godot / Cocos	QA de Sliced conforme tabela acima
4	Após reskin / locales, reexportação da árvore completa	Se a spec de borda não mudou, insets inalterados

Figma/PSD em camadas: prefira Figma → Unity ou PSD para UGUI, depois ajustes menores de borda na engine—evite reexportar 20 PNGs soltos a cada evento.

---

Roteamento de correções

Sintoma	Causa provável	Ação	Responsável
Cantos borrados	Escala Simple na imagem inteira	Sliced + borda correta; design adiciona marca de inset	Engenharia + Design
Emenda central / blocos repetidos	inset errado em 1–2px; incompatibilidade de escala	Corresponder px do design; reimportar sprite	Engenharia
Cantos esticam oval	Arte não deveria ter nine-slice	Tamanho fixo ou nova arte de canto	Design
Borda muda após reskin	Novo tamanho de arte ou padding	Travar tamanho do canvas na spec de reskin; re-QA após reskin	Design
Fundo de linha de lista deforma	Fundo de linha esticado como painel completo	9s específico da linha ou altura fixa	Design
Falha só em certa resolução	Escala não inteira do Canvas Scaler	Checklist de engine Anchor/Scaler	Engenharia

Regra: Se borda ≠ design → corrija marcas ou fonte do sprite primeiro, depois o Prefab. Correções apenas no Inspector sem atualizar a entrega → perdidas na próxima exportação.

---

vs handoff “apenas pacote PNG”

Abordagem	Serve para	Não serve para
Exportação manual + engenharia preenche borda	Poucos painéis, demo	Reskin frequente, muitas telas
Figma/PSD + exportação estruturada do VberAI Studio	Multi-tela, multi-engine, eventos	Substituir marcas de inset e QA
Sliced temporário na engine	Hotfix de uma tela	Longo prazo sem fonte de design

Recomendado: marcas de inset no design → exportação estruturada de Prefab → Sliced no Unity Editor em duas larguras → MCP para lógica. Raycast e binding: checklist de engine + MCP.

---

Perguntas frequentes

Painéis arredondados podem usar nine-slice?
Sim, mas os insets devem ficar nas bordas retas de esticamento; cantos permanecem em tiles de canto não esticáveis. Se o raio de canto cresce com o tamanho do painel → reprovado; corrija a arte ou limite o tamanho máximo.

Sombras contam na borda?
A spec do produto decide. Se a sombra não estica, separe camadas ou marque inset no retângulo sólido sem brilho externo.

Tiled vs Sliced?
Sliced para painéis emoldurados; Tiled (ou arte central tile-friendly) para textura central repetida. Escreva na spec—não deixe a engenharia adivinhar.

Slices separados para Godot / Cocos?
Uma semântica de inset; troque o alvo de exportação via exportação multi-engine de canvas e verifique patch/cap conforme a tabela.

O VberAI Studio preenche bordas automaticamente?
Depende da exportação e dos assets; a aceitação é sempre Sliced/StyleBox na engine. Sem inset no design → engenharia define bordas no Editor e registra na spec.

VberAI Studio é o mesmo que Google AI Studio?
Não. Veja comparação.