2d Games Assets Generator

2d-assets-mcp

Diseña la sensación de tu juego antes de diseñar su arte.

Así como el wireframing ayuda a los diseñadores a visualizar los flujos de usuario antes de empezar a dibujar, 2d-assets-mcp ayuda a los desarrolladores de juegos a visualizar el tiempo, los fotogramas por segundo (FPS), los límites de colisión y los diseños de UI antes de dedicar horas al arte final.

Este servidor MCP (Model Context Protocol) permite que cualquier asistente de IA (Antigravity, Claude Code, Codex, Devin, o cualquiera de ellos siempre que sea compatible con MCP) genere assets 2D avanzados de maqueta/placeholder en formato PNG directamente en tu carpeta de proyecto. Ahorra tiempo y prototipa más rápido, define la sensación de tu juego con 2d-assets-mcp, y luego reemplaza las maquetas con arte original cuando estés listo.

Este MCP es independiente del motor y funciona perfectamente con cualquier motor de juego que admita importación de PNG, como:

• Godot
• Unity
• Unreal Engine
• GameMaker
• Construct
• RPG Maker
• ¡Y muchos más!

Ahorra tiempo y crea barras de salud placeholder, hojas de sprites y cualquier elemento de UI que puedas imaginar con soporte completo para degradados, patrones, transparencia, rotación de texto y autoescalado, todo mediante chat y sin abrir nunca un editor de imágenes. La idea detrás de esto es ayudarte a probar e iterar primero cómo se siente tu juego, prototipando escala, arcos de salto y tiempos de animación sin esperar los assets de arte finales, y también con cero fricción: ¿Necesitas que ese botón placeholder sea un 20% más grande? Solo pídele a tu cliente de IA que lo regenere.

[!TIP] 2d-assets-mcp tiene Metadatos Compatibles con IA → lo que significa que cada PNG generado incrusta metadatos JSON enriquecidos (dimensiones, color, forma, propiedades de degradado, detalles de patrón, propiedades de texto, propiedades de trazo, descripción) directamente en sus datos EXIF, para que los modelos de IA sin visión aún puedan entender qué contiene un asset.

Ejemplos de Assets Generados

Aquí hay algunos ejemplos de assets generados por este servidor MCP:

Sprites y Animaciones de Personajes

Animación de Inactividad del Héroe (8 fotogramas, 512x64)

Hoja de sprites de animación de inactividad de 8 fotogramas con efecto

Elementos de UI

Botón de Ataque (128×48)

Botón con degradado rojo, esquinas redondeadas y etiqueta "ATTACK"

Barra de Salud (200×24)

Barra de salud al 75% de relleno con color verde y pista gris oscuro

Objetos del Juego

Moneda de Oro (32×32)

Moneda circular con degradado radial, superposición de patrón de puntos y etiqueta "COIN"

Césped y agua

Árboles

Hojas de Sprites de Animación

Animación de Fuego (4 fotogramas, 192x48)

Hoja de sprites de 4 fotogramas

Consideraciones de Seguridad

Contenido de los Assets

• Los assets generados son gráficos placeholder puros y no contienen código malicioso.
• Los metadatos incrustados son JSON plano y no son ejecutables.

Debido a que este servidor MCP escribe archivos directamente en tu máquina para ahorrarte tiempo, revisa estas mejores prácticas de seguridad:

Acceso al Sistema de Archivos

• El servidor puede escribir archivos en cualquier ruta especificada por el asistente de IA.
• Recomendación: Configura tu cliente de IA para restringir el acceso estrictamente a los directorios del proyecto de tu juego.
• Advertencia: Ten precaución al pedirle a la IA que genere assets fuera del directorio de tu proyecto.

Recorrido de Rutas

• Este servidor valida rutas, pero siempre debes estar atento a posibles intentos de recorrido de rutas al trabajar con servidores MCP, y revisar las rutas de archivos generadas antes de confirmar operaciones.

Mejores Prácticas Generales

• Usa rutas absolutas en las configuraciones para evitar ambigüedad.
• Restringe el acceso de la IA solo al directorio del proyecto de tu juego.
• Revisa los assets generados antes de confirmarlos en el control de versiones.
• Mantén actualizadas tus dependencias de Node.js.

Características Principales

• Generación instantánea de assets: una llamada de herramienta, un PNG, configuración visual completa.
• Modo Spritesheet y Lote: genera múltiples fotogramas o compónlos en una única hoja de sprites de tira de animación en una sola solicitud.
• Visuales enriquecidos: soporte para rellenos sólidos, degradados lineales/radiales, superposiciones de patrones de rayas/puntos/cuadrícula, esquinas redondeadas, círculos, opacidad y control de trazo.
• Elementos de UI dinámicos: crea barras de progreso/salud parcialmente rellenas usando fillPercent y trackColor para assets parcialmente rellenos.
• Etiquetas con autoescalado: el texto se escala automáticamente para ajustarse al asset, o puedes anularlo con fontSize explícito si es necesario.
• Amigable con IA sin visión: metadatos JSON incrustados legibles mediante read_image_metadata, sin cargar píxeles de imagen, ideal para flujos de trabajo de IA sin visión.
• Nombrado inteligente: los archivos de salida se nombran automáticamente con sus dimensiones (p. ej. player_idle_128x128.png) para ayudar a los modelos sin visión a conocer las dimensiones al usar el asset.

Referencia de Herramientas

Este servidor MCP equipa a tu IA con 3 herramientas para generar y leer metadatos de assets 2D.

1. generate_mock_asset

Genera un único asset PNG y lo escribe en el disco. Admite degradados, patrones, transparencia, rotación de texto y metadatos incrustados.

[!NOTE] Formato del nombre de archivo de salida

El servidor añade automáticamente las dimensiones al nombre del archivo antes de escribirlo:

player_idle.png  →  player_idle_128x128.png

2. generate_mock_asset_batch

Genera múltiples assets en una sola solicitud. Admite PNG individuales o una única hoja de sprites compuesta.

[!NOTE] Diseño de la hoja de sprites

Todos los assets se organizan en una sola fila (tira de animación tradicional). Cada celda de fotograma se dimensiona según el asset más grande del lote; los assets más pequeños se centran dentro de su celda. El nombre del archivo de salida incluye las dimensiones totales de la hoja:

player_run.png  →  player_run_648x136.png

3. read_image_metadata

Lee los metadatos JSON incrustados en el campo EXIF ImageDescription de cualquier PNG generado por este servidor. Útil para modelos de IA sin capacidades visuales, ya que pueden entender qué contiene un asset sin decodificar la imagen.

Cómo funciona la incrustación de metadatos

Los metadatos se almacenan como una cadena JSON en el campo EXIF IFD0.ImageDescription del PNG utilizando la API withMetadata de la librería sharp.

Para leerlos se utiliza un bypass deliberado del recorrido estándar de bytes TIFF: en lugar de analizar la estructura binaria TIFF, el buffer EXIF crudo se escanea como una cadena UTF-8 buscando la clave conocida "generator":"2d-assets-mcp", y luego se extrae el objeto JSON circundante. Esto hace que el lector sea inmune al relleno TIFF, las variaciones de orden de bytes y los diseños IFD inusuales en diferentes escritores de PNG.

{
  "generator": "2d-assets-mcp",
  "type": "asset",
  "name": "player_idle",
  "width": 128,
  "height": 128,
  "color": "#4A90E2",
  "shape": "rounded-rectangle",
  "fillMode": "linear-gradient",
  "fillPercent": 100,
  "trackColor": null,
  "pattern": "none",
  "secondaryColor": "#2E5A8A",
  "gradientAngle": 45,
  "textRotation": 0,
  "textPosition": "center",
  "strokeColor": "#000000",
  "strokeWidth": 4,
  "description": "Player idle placeholder, blue rounded rectangle 128x128",
  "createdAt": "2025-01-15T10:30:00.000Z"
}

{
  "generator": "2d-assets-mcp",
  "type": "spritesheet",
  "totalWidth": 648,
  "totalHeight": 136,
  "columns": 4,
  "rows": 1,
  "frameCount": 4,
  "frameWidth": 128,
  "frameHeight": 128,
  "margin": 8,
  "spacing": 8,
  "frames": [
    {
      "index": 0,
      "x": 8,
      "y": 8,
      "width": 128,
      "height": 128,
      "name": "frame_0",
      "color": "#4A90E2",
      "shape": "rounded-rectangle"
    }
  ],
  "createdAt": "2025-01-15T10:30:00.000Z"
}

Ejemplos de Prompts para tu IA

