¿Cómo puedo verificar rápidamente si mi sprite está bien?

47

Estoy tratando de crear sprites de mosaico de mosaicos que se agrupan bien, pero verificar cuán bien se reproducen es realmente engorroso.

Idealmente, me gustaría tener un editor de imágenes que muestre un diseño como este, para poder ver si funciona bien sin una verificación manual:

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

¿Qué programas pueden hacer esto o cómo puedo hacer esto más fácil?

sprites tilemap tools workflow usuario73424
fuente
Creo que estás hablando de verificar si el mosaico de texturas funciona a la perfección. Y gimp, al menos que yo sepa, tiene un render-> map o algo que hace eso. pero no mientras se edita. De lo contrario, Wally tiene esta característica, pero es muy viejo. (editor de texturas de media vida)
v.oddou
1
amnoid.de/ddsview admite la vista previa en mosaico de muchos formatos de imagen. ¿Y qué editor de imágenes estás usando? Estoy seguro de que tiene alguna forma de poner en mosaico una imagen.
serpiente5
1
¿Qué editor estás usando? Debería ser posible hackear algo usando objetos inteligentes de Photoshops
PlasmaHH
44
Configúrelo como fondo de escritorio y elija la opción "Mosaico".
user14146
"Qué programas pueden hacer esto" Krita puede hacer esto e incluso te permite jadear mientras estás envuelto (ver la respuesta a continuación)
darkflame

Respuestas:

67

Aquí hay un truco rápido que funciona con cualquier editor de imágenes.

Si se llama a su imagen de mosaico tile.png, cree una index.htmlsimilar a esta:

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

(¡Gracias @Deryllium por la alternativa más simple!)

Ábrelo en un navegador web.

Siempre que necesite verificar qué tan bien se recubren los mosaicos de imágenes, guárdelos y actualice el navegador web.

el flujo de trabajo

El acceso directo de exportación de GIMP es Ctrley el acceso directo de actualización de Chromium es . Los y son adyacentes en un QWERTY, por lo que es bastante rápido.Ctrlrer

Anko
fuente
10
Muy inventivo! También puede simplificar el HTML usando<body style="background: url(tile.jpg) repeat 0 0;">
driima
15
También puede agregar <header> <meta http-equiv = "Refresh" content = "2"> </header> justo antes del <body> para que la página se cargue automáticamente cada 2 segundos.
Shivan Dragon
77
O, si estaba tan inclinado, podría profundizar y configurar una herramienta como gruñir o tragar para observar los cambios y volver a cargar en vivo el navegador cuando los haga.
Seiyria
1
Según los informes, @Kroltan ddsview tiene una "vista de mosaico" dedicada. La herramienta de relleno de inundación de GIMP puede leer desde el portapapeles, que también es rápido de probar.
Anko
2
@Anko True, pero mi punto era una vista en mosaico real, editable y totalmente funcional. Estas herramientas lo hacen más rápido, pero no es un proceso continuo (juego de palabras involuntario).
Kroltan
18

Usando photoshop o GIMP, puede usar el comando offset. Si está trabajando para decir una imagen de 100x100px, puede compensarla 50px en cada dirección, y la costura donde se juntan los mosaicos de la imagen se mostrará en el medio de la imagen.

Esta página tiene capturas de pantalla que demuestran cómo funciona esto: http://blogs.adobe.com/jkost/2015/01/how-to-create-a-seamless-pattern-tile-in-photoshop.html

fabspro
fuente
2
Como una ventaja adicional, ¡ahora la costura está justo en el medio de la imagen, para una edición rápida y fácil!
Cort Ammon
17

Krita tiene una función que le permite editar texturas de mosaico y ver los cambios actualizados en vivo. Al presionar la tecla W, se activa el modo envolvente, lo que lo hace posible. Un video de YouTube de esta característica en acción está disponible aquí . (la función está habilitada a las 0:12)

KritaUser00402050
fuente
2
Esto merece más votos a favor. Es un poco de software que hace exactamente lo que se le pide con solo presionar un botón. Mejor aún, también permite que su pintura se ajuste, lo que seguramente ayudará a cualquier persona a hacer texturas sin costuras. También debe señalar que Krita es gratis y se puede descargar; krita.org/download/krita-desktop
darkflame
1
+1 Si alguien tiene la misma pregunta, esta es la primera respuesta que debería ver. "¿Qué programas pueden hacer esto?" "Krita".
Jibb Smart
6

Haga de su mosaico un fondo de pantalla en mosaico en su escritorio. Súper fácil y sin codificación o software extraño.

Jam Roll
fuente
2
+1 Esto funciona espectacularmente bien en Linux con inotifywait -m -e modify --format '%w' tile.png | while read file; do feh --bg-tile "$file"; doneejecución. Solo guarda la imagen; El fondo de pantalla cambia de inmediato. También funciona con múltiples archivos especificados además de tile.png. Cuando no necesito pantalla completa, esto es genial.
Anko
5

Si desea probar varias imágenes, puede ser útil tener una mini aplicación web basada en la respuesta de Anko. Esto te permitirá arrastrar imágenes a la página para que puedas probarlas en rápida sucesión:

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 fragmento

aebabis
fuente
1
Otra respuesta muy intuitiva. Puede crear una extensión de Chrome o crear una aplicación de escritorio Node.js / Electron usando esto.
driima
0

En GIMP: Filtros -> Mapa -> Mosaico. Si cambia la unidad a "%" y luego ingresa 300% x 300% para las dimensiones, obtendrá un mosaico de 3x3 de su imagen, que le permite ver los cuatro bordes fácilmente. Después de hacerlo una vez, puede usar Ctrl-F (repetir el último filtro) para volver a hacer el mosaico después de realizar modificaciones, siempre que no use ningún otro filtro, por supuesto.

hobbs
fuente