Packs de interface
Oak Kit de painéis — painéis de moldura dupla e botões
Painéis de janela nine-slice de moldura dupla em carvalho quente, molduras de lista rebaixadas e quatro estados de botão em aba, em SVG e PNG em 1x/2x/4x.

Sobre este pack
Uma moldura de madeira quente para o tipo de jogo que tem grade de inventário e diário de missões. Duas bordas concêntricas com um vão entre elas lhe dão ar entalhado em vez de retângulo marrom chapado, e os botões em forma de aba se apoiam numa linha de base de latão para que uma fileira deles se leia como um conjunto de páginas e não como uma fileira de controles soltos. Tudo aqui é um tamanho acima de um kit padrão, porque um menu de fantasia costuma ser olhado, não passado de relance.
Dois painéis nine-slice — uma moldura de janela de moldura dupla com cantos de 32 px e uma moldura interna rebaixada com cantos de 20 px — cobrem quase toda caixa de que um menu precisa: diálogos, grades de inventário, fundos de lista, dicas de tela e painéis de estatísticas. Duas bordas concêntricas com um vão entre elas se leem como entalhadas e não como desenhadas, e é isso que separa uma interface trabalhada de um retângulo com um traço. Os dois esticam de forma limpa em qualquer tamanho porque os cantos nunca escalam e o centro é um preenchimento chapado.
Sobre os painéis assentam quatro estados de botão em aba: normal, hover, pressionado e desativado. São desenhados sobre a mesma base 160×48 com cantos de 16 px, então você troca a textura num único widget de botão e obtém todo o ciclo de interação sem mover um retângulo. O estado pressionado baixa sua face dois pixels e remove o brilho superior em vez de apenas escurecer, e é isso que faz um botão parecer clicado e não meramente recolorido.
Tudo vem duas vezes. Os fontes SVG são os arquivos em que o kit foi desenhado — abra-os, mude os seis tons marrom madeira ou o único acento latão polido, e reexporte. As exportações PNG são chapadas, transparentes e pré-escaladas em 1x, 2x e 4x para motores que querem bitmaps, sem alfa pré-multiplicado e sem sombra assada fora dos limites do sprite.
Download
Link direto · sem cadastro · sem página de esperaKit completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readme
Como usar
- No Unity, importe os PNGs, defina Texture Type como Sprite (2D and UI) e a borda como 32, 32, 32, 32 para o painel de janela e 16, 16, 16, 16 para os botões; depois defina Image Type como Sliced no componente de interface.
- No Godot 4, use um NinePatchRect e defina as margens do patch com esses mesmos números, ou solte o SVG direto e deixe o Godot rasterizá-lo na escala indicada nas opções de importação.
- No Unreal, importe como Texture2D, crie um Slate Brush com Draw As em Box e informe a margem como fração do tamanho da textura — 0.25 para o painel de 128 px e 0.1 para o botão de 160 px.
- Para resultados nítidos em escalas de interface não inteiras, use o PNG de 2x ou 4x em vez de ampliar o de 1x, ou aponte seu motor para o SVG fonte e deixe que ele rasterize no tamanho final.
- O acento de latão é um único valor no SVG — trocá-lo por prata ou verdete reveste o kit inteiro para outra facção sem tocar nos tons de madeira.
Licença
Creative Commons Atribuição 4.0 — Grátis para uso comercial. Atribuição obrigatória. Termos completos · O que isso significa na prática
"Oak Kit de painéis — painéis de moldura dupla e botões" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/oak-panel-ui-kit


