Packs de interface

Dusk Kit de painéis — painéis com barra de título e botões

Painéis de janela nine-slice com barra de título em roxo do anoitecer, molduras de lista rebaixadas e quatro estados de botão reto, em SVG e PNG em 1x/2x/4x.

  • ui
  • svg
  • png transparente
  • nine-slice
  • painel
  • botão
  • menu
  • faixa
  • pixel art
  • retrô
  • 2d
Painel de menu roxo do anoitecer com uma faixa de título em âmbar e uma área de lista rebaixada, ao lado de uma coluna que mostra o mesmo botão reto nos estados normal, hover com contorno e pressionado
prévia 1600×800a transparência aparece como xadrez

Sobre este pack

Um kit de bordas duras para jogos em pixel que ainda querem um menu de verdade, com a barra de título integrada ao painel em vez de aparafusada por cima. Não há cantos arredondados nem antialiasing em lugar algum: cada borda é uma única fileira chapada de pixels, o único jeito de um painel manter a forma quando o jogador roda o jogo em 3x num monitor 4K. Os violetas são frios o bastante para que âmbar se leia como alerta sem precisar de vermelho.

Dois painéis nine-slice — uma moldura de janela com barra de título com cantos de 16 px e uma moldura interna rebaixada com cantos de 12 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. Uma faixa de título está integrada ao topo do painel, então o cabeçalho de um diálogo não precisa de um segundo sprite nem de alinhamento manual. 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 de cantos retos: normal, hover, pressionado e desativado. São desenhados sobre a mesma base 96×32 com cantos de 8 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 violeta noturno ou o único acento âmbar, 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 espera
Baixar ZIP15 kB

Kit completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readme

Arquivos inclusos neste pack
ArquivoFormatoPesoDownload
Kit completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readmeZIP15 kB Obter →
Painel de janela, SVG editávelSVG2.3 kB Obter →
Botão (estado normal), SVG editávelSVG1.6 kB Obter →

Como usar

  1. No Unity, importe os PNGs, defina Texture Type como Sprite (2D and UI) e a borda como 16, 16, 16, 16 para o painel de janela e 8, 8, 8, 8 para os botões; depois defina Image Type como Sliced no componente de interface.
  2. 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.
  3. 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.2 para o painel de 80 px e 0.08333 para o botão de 96 px.
  4. 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.
  5. Cada borda cai sobre um pixel inteiro e nada tem antialiasing, então importe o PNG de 1x com o filtro em Point (Unity), Nearest (Godot) ou Nearest-Neighbour (Unreal) e escale apenas por números inteiros.

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

Linha de crédito para copiar
"Dusk Kit de painéis — painéis com barra de título e botões" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-panel-ui-kit