GAME MAKER #3: Fundamentos de un clon de Agar.io

Hace unas semanas, vi una publicación de x grupo en mi inicio de Facebook, con un enlace a un juego, que, según el tipo que hizo la publicación, era bastante adictivo, así que sin pensar entré al link y desde ese momento he perdido varias horas de mi vida por estar metido en agar.io.

Después de pensar un rato, varias veces, pensé en hacer este pequeño tutorial, que da como resultado algo así:

Pero, en fin, empecemos.
Lo primero que hay que hacer, es crear un Sprite en forma de círculo, que vamos a usar para los personajes y los puntos regados en el juego. Yo la creé de 320 x 320 y recomendaría crearla con dimensiones similares.

Dentro del sprite, usé varias subimágenes de distintos colores, para usarlas cuando generemos aleatoriamente la apariencia de las bolitas.

Ahora, vamos a modificar la máscara de colisión y seleccionamos donde dice "Ellipse". Esto, evidentemente, para que la colisión se efectúe de la manera adecuada.

Bien, ahora viene la parte de crear el objeto y escribir código. Para ello, creamos un objeto personaje y un objeto punto.
Hecho esto, vamos al evento Create del personaje. En el vídeo de arriba, usé este código que pasaré a explicar.

image_speed=0; // Esto hace que la velocidad del Sprite sea 0, lo que es últil para que el color que nos corresponda al iniciar, no cambie. De no hacer esto, el sprite cambiaría de color infinitamente.
image_index=random(6); //Esta línea genera de manera aleatoria la sub imagen del sprite, en la parte donde está el 6, deben poner el número de sub imágenes que tiene su sprite menos 1 (se cuenta el 0);
image_xscale=.1;// Escalo el sprite en x a un 10%, para iniciar pequeño
image_yscale=.1;// Hago lo mismo que antes, pero con y
velocidad=10;//Defino la variable velocidad en 10
recogidos=0;// Defino la variable que guarda cuantos puntos he recogido
for(i=10000;i>=0;i--) //Inicio un ciclo para generar los puntos a lo largo del escenario, pueden cambiar el 10000 por la cantidad que requieran
{
    rany=random(room_height); //Genero un número aleatorio de 1, a la cantidad de pixeles de altura que tiene el room.
    ranx=random(room_width);// Lo mismo que antes, pero con el ancho.
    instance_create(ranx,rany,obj_objeto);//Creo los puntos, en las coordenadas X y Y que acabo de generar.
}

Una vez hecho esto, vamos a Step, aquí, solo manejé 3 líneas de código bastante simples.

move_towards_point(mouse_x,mouse_y,velocidad); //Con esto, el personaje sigue al mouse con la velocidad definida previamente.
view_yview = y - view_hview/2;// Centra la vista verticalmente en el personaje
view_xview = x - view_wview/2;// Lo mismo pero horizontalmente

Listo, ahora vamos a modificar el objeto punto, en el evento Create.

Y, es básicamente lo que ya habíamos hecho con el personaje, así que si hay alguna duda, siempre pueden subir un poco.

Ahora, hay que crear una alarma con el objeto punto, y esto es de lo más importante del programa. Vamos a la alarma y ponemos un código como este:

x=random(room_width);// Esto mueve a una posición aleatoria en x al punto
y=random(room_height);//Lo mismo de arriba pero en y
visible=true;//Hacemos visible el punto

Y aunque parezca no tener sentido, la alarma anterior, será explicada en el último evento del tutorial, la colisión. Así que vamos al objeto Personaje y creamos la colisión con el punto.

Habrá que poner un código así:

Parte importante, es que al colisionar, los puntos no se eliminan sino que se vuelven invisibles y después de un rato aparecen en otra parte del escenario al activarse la alarma del objeto punto.

Ahora, explicaré cada línea de la colisión.

if other.visible==true;// Verifica que el objeto punto esté visible
{
    image_xscale+=.001;//Sí se cumple la condición, el objeto personaje será 0.001 más grande en x.
    image_yscale+=.001;//Igual, pero en y
    velocidad-=.001;//Contrario al tamaño, la velocidad disminuirá
    other.alarm[1]=400;//Se activará la alarma en 400 steps
    other.visible=false;//El objeto punto se vuele invisible
    recogidos++;//la variable recogidos aumenta en 1
}
if recogidos>10;//Verifica si recogidos es mayor que 10
{
    view_hview+=.010;// La view aumenta un 0.010 de altura
    view_wview+=.005624999;// La view aumenta 0.005624999 de ancho, para mantener una proporción 16:9.
}

Y, con esto, solo bastaría crear un room y hacer unas modificaciones en él.
Es importante, que el room sea lo suficientemente grande, en mi caso es de 12800 * 7200.

Casi para terminar, vamos a la pestaña views, marcamos las siguientes casillas y cambiamos las dimensiones de view in room y port on screen a unas 16:9, de otro modo habría que hacer cambios arriba.

 Por último colocamos el objeto personaje en el medio del room. Y FIN.



Si quieres descargar el archivo de este tutorial, da click en la imagen.

Y fin x2, tal vez me anime a hacer algún día la segunda parte. Gracias por leer.