Una vez conectado a un asistente de codificación con IA, prueba estos prompts para acelerar tu flujo de trabajo:

Asset individual

"Crea un placeholder de rectángulo redondeado azul de 128×128 para mi personaje jugador en C:\Users\me\project\assets\sprites\ (Windows) o /home/me/project/assets/sprites/ (Linux) o /Users/me/project/assets/sprites/ (macOS). Etiquétalo como 'Player' y dale un gradiente radial."

Barra de salud

"Genera un PNG de barra de salud de 200×24 píxeles, lleno al 65%, trazo fino, color de relleno rojo, pista gris oscuro, en la carpeta de UI de tu proyecto. Llama al archivo health_bar.png."

Hoja de sprites

"Crea una hoja de sprites de ciclo de carrera de 4 fotogramas para mi jugador. Cada fotograma debe ser de 64×64, con diferentes tonos de azul, etiquetados del Fotograma 1 al Fotograma 4. Guárdala en la carpeta de sprites de mi proyecto."

Leer metadatos

"Lee los metadatos de la carpeta de sprites de mi proyecto, archivo player_idle_128x128.png."

Instalación

Opción 1: Usar directamente con npx (sin instalación requerida)

La forma más rápida de conectarlo a cualquier asistente de codificación con IA:

{
  "mcpServers": {
    "2d-assets": {
      "command": "npx",
      "args": ["-y", "2d-assets-mcp"]
    }
  }
}

Opción 2: Instalación manual con gestor de paquetes (pnpm, npm, yarn)

1. Clonar el repositorio

git clone https://github.com/crony-io/2d-assets-mcp.git
cd 2d-assets-mcp

2. Instalar dependencias

pnpm install   # recommended
# or: npm install
# or: yarn install

3. Compilar el proyecto

pnpm run build
# or: npm run build
# or: yarn run build

4. Configurar tu cliente MCP

{
  "mcpServers": {
    "2d-assets-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/2d-assets-mcp/dist/index.js"]
    }
  }
}

Opción 3: Instalar globalmente con pnpm o npm

Este proyecto funciona con cualquier gestor de paquetes de Node.js. Elige el que prefieras:

npm

npm install -g 2d-assets-mcp

pnpm

pnpm add -g 2d-assets-mcp

Luego referencia el binario instalado:

{
  "mcpServers": {
    "2d-assets": {
      "command": "2d-assets-mcp"
    }
  }
}

Claude Code / Claude Desktop

Añade a la configuración MCP de Claude Code/Claude Desktop:

{
  "mcpServers": {
    "2d-assets-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/2d-assets-mcp/dist/index.js"]
    }
  }
}

Devin

Añade a la configuración MCP de Devin (mcp_config.json):

{
  "mcpServers": {
    "2d-assets-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/2d-assets-mcp/dist/index.js"],
      "disabled": false
    }
  }
}

Cursor

Crea .cursor/mcp.json en tu proyecto:

{
  "mcpServers": {
    "2d-assets-mcp": {
      "command": "node",
      "args": ["/absolute/path/to/2d-assets-mcp/dist/index.js"]
    }
  }
}

Desarrollo

Requisitos previos

• Node.js 18 o posterior
• pnpm 8 o posterior o npm 9 o posterior (cualquier gestor de paquetes funciona)

Configuración

git clone https://github.com/crony-io/2d-assets-mcp.git
cd 2d-assets-mcp
# Choose your package manager:
pnpm install   # recommended
# or
npm install
# or
yarn install

Scripts

Añadir una nueva herramienta

1. Crea src/tools/yourTool.ts y exporta una función registerYourTool(server: McpServer)
2. Impórtala y llámala en src/server.ts
3. Añade cualquier esquema Zod nuevo a src/schemas.ts y tipos a src/types.ts

Licencia

MIT — consulta LICENSE para el texto completo.

Contribuciones

Las incidencias y solicitudes de extracción son siempre bienvenidas. Solo te pedimos que, antes de abrir un PR, te asegures de:

1. Ejecutar pnpm run check o npm run check (cero errores requeridos).
2. Mantener las nuevas herramientas en su propio archivo bajo src/tools/.
3. Exportar nuevos tipos desde src/types.ts y esquemas desde src/schemas.ts.
4. Actualizar la sección Referencia de Herramientas de este README para cualquier parámetro nuevo o modificado.