En la primera parte del artículo, se habló acerca del juego Mr. Square, las reglas que lo rigen, así como las tecnologías que se utilizaron para su desarrollo.
En esta segunda parte hablaré de los retos de desarrollo del juego.
Enlace del juego: https://mrsquare.herokuapp.com/
Movimiento del personaje.
Este fue uno de los temas más complejos para manejar en el juego, uno de los primeros acercamientos que hizo fue intentar mover el personaje a través de css, pero en este caso es necesario tener un evento que indique cuando la animación ha finalizado, y esto se debía hacer cada vez que el personaje completaba una celda, es por ello que que se hizo uso del paquete react-spring, el cual otorga el hook conocido como useSpring dando la capacidad de establecer la posición del elemento, además tiene un evento llamado onRest, este evento se "dispara" cada vez que la animación ha finalizado, es en este punto donde se realizan las evaluaciones del personaje.
Validación movimiento del personaje contra otro personaje
Cada vez que el personaje se ha movido una celda, debe evaluar su entorno, además de evaluar la celda donde se encuentra.
Cada vez que el personaje inicia un movimiento debe validar:
- Choca por que ha llegado al límite del escenario.
- Choca por que existe un bloque.
- Choca por que existe un bloque que ha dejado.
- Choca contra otra personaje
Los tres primeros tipos de choque, no representa mucha dificultad ya que se puede validar el siguiente movimiento antes de que el personaje lo haga.
No sucede lo mismo cuando existen dos personajes en el escenario, ya que son elementos que están en movimiento, por lo cual cada uno de los personajes debe estar "consciente" de la posición del otro, cuando dos personajes van en sentido contrario, cada uno evalúa en qué posición estará el otro
En este caso se aplicó la siguiente regla:
- Si os personajes se encuentran de forma horizontal, se dará prioridad al personaje que esté a la izquierda.
- Del mismo modo si se encuentran de forma vertical, se le da prioridad al personaje que se encuentra arriba.
Con estas reglas se evitó que los personajes quedarán uno sobre otro, lo cual sucedió en muchas ocasiones en el tiempo del desarrollo.
Otro caso es cuando dos personajes llevan la misma dirección, ya que se debe evaluar si el personaje que está al frente ha dejado un bloque, si es así deberá chocar, pero si la posición donde estaba un personaje no deja bloque, deberá permitirle moverse de forma normal.
Validación del entorno del personaje.
El juego cuenta con diferentes tipos de bloques, los cuales cambian el comportamiento del personaje, como son:
- Portales
Permite que el personaje se "teletransporte" de un punto a otro, cuando el personaje entra a un portal será enviado al portal de salida, si en esa posición ya hay otro personaje, no se podrá "teletransportar", cuando un personaje deja un portal, no dejará bloque, permitiendo que sea reutilizado.
- Flechas
Cuando un personaje se encuentra sobre una flecha, la dirección del personaje es igual al de la flecha sobre la cual está ubicado, es por que ello que cuando un personaje termina cada celda, requiere saber sobre qué tipo de celda se encuentra, en el caso de las flechas no sólo conocer qué es una flecha, sino que además saber la dirección que tiene, cuando un personaje deja una celda de tipo flecha, no dejará bloque alguno.
- Puentes
Este tipo de bloques, sólo permite que el personaje vaya en una sola dirección, cuando un personaje detecta que al frente de él hay un puente debe evaluar si tiene la misma dirección que lleva el personaje, igualmente si está encima de un puente sólo podrá moverse en la dirección que el puente tiene, cuando un personaje deja este tipo de celda deja un bloque, por lo que no se podrá pasar dos veces por el mismo puente.
- Magnetos
Cuando un personaje pasa cerca de un magneto, el personaje se verá "atraído" al magneto, haciendo que el personaje se detenga, desde el editor está validado que no pueden existir magnetos cercanos al personaje y a otros magnetos, cuando un personaje deja un magento no dejará bloque, por lo que es posible pasar por un magneto más de una vez.
Personajes.
Para darle variedad al juego, éste cuenta con 10 personajes, cada uno con su propia "personalidad" y color, esto permite que cada vez que se seleccione un personaje, el color de los bloques que dejará en el escenario serán iguales al color que representa el personaje.
Cada personaje se basa en el mismo bloque, pero a través de envío de props, de define que tipo de personaje será y se aplicará los accesorios que tendrá cada uno, estos "accesorios" son en su mayoría SVGs.
Internacionalización (i11n)
El juego cuenta con 8 idiomas, en este caso no se utilizó alguna librería y/o paquete para realizar está acción, debido a que el juego no cuenta con demasiadas pantallas, en este caso se creo un archivo (json) que contiene cada uno de los textos que se usan en el juego y dependiendo del idioma que esté seleccionado se seleccionará los textos.
Se hizo uso de Google translate para realizar la traducción, algunos de los textos pueden no ser los adecuados, si llegase a ser el caso en este link es posible documentar el issue
Workshop (Taller).
Es la única sección del juego que requiere autenticación y conexión a internet ya que las opciones requieren comunicación con el servidor, desde guardar/eliminar un nivel, hasta jugar el nivel de otros usuarios.
Crear niveles.
El juego cuenta con 245 niveles ya precargados, los cuales se pueden jugar con o sin conexión, pero existe la posibilidad de crear nuevos niveles, esto a través del editor integrado con el que cuenta el juego, esto permite que los usuarios puedan crear sus niveles y compartirlos con los demás usuarios.
Un ejemplo de cómo se ve una url de un nivel compartido es:
https://mrsquare.herokuapp.com/level/11852
Top 10
Es posible que los usuarios califiquen un nivel, a través de botones me gusta/no me gusta, con este valor en la sección de Top 10 se entregan los niveles mejores calificados entre los niveles que han creado los usuarios.
Es una lista que va variando dependiendo de lo que los usuarios califican, cada vez que el usuario ingresa a esta sección se realiza una query la cual entrega está información.
Nivel aleatorio
Como su no nombre lo indica cada vez que el usuario selecciona está opción se le entrega un nivel aleatorio entre los niveles creados por lo usuarios, esto posibilita que aquellos niveles que no aparezcan por ejemplo en el Top 10, puedan ser jugados.
Buscar nivel.
Opción que permite jugar un nivel determinado, el usuario deberá ingresar el código del mismo, esto es útil cuando se desea que un nivel que se ha creado pueda ser jugado directamente por otros usuarios y no depender que el nivel salga en la sección de niveles aleatorios.
En la tercera parte de este artículo compartiré algunas de las funcionalidades que tiene el juego.
Top comments (0)