Como posso verificar rapidamente se meus sprites estão bem?

47

Estou tentando criar sprites de tilemap que se encaixam perfeitamente, mas verificar o quão bem eles são realmente complicados.

Idealmente, eu gostaria de ter um editor de imagens que mostre um layout como este, para que eu possa ver se ele funciona bem sem uma verificação manual:

     [img]
[img][img][img]
     [img]

Quais programas podem fazer isso ou como posso facilitar isso?

sprites tilemap tools workflow user73424
fonte
Eu acho que você está falando sobre verificar se o lado a lado da textura funciona perfeitamente. E gimp, pelo menos que eu saiba, tem um render-> map ou alguma função que faça isso. mas não durante a edição. Caso contrário, wally tem esse recurso, mas é muito velho. (editor de textura de meia-vida)
v.oddou 16/10/2015
1
O amnoid.de/ddsview suporta a visualização em mosaico de muitos formatos de imagem. E qual editor de imagens você está usando? Tenho certeza de que existe uma maneira de colocar uma imagem em mosaico.
precisa saber é o seguinte
1
Qual editor você está usando? Deve ser possível cortar alguma coisa em conjunto, utilizando objetos inteligentes Photoshops
PlasmaHH
4
Defina-o como plano de fundo da área de trabalho e escolha a opção "Lado a lado".
usar o seguinte comando
"Que programas podem fazer isso" Krita pode fazer isso e ainda permite que você ofegar enquanto envolto (veja resposta abaixo)
darkflame

Respostas:

67

Aqui está um truque rápido que funciona com qualquer editor de imagens.

Se a sua imagem de bloco for chamada tile.png, crie um exemplo index.htmlcomo este:

<body style="background:url(tile.png) repeat 0 0"></body>

(Obrigado @Deryllium pela alternativa mais simples!)

Abra isso em um navegador da web.

Sempre que precisar verificar a qualidade da imagem, salve-a e atualize o navegador da web.

o fluxo de trabalho

O atalho de exportação do GIMP é Ctrlee o atalho de atualização do Chromium é . O e são adjacentes em um QWERTY, então isso é bem rápido de fazer.Ctrlrer

Anko
fonte
10
Muito inventivo! Você também pode simplificar o HTML usando<body style="background: url(tile.jpg) repeat 0 0;">
driima
15
Você também pode adicionar <header> <meta http-equiv = "Atualizar" content = "2"> </header> antes do <body> para fazer a página carregar automaticamente a cada 2 segundos.
Shivan Dragão
7
Ou, se você fosse tão inclinado, poderia ir mais fundo e configurar uma ferramenta como grunhir ou engolir para observar as alterações e recarregar o navegador ao vivo quando você as fizer.
Seiyria
1
O @Kroltan ddsview tem uma "exibição em bloco" dedicada. A ferramenta de preenchimento do GIMP pode ler da área de transferência, o que também é rápido de testar.
Anko16 /
2
@ Anko True, mas meu argumento era para uma visualização em mosaico real, editável e totalmente funcional. Essas ferramentas tornam mais rápido, mas não um processo contínuo (trocadilho não intencional).
Kroltan
18

Usando o photoshop ou o GIMP, você pode usar o comando offset. Se você está trabalhando para, digamos, uma imagem de 100x100px, é possível compensá-la em 50px em cada direção, e a costura na qual a imagem é montada é exibida no meio da imagem.

Esta página possui capturas de tela demonstrando como isso funciona: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

fabspro
fonte
2
Como um bônus adicional, agora a costura está bem no meio da imagem, para edição rápida e fácil!
Cort Ammon
17

O Krita possui um recurso que permite editar texturas lado a lado e ver as alterações atualizadas ao vivo. Pressionando a tecla W, ele ativa o modo de quebra automática, o que torna isso possível. Um vídeo do youtube desse recurso em ação está disponível aqui . (o recurso está ativado em 0:12)

KritaUser00402050
fonte
2
Isso merece mais votos. É um pouco de software que faz exatamente o que é pedido com um simples toque de botão. Melhor ainda, ele também permite que sua pintura seja envolvida - o que quase certamente ajudará quem faz texturas perfeitas. Você também deve apontar que o Krita é gratuito e pode ser baixado; krita.org/download/krita-desktop
darkflame
1
+1 Se alguém tiver a mesma pergunta, esta é a primeira resposta que deverá ver. "Quais programas podem fazer isso?" "Krita".
perfil completo de Jibb Smart
6

Faça do seu ladrilho um papel de parede lado a lado na sua área de trabalho. Software super fácil e sem codificação ou software estranho.

Jam Roll
fonte
2
+1 Isso funciona espetacularmente bem no Linux com a inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; doneexecução. Apenas salve a imagem; o papel de parede muda imediatamente. Também funciona com vários arquivos especificados além de tile.png. Quando não preciso de tela cheia, isso arrasa.
Anko
5

Se você quiser testar várias imagens, pode ser útil ter um mini webapp com base na resposta da Anko. Isso permitirá que você arraste imagens para a página para testá-las em rápida sucessão:

window.addEventListener('load', function() {
  document.body.addEventListener('dragover', function(event) {
    // Accept the drag
    event.preventDefault();
  });

  document.body.addEventListener('drop', function(event) {
    // Prevent page redirect
    event.stopPropagation();
    event.preventDefault();

    var reader = new FileReader();

    reader.onload = function(e) {
      // Set background image
      document.body.style.background = 'url(' + e.target.result + ') repeat 0 0';
      document.body.textContent = ''; // Remove instructions
    };

    // Begin reading file
    reader.readAsDataURL(event.dataTransfer.files[0]);
  });
});
html, body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

html {
  border: 2px dashed black;
}

body {
  padding: 10px;
}
<p>Drag an image here</p>
Expandir snippet

aebabis
fonte
1
Outra resposta muito intuitiva. Você pode criar uma extensão chrome ou criar um aplicativo de desktop Node.js / Electron usando isso.
Driima 18/10/2015
0

No GIMP: Filtros -> Mapa -> Mosaico. Se você alterar a unidade para "%" e inserir 300% x 300% para as dimensões, obterá uma imagem 3x3 da imagem, permitindo ver facilmente as quatro arestas. Depois de fazer isso uma vez, você pode usar Ctrl-F (repetir o último filtro) para refazer a montagem após fazer as modificações, desde que você não use nenhum outro filtro, é claro.

hobbs
fonte