Atlas PNG e JSON grátis

Gerador de atlas de textura

Organize seus quadros em uma grade, faixa horizontal ou vertical e exporte um atlas PNG com JSON genérico ou do Phaser. Os arquivos ficam no seu dispositivo. A ferramenta não faz empacotamento irregular compacto nem rotação.

Selecione imagens PNG, JPG ou WebP para montar uma sprite sheet.

Kenney · Tiny Dungeon · CC0. Oito imagens de exemplo. Limpe-as antes de adicionar suas próprias imagens.

Adicionar quadros

Selecione imagens PNG, JPG ou WebP. Os quadros podem ter tamanhos diferentes.

Configurações da sheet

Disposição

Colunas4

Espaçamento2px

Margem externa2px

Escala100%

Fundo

Salvar ou carregar configurações

Reutilize a disposição sem incluir suas imagens.

Prévia da sprite sheet

Quadros: 0

Formato do download

Adicione quadros para visualizar a sprite sheet.

Use o atlas no seu jogo

Escolha o caminho de importação. Os guias adicionais estão em inglês.

Baixar um exemplo pronto

Um atlas pronto para testar

Estes downloads são um exemplo fixo com oito tiles. Eles não mudam quando você edita a área de trabalho acima.

Oito tiles de origem nomeados

tile_0084.png

tile_0085.png

tile_0086.png

tile_0087.png

tile_0088.png

tile_0089.png

tile_0090.png

tile_0091.png

De tile_0084.png a tile_0091.png, da esquerda para a direita e de cima para baixo.

Atlas PNG exportado

Quadros: 8
Tamanho da célula: 16 × 16
Colunas: 4
Espaçamento: 2px
Margem externa: 2px
Tamanho do PNG: 74 × 38px

Kenney · Tiny Dungeon · CC0. Oito imagens de jogo separadas.

Baixar PNG de exemplo JSON genérico de exemplo JSON do Phaser de exemplo

Detalhes do JSON de exemplo

Coordenadas apenas deste exemplo fixo. x e y indicam a posição do tile no PNG; w e h são seu tamanho em pixels. sourceW e sourceH são as dimensões originais.

name	x	y	w	h	sourceW	sourceH
tile_0084.png	2	2	16	16	16	16
tile_0085.png	20	2	16	16	16	16
tile_0086.png	38	2	16	16	16	16
tile_0087.png	56	2	16	16	16	16
tile_0088.png	2	20	16	16	16	16
tile_0089.png	20	20	16	16	16	16
tile_0090.png	38	20	16	16	16	16
tile_0091.png	56	20	16	16	16	16

Importar no Phaser 3

No editor, escolha Atlas Phaser e exporte. Extraia sprite-sheet.png e sprite-sheet.json para a pasta /assets/ do jogo.

Carregue o Phaser 3 e execute o jogo por um servidor local. Este código usa o primeiro tile de exemplo, tile_0084. Com suas imagens, substitua-o por uma chave exata do JSON exportado.

Ver código de carregamento no Phaser

new Phaser.Game({
  type: Phaser.CANVAS,
  width: 320,
  height: 160,
  pixelArt: true,
  scene: {
    preload() {
      this.load.atlas(
        'dungeon',
        '/assets/sprite-sheet.png',
        '/assets/sprite-sheet.json'
      );
    },
    create() {
      this.add.image(160, 80, 'dungeon', 'tile_0084')
        .setScale(4);
    }
  }
});

Quer usar os arquivos do exemplo pronto?

O exemplo pronto acima usa dungeon-atlas.png e dungeon-atlas.phaser.json. Os nomes dos quadros incluem .png. Use o código abaixo somente com esses arquivos fixos.

Carregue o Phaser 3 na página do jogo primeiro. Mantenha os nomes e coloque os dois arquivos na pasta /samples/site-content/ do seu servidor local ou ajuste os dois caminhos no código. Abra a página pelo servidor, não como arquivo local.

new Phaser.Game({
  type: Phaser.CANVAS,
  width: 320,
  height: 160,
  pixelArt: true,
  scene: {
    preload() {
      this.load.atlas(
        'dungeon',
        '/samples/site-content/dungeon-atlas.png',
        '/samples/site-content/dungeon-atlas.phaser.json'
      );
    },
    create() {
      this.add.image(160, 80, 'dungeon', 'tile_0084.png')
        .setScale(4);
    }
  }
});

O primeiro tile de 16 × 16 aparece com 64 × 64 pixels. São tiles separados, não uma sequência de animação.

Se o atlas não carregar como esperado

PNG ou JSON retorna 404: Confira os dois endereços na aba Rede do navegador. Caminhos que começam com / partem da raiz do servidor. Use PNG e JSON da mesma exportação; ao renomear um arquivo, atualize também o caminho do carregador.
O nome do quadro não existe: Use o JSON do Phaser que veio com o PNG e copie uma chave exata do objeto frames. Os nomes do editor não incluem extensão; o exemplo pronto mantém .png. O JSON genérico contém um array e precisa de um carregador próprio.
Tiles deslocados ou pixels vizinhos: Neste atlas, deixe load.atlas ler os retângulos exportados. O carregador de grade fixa precisa de margin e spacing correspondentes. Os espaços separam quadros, mas não repetem pixels das bordas.

Guia oficial do Phaser: carregar imagens e atlas (em inglês)

Escolha o download certo

O atlas Phaser reúne PNG e JSON no formato TexturePacker hash em um ZIP. O atlas genérico usa um array de quadros para carregadores próprios. Para Unity ou Godot, escolha PNG e recorte a sheet na engine.

Organização em grade ou faixa

Organize imagens PNG, JPG ou WebP ou extraia quadros no modo GIF. Ajuste espaçamento, margem e escala antes de exportar. Não há rotação, remoção de bordas transparentes, múltiplas texturas ou criação de recursos nativos da engine.

Posso exportar metadados de atlas JSON?

Sim. Selecione atlas Phaser ou genérico no formato do download. Ambos geram um ZIP com a sheet PNG e o JSON correspondente.

Substitui um empacotador de texturas avançado?

A proposta é um fluxo rápido no navegador para organizar quadros nomeados em PNG com JSON. Recursos avançados de programas de desktop, como múltiplas texturas e rotação, não estão disponíveis.

As imagens do atlas são enviadas a um servidor?

Não. Leitura, organização, prévia e exportação acontecem localmente no navegador.

Qual é a diferença entre texture atlas e sprite sheet?

Os termos se sobrepõem. Um atlas costuma incluir metadados que associam nomes a retângulos; uma sprite sheet costuma ser recortada por uma grade fixa. Aqui você organiza uma grade e pode exportar JSON com o retângulo de cada quadro.

Quais engines usam este JSON?

O Phaser pode carregar o formato atlas Phaser. O JSON genérico precisa de um carregador próprio. No Unity e Godot, use o PNG com recorte na engine.

O manifesto do download de IA é um atlas JSON?

Não. O manifesto descreve o pacote gerado. O editor no navegador exporta metadados genéricos ou do Phaser separados, com posições e dimensões dos quadros. Escolha o formato esperado pelo carregador.

Ferramentas para trabalhar com sprite sheets

Converter GIF em sprite sheet

Converta um GIF em sprite sheet no navegador. Extraia quadros na ordem, confira o tempo de reprodução e exporte PNG, ZIP ou atlas JSON.

Recortar e separar sprite sheet

Separe uma sprite sheet em quadros por linhas e colunas ou por dimensões fixas, diretamente no navegador.