Felicitación Navideña: mini Juego con HTML, SVG y CSS

Oh Oh Oh! Ya llega la navidad y un año más hemos querido diseñar una felicitación navideña original para sacaros una sonrisa a todos los que nos leéis y seguís en redes. En las últimas ediciones hemos jugado con el diseño responsive y las animaciones, introduciendo algún que otro elemento en diseño vectorial (SVG) o sprite de gráficos. Aquí y aquí algunos ejemplos de las navidades pasadas.

Pero este año queríamos algo más interactivo donde el usuario tuviera que pensar y realizar algunas acciones así que hemos optado por crear un mini-juego tipo puzle de destreza visual, siempre utilizando HTML, CSS y JS, lo que usamos a diario en nuestro trabajo pero orientado juego en lugar de a diseño web.

El funcionamiento del juego es muy sencillo: todos andamos con prisas durante la Navidad, incluso Santa! Por eso, para que tenga tiempo suficiente de recorrer todas las casas y chimeneas, vamos a ayudarle a decorar su árbol. Para ello tenemos que seleccionar los objetos que Santa tiene repartidos por su jardín que mejor encajen con cada una de las pistas. ¿Serás capaz de encontrar todos los objetos en este mini-juego tipo «buscando a Wally»?

Ver Felicitación Navidad

¿Quieres saber cómo hicimos la felicitación navideña? Sigue leyendo!

Felicitación Navidad con SVG y CSS
Así empieza la felicitación navideña de este año de SiloCreativo. ¿Podrás ayudar a Santa a encontrar los objetos correctos?

La idea del mini-juego

La invitación de este año ha supuesto un reto pues era la primera vez que nos enfrentábamos al diseño de un juego, y además de la ilustraciones y la parte de maquetación, había que pensar en una historia y componer un guión junto con la propia mecánica del juego. Por suerte Alfonso sabe bastante de esto, por lo que el diseño del juego lo sacamos rápido. Eso sí, aquí hizo falta lápiz y papel para plasmar las ideas y la historia que queríamos contar.

Como referencia tomamos los juegos tipo puzles y aventuras gráficas clásicas de Lucas Arts, donde tienes que resolver pequeño enigmas seleccionado el objeto adecuado en el momento preciso. Las láminas de ¿Dónde está Wally? también nos han servido como idea, por lo que si eres fan de alguno de esas dos referencias, seguro que encuentras algún detalle familiar en el juego.

Os dejo ahora con Alfonso para que nos cuente como se ha realizado el diseño de la ilustración:

Diseño de la ilustración

En esta ocasión, todo el diseño de la ilustración lo hemos realizado en Affinity Designer. Hemos estado usando algunas de las herramientas que tiene el programa, y que sobre las que hemos escrito durante estas últimas semanas en la guía sobre Diseño UI.

Elección del tipo de rejilla

Ajuste Rejilla isométrico
Ajuste de Rejilla para dibujo isométrico.

En primer lugar, y al decantarnos por hacer una ilustración en formato isométrico, lo primero es definir la rejilla en nuestra Mesa de trabajo. Para ello, la definimos en Vista > Asistente de Guías y Ejes. De todas las opciones disponibles, elegimos que el tipo de cuadrícula sea isométrico. En el espaciado, nos decantamos por 10px, ya que así tenemos una rejilla lo suficientemente densa. Para los elementos que son más pequeños, el workflow ha sido hacerlos a un tamaño mucho más grande para poder darle todo tipo de detalle, y luego ya escalarlo a su tamaño final. Es lo bueno de trabajar con un programa de diseño vectorial, que da igual como trabajemos, nunca tendremos que preocuparnos por que tengamos objetos pixelados.

Otra opción importante es modificar las tolerancias (el icono con forma de imán de la Barra de Herramientas), y activar el ajuste a rejilla. Así, nuestro cursor siempre hará snap a la malla isométrica, y no habrá que preocuparse por que nuestros objetos no estén completamente ajustados.

Organización de las Capas

Organización de capas en dibujo vectorial
Muy importante ordenar las y nombrar las capas correctamente para poder usas las clases e IDs en CSS.

Aunque pueda parecer un poco cargante, la organización de las capas es esencial para no encontrarnos problemas en el futuro, y que podamos editar el código del svg más fácilmente. En esta ocasión, me he decantado por que cada objeto esté en una capa diferenciada del resto, como podéis observar en la imagen. Aunque existen elementos individuales que están agrupados, como los copos de nieve. Esto nos ayuda para que la animación sea más sencilla de conseguir.

Exportación a SVG

El último paso es el más sencillo. Al exportar a formato SVG, hay que estar atento a solo seleccionar los elementos que están dentro de nuestra mesa de trabajo. Esto nos quita de que estemos exportando alguna línea suelta que se nos haya quedado perdida, y que al ver el SVG en el navegador, nos quede la ilustración descentrada.

Mesa de trabajo para dibujo SVG
Mesa de trabajo con la ilustración preparada para ser exportada a SVG

Maquetación en HTML, CSS y JS

La mayor parte del trabajo ya está hecho, pues integrar el formato SVG dentro del HTML es tan sencillo como copiar y pegar. La alterativa es cargarlo como imagen, pero si quieres animar los elementos o cambiar las clases de los objetos, debes optar por la primera opción. Por tanto, una vez limpiado el SVG (siempre hay alguna clase innecesaria o ajuste extra que se añade el programa) y comprobado que se visualiza correctamente en la en navegador, llega la hora del CSS.

.streetlight {
	animation: streetlight 5s linear infinite;
}
@keyframes streetlight {
	0% { opacity: 1; }
	20% { opacity: 0.3; }
	100% { opacity: 1; }
}

En el CSS encontrarás muchas animaciones como el bounce para la cabeza del personaje cuando habla o el cambio de color de las luces de la casa de Santa. Todas funcionan sin problemas con los elementos del SVG. También hemos usado algunos gradientes para los cuadros de texto, más concretamente un ejemplo de aquí.

Animación SVG con CSS
Animando CSS para indicar que el objeto SVG seleccionado no es el correcto

En algunos casos nos hemos encontrado con una una compatibilidad entre navegadores limitada. Ppr ejemplo, Edge, el nuevo navegador de Microsoft no reconoce los transform entre los elementos SVG. Esto significa que al hacer clic en el objeto erróneo no habrá animación en este navegador, ni tampoco tendremos los copos de nieve cayendo. Será algo más estático, pero el resultado será similar.

Otra animación interesante es la usada para las letras del final (spoiler alert!), con tres colores distintos para la propiedad text-shadow y que estos vayan cambiando en una animación infinita.

Por último un JS muy sencillo, tan solo funciones para ocultar y mostrar elementos y para añadir o eliminar clases. Una cuestión interesante que hemos aprendido durante el proceso (gracias Sara Moya!) es que .addClass(); y .removeClass(); no funcionan en algunas versiones de jQuery con elementos del SVG, por lo que ha sido necesario usar attr(); en su lugar.

Feliz Navidad y Próspero año nuevo

Esperamos que la invitación te haya inspirado y sacado una sonrisa. Muchas gracias por ayudar a Santa con su árbol, esperamos que te lo recompense con muchos regalos!

Feliz navidad de parte de todo el equipo de SiloCreativo 🙂

Comentarios (2)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *