Las Navidades ya están aquí y como cada año queremos felicitaros las fiestas de una forma divertida y original. Este año hemos optado por un juego de estilo retro basado en CSS Grid Layout.
Aquí puedes ver la felicitación / juego: Escape From: A Christmas Tale
Este ha sido sin duda el año de CSS Grid. Bien es cierto que la especificación vio la luz antes pero durante los últimos meses hemos podido ver un importante incremento de sitios en producción usando CSS Grid como hemos podido comprobar en Grid Examples. Por eso hemos decidido hacer este juego, en el que tendremos que ayudar a Santa Claus a escapar de la mansión del Señor Scrooge, usando CSS Grid y algunas líneas de JS para poder comprobar el progreso del juego.
Además, si eres fan de los juegos de 8bits o las aventuras gráficas clásicas te van a gustar los gráficos que tiene este juego. Gracias a la Google font Press Start 2P y al framework CSS NES.css hemos podido recrear los textos y estética de juegos clásicos de LucasArts y similares.
Veamos algunos puntos y aprendizajes adquiridos durante la construcción de este Side Project.
CSS Grid no es solo para maquetar layouts
Hemos escrito sobre esta idea anteriormente. CSS Grid is más que la nueva especificación que viene a decir adios a los floats y hola a Flexbox. CSS Grid añade una nueva lógica al front-end, donde el espacio en blanco tiene la misma importancia y peso que el contenido o espacios llenos. Esto cambia la forma que tenemos de maquetar de una forma similar a como lo hizo el mobile first, cuando el desktop dejo de ser la resolución principal cuando nos enfrentábamos a un nuevo proyecto web.
Esta nueva forma de dividir el espacio disponible en filas y columnas que pueden solaparse nos da la oportunidad de explorar nuevos conceptos y formatos. Un ejemplo brillante de esto es The Deck, un experimento sobre como construir un sistema de slides dentro del mismo grid, con unas dimensiones mucho mayores que la pantalla del dispositivo.
Teniendo en cuenta estos principios, decidimos dedicar algunos días a trabajar en este Side Project, aprendiendo nuevas cosas y saliendo de nuestra área de confort.
Cómo funciona este juego experimental de CSS Grid
En primer lugar, definimos el grid en base al número de filas y columnas que vamos a necesitar, teniendo en cuenta que el ancho y alto de cada celda de este grid será de 100vw y 100vw. Por lo tanto, todo este grid está dentro de un contenedor .grid) que claramente excede el espacio visible.
.grid {
position: absolute;
transition: transform .7s ease-in-out;
width: 2000vw;
height: 2000vh;
display: grid;
grid-template: repeat(20, 100vh) / repeat(20, 100vw);
grid-gap: 0;
}En segundo lugar, hemos añadido a cada elemento del grid un único identificador. Por ejemplo, nosotros tenemos #greenhouse, #workshop o #library para identificar las localizaciones. Esto nos ayudara a mostrar u ocultar el correcto slide según las coordenadas.
Finalmente, necesitamos crear una lista de elementos que encajen esos identificadores con los enlaces de navegación. Podemos usar la pseudo-clase :target para saber que elemento del grid debemos mostrar usando transformaciones CSS.
#greenhouse:target ~ .grid { transform: translate3d( calc(-10 * 100vw ), calc(-1 * 100vh), 0); }
#workshop:target ~ .grid { transform: translate3d( calc(-6 * 100vw ), calc(-13 * 100vh), 0); }
#library:target ~ .grid { transform: translate3d( calc(-4 * 100vw ), calc(-3 * 100vh), 0); }}Ahora ya podemos crear tantos slides como necesitemos y conectarlos usando los links de navegación. Sería como tener un gran mapa y movernos usando las coordenadas.
Diseñando los personajes y animaciones
Los personajes han sido diseñados siguiendo el estilo de los juegos de 8bits: paleta de colores limitada y grandes pixeles. Dichos personajes son cargados usando el formato .svg que nos da la posibilidad de añadir animaciones simples como parpadear o asentir con la cabeza.
Estas animaciones usan propiedades básicas de CSS. Por ejemplo, cambiando el relleno de los ojos del personaje por otro similar a la de su cara durante algunos milisegundos, dando la impresión que el personaje parpadea. O bien moviendo la cabeza del personaje, dando la sensación de que está hablando.
Además el formato .svg nos ayuda a estar seguros que nuestras imágenes son compatibles con las pantallas retina. Por esta razón , los fondos han sido realizados usando .svg también.
Feliz Navidad!
Esperamos que lo hayas pasado bien jugando a este juego. Nosotros hemos aprendido y disfrutado mucho haciéndolo, y por supuesto, si encuentras un fallo o algo que mejorar, déjanos tus pensamientos en los comentarios.
¡Feliz Navidad y Prospero Año nuevo de parte de todo el equipo de SIloCreativo!
