¿Cómo puedo diseñar buenos mosaicos continuos (sin costura)?


33

Tengo problemas para diseñar mosaicos para que, cuando se ensamblen, no se vean como mosaicos, sino como algo homogéneo. Por ejemplo, vea la imagen a continuación:

ingrese la descripción de la imagen aquí

Aunque la parte principal de la hierba es solo una ficha, no se "ve" la cuadrícula; sabes dónde está si miras con cuidado, pero no es obvio. Mientras que cuando diseño mosaicos, solo puedes ver "oh, cielos, 64 veces el mismo mosaico", como en esta imagen:

ingrese la descripción de la imagen aquí (Tomé esto de otra pregunta de GDSE, lo siento; no sea crítico con el juego, pero demuestra mi punto. Y de todos modos tiene un mejor diseño de mosaico que lo que manejo, de todos modos).

Creo que el problema principal es que los diseño para que sean independientes, no hay unión entre dos mosaicos si se colocan cerrados entre sí. Creo que tener los mosaicos más "continuos" tendría un efecto más suave, pero no puedo lograrlo, me parece demasiado complejo.

Creo que probablemente sea más simple de lo que creo una vez que sepas cómo hacerlo, pero no pude encontrar un tutorial sobre ese punto específico. ¿Existe un método conocido para diseñar baldosas continuas / homogéneas? (Mi terminología puede estar totalmente equivocada, no dude en corregirme).


Vale la pena señalar: en la captura de pantalla que vinculó puede haber 2 o más mosaicos de hierba que aparecen en un patrón de tablero de ajedrez. Chrono trigger tiene una variedad de azulejos de hierba .
doppelgreener

1
También sugiero hacer una búsqueda rápida de los juegos de fichas RPG Maker . No son mosaicos de primera línea, pero puede ver algunos ejemplos de mosaicos de transición.
Mike Cluck

Una cosa que podría ayudarlo, aparte de las respuestas antes mencionadas, sería utilizar un editor de pixel art que le permita obtener una vista previa de sus mosaicos mientras los dibuja. Recomiendo Pickle: pickleeditor.com
Usuario no encontrado

2
Hay otro buen artículo sobre este tema aquí: gas13.ru/v3/tutorials/sywtbapa_obliterating_grid.php
Tesserex

1
Gracias, especialmente por este último tutorial, respondió muchas otras preguntas que tuve: p
Cristol.GdM

Respuestas:


20

Descargo de responsabilidad: no soy un artista, así que esto es solo el conocimiento artístico del programador.

Está teniendo el efecto de cuadrícula en su ejemplo principalmente debido a ese parche de hierba más claro en el borde inferior de la baldosa:

ingrese la descripción de la imagen aquí

Detalles como ese que son fácilmente reconocibles al instante revelan que solo estás repitiendo el mismo mosaico.

Consulte este artículo que tiene muchos consejos útiles sobre el tema. En particular, usando Photoshop:

  • Use la herramienta de parche para deshacerse de detalles deslumbrantes.
  • Use la herramienta Doge o Burn para obtener una luminosidad uniforme en todas partes.
  • Haga que los bordes sean perfectos desactivando la imagen y luego usando la herramienta Patch para mezclar los bordes. También he visto personas duplicar y reflejar la imagen cuatro veces antes para este propósito.

También en la imagen que vinculó, parece haber un problema de implementación también porque al acercar la imagen puede ver algunos espacios entre los mosaicos:

ingrese la descripción de la imagen aquí


3
+1 duplicado y espejo parece funcionar bien para mí, también hay herramientas que ayudan con esto: aquí hay uno de los muchos tutoriales: photoshoptextures.com/texture-tutorials/seamless-textures.htm : las palabras clave son básicamente "texturas perfectas".
Oskar Duveborn

Ok, lo intenté (tanto el tutorial de respuestas como el tutorial de comentarios) y los resultados son MUCHO mejor, y conocer el término "textura perfecta" ayudará en el futuro, ¡así que gracias!
Cristol.GdM

@OskarDuveborn ¡Buen enlace, la imagen final muestra claramente la gran diferencia que hace!
David Gouveia

15

No soy un experto, pero aparte de tener más de un tipo de mosaico de césped (no completamente diferente para que la gente se dé cuenta, pero lo suficientemente diferente), un truco podría ser tener "mosaicos de transición" entre 2 tipos diferentes de mosaicos. Usando la imagen de ejemplo que mostró, tener un mosaico medio verde y medio gris entre el mosaico completamente gris y el mosaico completamente verde puede ayudar a suavizar la transición. Además, si realiza esas transiciones redondeadas y de aspecto más natural (una textura se desvanece en la siguiente), puede ayudar con el efecto.

Observe en la imagen de Chrono Trigger, en la parte inferior central, cómo tiene una mitad marrón (tierra), mitad verde (hierba), con parches de hierba más oscura. También utiliza hierba y piedras más claras para agregar variación natural (¿una baldosa transparente con la piedra o hierba clara encima de la baldosa de hierba, tal vez?)


55
¡Las fichas de transición +1 son críticas! Una regla de oro: haga transiciones de mosaico según sea necesario. ¿Ya has puesto nieve al lado de la hierba? ¿No? Entonces no deberías tener un conjunto de transiciones de hierba a nieve. ¿Acabas de poner lava junto a la tierra por primera vez? Genial, es hora de crear un conjunto de mosaicos de transición para eso.
doppelgreener

11

Tienes que hacer transiciones, para cada composición posible de múltiples tipos de fichas tendrás que dibujar fichas que completen el cambio. Es posible que desee decidir que muchas de las combinaciones no son posibles en su juego, ya que la cantidad de transiciones que de lo contrario tendría que hacer crecería fácilmente a un número muy grande.

Por lo general, esto significa mezclar las cualidades de los tipos de superficie de alguna manera, por ejemplo, una simple transición de hierba a tierra normalmente tendría pequeñas parcelas de hierba cada vez más raras cuanto más te acercas a la baldosa de tierra. Pero para una solución rápida, simplemente puede desvanecer una textura mientras se desvanece en otra, o hacer un tramado donde elige al azar píxeles de una de las dos texturas usando la probabilidad ponderada que cambia de favorecer una textura a la otra.

Además, le recomiendo que cambie de mirar los mosaicos a los patrones de sub-mosaico, considere esta imagen de dos mosaicos, si en lugar de hacer mosaicos completos crea formas correspondientes a la figura roja, nunca necesitará más de dos superficies diferentes en el mismo mosaico, lo que limita en gran medida el número de mosaicos de transición que tiene que hacer, puede proceder a generar mosaicos cuadrados a partir de estos mosaicos de diamantes para usar en el juego, o simplemente puede usar los mosaicos de diamantes directamente, las computadoras no son muy exigente con estas cosas más.

Sub azulejo marcado en rojo



6

Comience haciendo un azulejo regular. Luego divide el mosaico horizontal y verticalmente, en 4 piezas iguales, dejándote con 4 "mosaicos".

El mosaico ahora se verá así:

1 2
3 4

Coloque la pieza 2 en el lado izquierdo de la pieza 1. Haga lo mismo con 3 y 4. La ficha ahora se verá así:

2 1
4 3

Ahora mueva las dos piezas inferiores por encima de las piezas superiores. Te queda con esto:

4 3
2 1

Suponiendo que su mosaico sea 32x32, cada pieza tendrá 16x16. Ahora elimina el medio, digamos 22x22 píxeles (depende de usted), dejando un marco de su mosaico. Este marco ahora se enlosará perfectamente consigo mismo y tendrá que llenar el espacio en el medio con singularidad como grava, piedra, algo de hierba más alta o lo que sea.

Probablemente tengas que mover un poco los píxeles, pero cuando tengas tu marco, podrás producir muchos mosaicos únicos pero perfectamente mosaicos.


0

La forma en que diseño mis mosaicos es así:

  1. Haz tu proyecto de mosaico
  2. copie su mosaico en una imagen que sea 3 veces más grande en las direcciones X e Y
  3. copie su mosaico para que haya 9 copias de su mosaico en la imagen
  4. deberías poder ver dónde comienza y termina cada mosaico, lo que debes hacer es tomar una herramienta de desenfoque (uso GIMP para esto) y desenfocar los bordes para que parezca que es un gran mosaico.
  5. Luego copie el mosaico central de la imagen y luego tendrá su mosaico final

El resultado debería verse bastante bien cuando colocas varias fichas una al lado de la otra. Siempre puede repetir este proceso para ajustar sus mosaicos.


1
-1 En el paso 4, el desenfoque no se aplica a ambos lados (por ejemplo, el desenfoque en la parte inferior del mosaico central no coincide con el desenfoque en la parte inferior del mosaico superior), por lo que sus resultados no son uniformes. Offset es una herramienta mucho mejor para garantizar la fluidez.
doppelgreener

si lo hace correctamente, aparecerá sin costuras, si lo hace de manera uniforme en todas las costuras, entonces resulta bueno, si disminuye la presión sobre la herramienta de desenfoque, puede ajustar los bordes para que se vea uniforme en todos los lados.
John
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.