Packs de interface
Dusk Células de inventário — grade de 48px
13 espaços de inventário roxo do anoitecer de 48×48: vazio, hover, selecionado, travado, negado, destino; equipamento redondo e hexagonal, hotbar, três molduras de raridade.
Sobre este pack
Uma grade de inventário de 48 pixels com passo em potência de dois. O estado bloqueado é uma hachura diagonal e não uma tinta apagada, porque apagar uma célula numa paleta escura produz algo quase idêntico ao estado vazio.
Uma grade de inventário não precisa de um painel, precisa de um quadrado que ladrilhe. Cada espaço aqui é 48×48 com os mesmos limites externos — a única exceção é o espaço de duas células para itens grandes, de 96×48, que é um arquivo separado e não um quadrado esticado, porque esticar um espaço que não é nine-slice deforma seus cantos. Separe-os por 52 px e as bordas se leem como uma grade única em vez de uma fileira de caixas soltas.
Os estados são desenhados como estrutura, não como cor. O espaço selecionado ganha marcas de canto, o travado um hachurado diagonal, o de hover eleva a borda um degrau, o negado carrega uma cruz e o destino de soltar uma moldura de acento tracejada. Isso é proposital: a tela de inventário é a superfície mais ruidosa da maioria dos jogos, fica sob arte de itens em todos os tons ao mesmo tempo, e um estado que é só uma cor de borda some no instante em que há uma espada vermelha no espaço.
Negado e travado são sprites distintos de propósito. Um espaço travado pode abrir depois; um negado está recusando o item que está no cursor. Desenhá-los igual é como um inventário acaba ensinando a regra errada ao jogador. Os espaços de equipamento quebram o quadrado pelo mesmo motivo: o de acessório é redondo e o de gema hexagonal, então a forma diz o que vai ali antes de qualquer tooltip.
As três molduras de raridade reaproveitam as cores de HP, MP e XP do resto da família, cada uma com uma marca de canto além da borda colorida — então quem ordena por raridade está lendo dois sinais, e nenhum deles compete com a arte do item no centro da célula.
Tudo está incluído como SVG editável e como PNG chapado transparente em 1x, 2x e 4x. Os interiores das células são transparentes, então o que você renderizar atrás da grade aparece através, em vez de uma cor de fundo assada na imagem.
Download
Link direto · sem cadastro · sem página de esperaConjunto completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readme
Como usar
- Disponha as células com um passo de 52 px — o sprite de 48 px mais 4 px de espaço — e as bordas ficarão a um pixel de distância em vez de dobrarem.
- Desenhe o ícone do item centralizado na célula com cerca de 34 px; o recesso interno tem 42 px, então qualquer coisa maior toca a borda e engole a moldura.
- Troque o sprite inteiro da célula nos estados selecionada e bloqueada em vez de sobrepor uma tinta, porque as marcas nos cantos e a hachura fazem parte do sprite.
- As molduras de raridade substituem diretamente a célula vazia — mesmos limites, mesmo recesso — então uma mudança de raridade é uma única troca de textura, sem mexer no layout.
- Uma célula de 48 px acomoda um sprite de item de 32 px com 8 px de margem, que é o passo usado pela maioria dos inventários da era de 16 bits e a razão de todos os números aqui serem potências de dois.
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
"Dusk Células de inventário — grade de 48px" by Oğuzhan Girgin, licensed under CC BY 4.0 — https://www.colorosse.com/assets/2d/ui/dusk-inventory-slotsExplore também
Mais Packs de interface
Ver todos →
Aetherlab Panos de fundo
13 peças de fundo e sobreposição (magitech) para interfaces em modo escuro — azul de laboratório, acento ciano etéreo. SVG e PNG transparente em 1x/2x/4x.
Aetherlab Molduras de carta
18 componentes de cartas e notificações (magitech) para interfaces em modo escuro — azul de laboratório, acento ciano etéreo. SVG e PNG transparente em 1x/2x/4x.
Aetherlab Ficha de personagem
12 elementos de ficha e atributos (magitech) para interfaces em modo escuro — azul de laboratório, acento ciano etéreo. SVG e PNG transparente em 1x/2x/4x.
Aetherlab Interface de criação
13 elementos de criação e receitas (magitech) para interfaces em modo escuro — azul de laboratório, acento ciano etéreo. SVG e PNG transparente em 1x/2x/4x.