2d Games Assets Generator

2d-assets-mcp

Projete a sensação do seu jogo antes de projetar sua arte.

Assim como o wireframing ajuda designers a visualizar fluxos de usuário antes de começar a esboçar, o 2d-assets-mcp ajuda desenvolvedores de jogos a visualizar timing, quadros por segundo (FPS), limites de colisão e layouts de UI antes de gastar horas na arte final.

Este servidor MCP (Model Context Protocol) permite que qualquer assistente de IA (Antigravity, Claude Code, Codex, Devin, ou qualquer outro, desde que seja compatível com MCP) gere assets 2D avançados de mockup/placeholder em formato PNG diretamente na sua pasta de projeto. Economize tempo e prototipe mais rápido, acerte a sensação do seu jogo com 2d-assets-mcp e depois substitua os mockups pela arte original quando estiver pronto.

Este MCP é agnóstico de engine e funciona perfeitamente com qualquer engine de jogo que suporte importação de PNG, como:

• Godot
• Unity
• Unreal Engine
• GameMaker
• Construct
• RPG Maker
• E muitos outros!

Economize tempo e crie barras de vida placeholder, spritesheets e quaisquer elementos de UI que você imaginar, com suporte completo para gradientes, padrões, transparência, rotação de texto e redimensionamento automático, tudo via chat e sem nunca abrir um editor de imagens. A ideia por trás disso é ajudar você a testar e iterar a sensação do seu jogo primeiro, prototipando escala, arcos de pulo e timing de animação sem esperar pelos assets de arte finais, e também com zero atrito: Precisa que aquele botão placeholder seja 20% maior? Basta pedir ao seu cliente de IA para regenerá-lo.

[!TIP] O 2d-assets-mcp possui Metadados Amigáveis para IA → ou seja, cada PNG gerado incorpora metadados JSON ricos (dimensões, cor, forma, propriedades de gradiente, detalhes de padrão, propriedades de texto, propriedades de traço, descrição) diretamente nos dados EXIF, para que modelos de IA sem visão ainda possam entender o que um asset contém.

Exemplos de Assets Gerados

Aqui estão alguns exemplos de assets gerados por este servidor MCP:

Sprites e Animações de Personagem

Animação de Herói Parado (8 quadros, 512x64)

Spritesheet de animação de 8 quadros de herói parado com efeito

Elementos de UI

Botão de Ataque (128×48)

Botão com gradiente vermelho, cantos arredondados e rótulo "ATTACK"

Barra de Vida (200×24)

Barra de vida com 75% de preenchimento, cor verde e trilho cinza escuro

Itens do Jogo

Moeda de Ouro (32×32)

Moeda circular com gradiente radial, sobreposição de padrão de pontos e rótulo "COIN"

Grama e água

Árvores

Spritesheets de Animação

Animação de fogo (4 quadros, 192x48)

Spritesheet de 4 quadros

Considerações de Segurança

Conteúdo dos Assets

• Os assets gerados são gráficos placeholder puros e não contêm código malicioso.
• Os metadados incorporados são JSON simples e não são executáveis.

Como este servidor MCP grava arquivos diretamente na sua máquina para economizar tempo, revise estas práticas recomendadas de segurança:

Acesso ao Sistema de Arquivos

• O servidor pode gravar arquivos em qualquer caminho especificado pelo assistente de IA.
• Recomendação: Configure seu cliente de IA para restringir o acesso estritamente aos diretórios do projeto do seu jogo.
• Aviso: Tenha cautela ao pedir que a IA gere assets fora do diretório do seu projeto.

Travessia de Caminho (Path Traversal)

• Este servidor valida caminhos, mas você deve estar sempre ciente de possíveis tentativas de travessia de caminho ao lidar com servidores MCP e revisar os caminhos de arquivo gerados antes de confirmar operações.

Práticas Recomendadas Gerais

• Use caminhos absolutos nas configurações para evitar ambiguidade.
• Restrinja o acesso da IA apenas ao diretório do projeto do seu jogo.
• Revise os assets gerados antes de fazer commit no controle de versão.
• Mantenha suas dependências do Node.js atualizadas.

Recursos Principais

• Geração instantânea de assets: uma chamada de ferramenta, um PNG, configuração visual completa.
• Modo Spritesheet & Lote: gere múltiplos quadros ou combine-os em um único spritesheet de tira de animação em uma única solicitação.
• Visuais ricos: suporte para preenchimentos sólidos, gradientes lineares/radiais, sobreposições de padrão listrado/pontilhado/grid, cantos arredondados, círculos, opacidade e controle de traço.
• Elementos de UI dinâmicos: crie barras de progresso/vida parcialmente preenchidas usando fillPercent e trackColor para assets parcialmente preenchidos.
• Rótulos com redimensionamento automático: o texto é dimensionado automaticamente para caber no asset, ou você pode substituí-lo com fontSize explícito se necessário.
• Amigável para IA sem visão: metadados JSON incorporados e legíveis via read_image_metadata, sem carregar pixels de imagem, ideal para fluxos de trabalho de IA sem visão.
• Nomenclatura inteligente: os arquivos de saída são nomeados automaticamente com suas dimensões (ex.: player_idle_128x128.png) para ajudar modelos sem visão a saberem as dimensões ao usar o asset.

