Construir un mosaico a partir de 4 piezas: para crear una sola entidad de letras adyacentes en un juego de palabras

Trabajo en un juego de palabras similar al Scrabble para Android , donde se colocan fichas de letras translúcidas amarillas en un tablero de juego blanco:

captura de pantalla

No quiero usar mosaicos rectangulares aburridos, y al mismo tiempo no puedo hacer que mi juego sea demasiado complicado... así que se me ocurrieron los siguientes activos gráficos (creados con InkScape, exportados a mapa de bits y luego divididos en 4 piezas con ImageMagick):

activos

Como puede ver arriba, hay round.svg y square.svg y los dividí en 4 partes:

  • ronda_0.png
  • ronda_1.png
  • ronda_2.png

  • ronda_3.png

  • cuadrado_0.png

  • cuadrado_1.png
  • cuadrado_2.png
  • cuadrado_3.png

Y como puede ver en la captura de pantalla de la aplicación, luego uso estas piezas para diseñar perfectamente los mosaicos de letras adyacentes.

Mi pregunta es: para round.svg (y shadow.svg ) acabo de usar 2 degradados lineales en las esquinas noroeste y sureste, y eso no se ve bien.

¿Alguien tiene una buena idea para mi configuración, cómo diseñar mejor el round.svg ?

No tengo del todo claro por qué los está dividiendo en imágenes separadas.
Porque me gustaría formar una sola entidad (como plomo caliente) de las fichas de letras adyacentes colocadas en el tablero de juego. Si miras la popular aplicación Words with Friends , hacen cosas similares, pero de 9 o más mosaicos...
¡Oh! Lo entiendo. Por lo tanto, estas no son partes de un mosaico, sino mosaicos individuales que se agruparán. Eso es un poco más complicado.
Bueno, mi declaración no fue una respuesta, solo un aviso en caso de que no lo supieras y un pequeño consejo basado en mi opinión. Eliminarlo ya que no es deseado.

Respuestas (2)

¿Cómo estás construyendo la aplicación? No estoy tan familiarizado con Android, pero en iOS probablemente consideraría construir esto con Phonegap y simplemente usar CSS para todo. Con CSS, todo lo que necesitaría es el DIV. Luego puedo diseñarlo con degradado, color, esquinas redondeadas y sombra paralela. No hay necesidad de cortar y trocear imágenes.

Me imagino que puede hacer lo mismo con las herramientas de la interfaz de usuario dentro de cualquier marco de codificación particular que esté utilizando.

En pocas palabras, no use imágenes, debería poder representarlas en código.

ACTUALIZAR:

Bien, creo que entiendo lo que estás haciendo ahora.

Dicho esto, mi respuesta sigue en pie, creo que, en última instancia, le resultará más fácil manejar esto en código que en activos duros.

Dicho esto, creo que lo que debe hacer para obtener el efecto 3-D que desea es no usar un degradado, sino como señala Takkat, un resaltado a lo largo del borde superior e izquierdo contiguos de los mosaicos agrupados y una línea de sombra en el borde derecho e inferior contiguos de los mosaicos agrupados.

Esto significa que probablemente necesitará más fichas.

Por ejemplo:

  • square0 = resaltado superior (para grupos de más de una fila)
  • square1 = resaltado a la izquierda (para grupos de más de una columna)
  • cuadrado2 = sombra inferior (para grupos de más de una fila)
  • square3 = sombra derecha (para grupos de más de una columna)
  • cuadrado4 = resaltado superior, sombra inferior (para grupos de una fila)
  • cuadrado5 = resaltado a la izquierda, sombra a la derecha (para grupos de una columna)

Sin embargo, incluso después de todo eso, seguirás teniendo problemas en las esquinas interiores. Idealmente, también tendría un conjunto de cuadrados con solo resaltados y sombras en las esquinas para acomodar todas las combinaciones de esquinas interiores: resaltado superior izquierdo, sombra inferior derecha, transición de sombra a resaltado superior derecha, sombra inferior izquierda a resaltado transición, luego las combinaciones (arriba a la izquierda y abajo a la derecha, abajo a la izquierda y arriba a la derecha)

En este punto, diría que las cosas se están complicando y sugeriría una de dos opciones:

  • vea si puede hacer esto con la lógica del código en su lugar
  • reconsidere la estética y tal vez opte por un diseño plano en lugar de 3-D para ahorrarle el dolor de cabeza de todos estos gráficos separados.
Entiendo lo que sugieres (hacer sombras y efectos en el código), pero me gustaría ir por el camino opuesto (cada recurso renderizado previamente tanto como sea posible).
@AlexanderFarber FYI, actualicé mi respuesta con más información.

Para agregar un efecto de bisel simple a una forma plana, podemos agregar reflejos claros y oscuros en el (borde redondeado) dibujando una línea transparente blanca y negra:

ingrese la descripción de la imagen aquí

Luego aplicamos un efecto de desenfoque a esta línea para suavizarla y obtener el siguiente ícono (se puede cortar en las partes deseadas):

ingrese la descripción de la imagen aquí

Tenga en cuenta que luego no aplicamos un degradado al relleno del objeto.

¿Has hecho esto en InkScape? ¿Cortas un rectángulo por dentro y luego lo mueves hacia abajo y hacia la derecha?
Sí, es Inkscape. Acabo de usar la herramienta de dibujo de línea recta para la línea blanca en la parte superior de su ejemplo. Luego copié y pegué la línea blanca para reflejarla horizontal y verticalmente para la línea negra.
Este bisel sugerido es un gran efecto visual, pero probablemente no pueda usarlo con square.png - si observa, por ejemplo, la esquina formada por las letras P, I, T en la captura de pantalla de la aplicación...
De todos modos, no podrías dar forma a la pieza única 'T' con 4 objetos.
Sigo pensando que eso es posible con 4 piezas: si imaginas todas las letras adyacentes como si estuvieran dibujadas en papel amarillo, con las esquinas curvadas hacia arriba (con pequeñas sombras en las esquinas).
Intentaré adaptar tu efecto de bisel (aunque necesitaré más piezas)... gracias
Construir un mosaico a partir de 4 piezas: para crear una sola entidad de letras adyacentes en un juego de palabras
RespuestasAquíPolítica de privacidad1y, 0v