Packs de interfaz

Sandbox Casillas de inventario — rejilla de 56px

56×56 casillas de inventario en arena cálida: estados vacía, hover, seleccionada y bloqueada más tres marcos de rareza. SVG y PNG transparente.

  • ui
  • svg
  • png transparente
  • inventario
  • casilla de inventario
  • marco de objeto
  • rareza
  • rejilla
  • vóxel
  • interfaz clara
  • construcción
  • sandbox
Una fila de casillas de inventario cuadradas sobre fondo de damero que muestra los estados vacía, hover, seleccionada con marcas en las esquinas y bloqueada con rayado diagonal, seguida de marcos de rareza en color y una rejilla de ocho casillas
vista previa 1600×629la transparencia se muestra como damero

Sobre este pack

Casillas de inventario a 56px, lo bastante apretadas para una barra rápida completa y una rejilla de nueve por nueve en la misma pantalla. La cara frontal extruida es lo que hace que una casilla llena parezca llena, y eso importa aquí más que en ningún sitio porque todo el juego consiste en mover objetos entre ellas.

Una rejilla de inventario no necesita un panel, necesita un cuadrado que repita: 7 archivos de 56×56, todos con los mismos límites exteriores, para que una fila encaje sin cuentas de separación. Sepáralas 60 px y los bordes se leen como una sola rejilla en vez de como una fila de cajas sueltas.

Los estados están dibujados como estructura, no como color. La casilla seleccionada recibe marcas en las esquinas, la bloqueada un rayado diagonal y la de hover sube su borde un escalón. Es deliberado: la pantalla de inventario es la superficie más ruidosa de casi cualquier juego, se apoya bajo arte de objetos de todos los matices a la vez, y un estado que es solo un color de borde se vuelve invisible en cuanto hay una espada roja en la casilla.

Los tres marcos de rareza reutilizan los colores de vida, maná y aguante del resto de la familia, cada uno con una marca en la esquina además del borde de color — así que quien ordena por rareza está leyendo dos señales, y ninguna compite con el arte del objeto en el centro de la casilla.

Todo se incluye como SVG editable y como PNG plano transparente en 1x, 2x y 4x. Los interiores de las casillas son transparentes, así que lo que renderices detrás de la rejilla se ve a través en vez de un color de fondo horneado.

Descarga

Enlace directo · sin registro · sin página de espera
Descargar ZIP15 kB

Conjunto completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readme

Archivos incluidos en este pack
ArchivoFormatoPesoDescarga
Conjunto completo — fuentes SVG, exportados PNG en 1x/2x/4x, licencia y readmeZIP15 kB Obtener →
Casilla vacía, SVG editableSVG502 B Obtener →
Casilla seleccionada con marcas en las esquinas, SVG editableSVG961 B Obtener →

Cómo se usa

  1. Coloca las casillas con un paso de 60 px — el sprite de 56 px más 4 px de separación — y los bordes quedarán a un píxel en vez de duplicarse.
  2. Dibuja el icono del objeto centrado en la casilla a unos 39 px; el hueco interior es de 50 px, así que cualquier cosa mayor toca el borde y se come el marco.
  3. Cambia el sprite entero de la casilla para los estados seleccionada y bloqueada en vez de superponer un tinte, porque las marcas de esquina y el rayado forman parte del sprite.
  4. Los marcos de rareza sustituyen directamente a la casilla vacía — mismos límites, mismo hueco — así que un cambio de rareza es un solo cambio de textura sin tocar el layout.

Licencia

Creative Commons Zero 1.0 — Dominio público. Sin atribución. Términos completos · Qué significa en la práctica