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

A moldura entalhada com o calor retirado. O carvalho se lê como taverna; isto se lê como cripta, e a diferença não é só a paleta — a faixa de cabeçalho substitui a segunda moldura concêntrica e um botão chanfrado substitui a aba arredondada. Os pináculos de canto e as gemas cravadas neles são a mesma geometria nos dois, e é isso que os mantém no mesmo estilo em vez de serem dois kits de fantasia sem relação.

Dois painéis nine-slice — uma moldura de janela com barra de título com cantos de 12 px e uma moldura interna rebaixada com cantos de 10 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 ficam doze sprites de botão chanfrados: normal, hover, pressionado e desativado, cada um desenhado três vezes — uma barra padrão de 128×56, um botão de ícone quadrados quadrado e um botão compacto para barras de ferramentas e ações em linha. Os três tamanhos são arquivos separados e não um sprite escalado porque o desenho depende do tamanho: o chanfro calculado a 56 px é recalculado nos menores, não encolhido. O estado pressionado baixa a face dois pixels e tira o brilho superior em vez de apenas escurecer — é isso que faz um botão parecer clicado e não apenas recolorido.

Quatro peças menores cobrem o que um menu precisa entre os painéis: um tooltip com ponta, uma barra de título que se apoia no topo de um painel, um divisor de seção com marca central e um chip de rótulo para contadores e status. Nenhuma delas é o painel de janela em outro tamanho — um nine-slice já estica para qualquer medida, então um segundo arquivo com outra largura seria enchimento e não um componente.

Tudo vem duas vezes. Os fontes SVG são os arquivos em que o kit foi desenhado — abra-os, mude os seis tons índigo profundo ou o único acento prata pálido, 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.

Creative Commons Atribuição 4.0 — Grátis para uso comercial. Atribuição obrigatória. Termos completos · O que isso significa na prática