Packs de interface

Sandbox Células de inventário — grade de 56px

13 espaços de inventário areia quente de 56×56: vazio, hover, selecionado, travado, negado, destino; equipamento redondo e hexagonal, hotbar, três molduras de raridade.

  • ui
  • svg
  • png transparente
  • inventário
  • célula de inventário
  • moldura de item
  • raridade
  • grade
  • voxel
  • interface clara
  • construção
  • sandbox
Uma fileira de células de inventário quadradas sobre fundo xadrez mostrando os estados vazia, hover, selecionada com marcas nos cantos e bloqueada com hachura diagonal, seguida de molduras de raridade coloridas e de uma grade de oito células
prévia 1600×629a transparência aparece como xadrez

Sobre este pack

Células de inventário de 56px, apertadas o bastante para uma barra rápida completa e uma grade de nove por nove na mesma tela. A face frontal extrudada é o que faz uma célula cheia parecer cheia, e isso importa aqui mais que em qualquer lugar porque o jogo inteiro consiste em mover itens entre elas.

Uma grade de inventário não precisa de um painel, precisa de um quadrado que ladrilhe. Cada espaço aqui é 56×56 com os mesmos limites externos — a única exceção é o espaço de duas células para itens grandes, de 112×56, 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 60 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 vida, mana e vigor 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 espera
Baixar ZIP29 kB

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

Arquivos inclusos neste pack
ArquivoFormatoPesoDownload
Conjunto completo — fontes SVG, exportações PNG em 1x/2x/4x, licença e readmeZIP29 kB Obter →
Célula vazia, SVG editávelSVG502 B Obter →
Célula selecionada com marcas nos cantos, SVG editávelSVG961 B Obter →

Como usar

  1. Disponha as células com um passo de 60 px — o sprite de 56 px mais 4 px de espaço — e as bordas ficarão a um pixel de distância em vez de dobrarem.
  2. Desenhe o ícone do item centralizado na célula com cerca de 39 px; o recesso interno tem 50 px, então qualquer coisa maior toca a borda e engole a moldura.
  3. 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.
  4. 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.

Licença

Creative Commons Zero 1.0 — Domínio público. Sem atribuição. Termos completos · O que isso significa na prática