Referência de Ferramentas

Este servidor MCP equipa sua IA com 3 ferramentas para gerar e ler metadados de assets 2D.

1. generate_mock_asset

Gera um único asset PNG e o grava no disco. Suporta gradientes, padrões, transparência, rotação de texto e metadados incorporados.

[!NOTE] Formato do nome do arquivo de saída

O servidor anexa automaticamente as dimensões ao nome do arquivo antes de gravar:

player_idle.png  →  player_idle_128x128.png

2. generate_mock_asset_batch

Gera múltiplos assets em uma única solicitação. Suporta PNGs individuais ou um único spritesheet composto.

[!NOTE] Layout do spritesheet

Todos os assets são organizados em uma única linha (tira de animação tradicional). Cada célula de quadro é dimensionada para o maior asset do lote; assets menores são centralizados dentro de sua célula. O nome do arquivo de saída inclui as dimensões totais da folha:

player_run.png  →  player_run_648x136.png

3. read_image_metadata

Lê os metadados JSON incorporados no campo EXIF ImageDescription de qualquer PNG gerado por este servidor. Útil para modelos de IA sem visão, pois eles podem entender o que um asset contém sem decodificar a imagem.

Como funciona a incorporação de metadados

Os metadados são armazenados como uma string JSON no campo EXIF IFD0.ImageDescription do PNG usando a API withMetadata da biblioteca sharp.

A leitura usa uma alternativa deliberada à varredura padrão de bytes TIFF: em vez de analisar a estrutura binária TIFF, o buffer EXIF bruto é escaneado como uma string UTF-8 em busca da chave conhecida "generator":"2d-assets-mcp", e então o objeto JSON ao redor é extraído. Isso torna o leitor imune a preenchimento TIFF, variações de ordem de bytes e layouts IFD incomuns em diferentes gravadores 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"
}

Exemplos de Prompts para Sua IA

Depois de conectado a um assistente de codificação de IA, experimente estes prompts para agilizar seu fluxo de trabalho:

Asset único

"Crie um placeholder de retângulo arredondado azul de 128×128 para meu personagem do jogador em C:\Users\me\project\assets\sprites\ (Windows) ou /home/me/project/assets/sprites/ (Linux) ou /Users/me/project/assets/sprites/ (macOS). Rotule-o como 'Player' e dê a ele um gradiente radial."

Barra de vida

"Gere um PNG de barra de vida com 200×24 pixels, preenchida em 65%, traço fino, cor de preenchimento vermelha, trilho cinza escuro, na pasta de UI do seu projeto. Nomeie o arquivo como health_bar.png."

Spritesheet

"Crie um spritesheet de ciclo de corrida com 4 quadros para meu jogador. Cada quadro deve ter 64×64, tons diferentes de azul, rotulados de Quadro 1 a Quadro 4. Salve-o na pasta de sprites do meu projeto."

Ler metadados

"Leia os metadados da pasta de sprites do meu projeto, arquivo player_idle_128x128.png."

Instalação

Opção 1: Usar diretamente com npx (sem necessidade de instalação)

A maneira mais rápida de conectá-lo a qualquer assistente de codificação de IA:

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

Opção 2: Instalação manual com gerenciador de pacotes (pnpm, npm, yarn)

1. Clone o repositório

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

2. Instale as dependências

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

3. Compile o projeto

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

4. Configure seu cliente MCP

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

Opção 3: Instalação global com pnpm ou npm

Este projeto funciona com qualquer gerenciador de pacotes Node.js. Escolha o de sua preferência:

npm

npm install -g 2d-assets-mcp

pnpm

pnpm add -g 2d-assets-mcp

Em seguida, referencie o binário instalado:

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

Claude Code / Claude Desktop

Adicione às configurações MCP do seu Claude Code/Claude Desktop:

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

Devin

Adicione às configurações MCP do seu Devin (mcp_config.json):

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

Cursor

Crie .cursor/mcp.json no seu projeto:

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

Desenvolvimento

Pré-requisitos

• Node.js 18 ou posterior
• pnpm 8 ou posterior ou npm 9 ou posterior (qualquer gerenciador de pacotes funciona)

Configuração

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

Adicionando uma nova ferramenta

1. Crie src/tools/yourTool.ts e exporte uma função registerYourTool(server: McpServer)
2. Importe e chame-a em src/server.ts
3. Adicione quaisquer novos esquemas Zod a src/schemas.ts e tipos a src/types.ts

Licença

MIT — veja LICENSE para o texto completo.

Contribuição

Issues e pull requests são sempre bem-vindos. Apenas, por favor, antes de abrir um PR, certifique-se de:

1. Execute pnpm run check ou npm run check (zero erros exigidos).
2. Mantenha novas ferramentas em seu próprio arquivo em src/tools/.
3. Exporte novos tipos de src/types.ts e esquemas de src/schemas.ts.
4. Atualize a seção Referência de Ferramentas deste README para quaisquer parâmetros novos ou alterados.