Comunidad orientada al desarrollo de videojuegos

Game Maker Tutorial II: Escenario y movimiento personaje principal

Ya estamos de vuelta, lamentando enormemente el retraso, pero a lo nuestro, vamos a comenzar por fin nuestro proyecto en Game Maker, una vez tenemos el sprite listo.

En primer lugar crearemos un proyecto nuevo en Game Maker Studio y lo guardaremos. Crearemos una room (habitación) y la llamaremos nivel1. Buscando entre sus características, iremos a settings,dónde elegiremos el nombre y su tamaño, en este caso 1024 x 480y velocidad 30.

En segundo lugar, crearemos un nuevo sprite, en el que importaremos a nuestro naúfrago hecho anteriormente. Sin embargo cogeremos únicamente el archivo naufrago_sprite1.png. Lo llamaremos spr_player_izq. Seguidamente crearemos una copia del mismo sprite, y la llamaremos spr_player_der. Entraremos en el editor interno del GM:Studio pinchando en Edit Sprite > Transform > Mirror/Flip > Mirror Horizontally.

tuto_3_1

Con esto, por ahora ya tendremos a nuestro personaje principal pero estático y con espacio reservado para meter más adelante alguna animación de estar quieto si hiciera falta. Ahora haremos el mismo proceso, creando los sprites spr_player_anda_izq y spr_player_anda_der. Importaremos el resto de las imágenes y duplicaremos alguna para conseguir un efecto de andar medio decente. La posición sería algo así:

tuto_3_3

Ojo, todos los sprites deben tener su centro (Origin) en X = 31, Y = 112 que marcarán su posición en el escenario. Digamos que al ser un personaje alto, queremos que sean los pies los que marquen su posición. Por otro lado, modificaremos su máscara con forma de elipse y las siguientes coordenadas:

tuto_3_2De esta forma tendremos totalmente controlada su colisión y su posición en el escenario.
El siguiente paso es crear por fin nuestro primer objeto: El obj_player.

El obj_player tendrá asignado como sprite por defecto, el sprite spr_player_izq por ejemplo. Y comenzaremos la gestión de sus eventos, añadiéndo y completándolos. Recordad que si añadis un evento y lo dejais vacío se borrará. Un buen recurso para evitar esto es colocar un cuadro de script y ponerle un comentario con ///Nombre del script. De esta forma el evento quedará creado y reservado para más adelante.

Añadimos el evento Create y seleccionamos la pestaña Control > sección Code > Execute Code. Esto nos creará un espacio donde escribir instrucciones que se activarán al crearse la instancia del objeto por primera vez. Cuando colocamos un objeto en una room,no estamos colocando el objeto general allí,sino una copia llamada instancia. Cualquier cosa que afecte a una instancia en concreto con su propia id, afectará solo a dicha instancia, sin embargo una llamada al nombre del objeto, afectará a todas las copias e instancias, ojo.

En el cuadro de código escribiremos lo siguiente:

///variables iniciales
image_speed = 0
image_index = 0
inventario = 0  // Crea la variable inventario con valor 0, vacía. velocidad = 4 // velocidad de movimiento

Ahí habremos indicado que no cambie de sprite si hubieran más y que su velocidad de cambio entre sprites será cero, por ahora. Además añadimos una variable que utilizaremos en el futuro para controlar qué objeto posee y otra para la velocidad de desplazamiento por el mapeado (no confundirla con image_speed).

Además, ¿Recordais el tutorial de rutas? Vamos a usarlo aquí, seguido al código anterior añadiremos lo siguiente:

    ///crear grid
globalvar grid;
grid = mp_grid_create(0, 0, room_width / 32, room_height /32, 32, 32)

with (obj_block)
{ mp_grid_add_cell(grid, floor(x / 32), floor(y / 32));}

Pasamos a crear ahora el evento Step con otro cuadro de código, que contendrá lo siguiente:

///ir al raton
if mouse_check_button_released(mb_left) {

camino = path_add();
mp_grid_path(grid, camino,x,y,mouse_x,mouse_y,1)
path_start(camino,velocidad,0,false)
}

Aquí indicaremos dónde puede moverse cuando pinches en un punto de la habitación y a qué velocidad, buscando la mejor ruta para llegar.

Nos faltaría ahora crear los obstáculos, tanto visibles como invisibles para delimitar dónde se mueve realmente (y no volar o pisar el océano). Para ello crearemos un objeto llamado.. obj_block que va a medir 32 x 32 y de forma cuadrada. Dibujaremos de forma rápida un cuadrado rojo y guardaremos el objeto y el sprite (spr_block), cuyo origen será X=0,Y=0. Asignaremos al obj_block una profundidad de 10 (Depth = 10).

Ahora viene lo divertido. Colocaremos el personaje en el centro de nuestra room anteriormente creada y lo rodearemos de bloques rojos para que no pueda escapar, de la siguiente manera, más o menos:

tuto_3_4

No asustaros, los bloques rojos luego se colocarán como objetos no visibles, e incluso se pueden poner semitransparentes para ver exactamente qué quieres bloquear. Para colocar los bloques fijaros que la cuadrícula de la room sea 32 x 32, para que coincida con el sistema de rutas que hemos creado anteriormente. Ya puedes probar lo que llevamos hecho y ver cómo nuestro naúfrago se mueve por el interior del cuadro rojo sin poder escapar.

Como habremos comprobado, la pantalla se ve alargada, y no sigue al personaje la cámara, ya que no existe. Pasaremos ahora por tanto a configurar la cámara con las Views de la habitación. La configuración es la siguiente:

tuto_3_5

Sin embargo.. está estático, nos falta añadirle una animación, ¡pongámonos a ello!

Para conseguirlo tendremos que modificar y añadir varias variables tanto al Evento Create como al evento Step, estos pasos son más complicados así que copiaré enteros mis eventos y pasaré a explicarlos:

Create

///variables iniciales
image_speed = 0
image_index = 0

inventario = 0  // Crea la variable inventario con valor 0, vacía.
velocidad = 4 // velocidad de movimiento
x_origen = x
x_destino = x
y_destino = y
mirar = 0 // 0 izq , 1 der
///crear grid
globalvar grid;
grid = mp_grid_create(0, 0, room_width / 32, room_height /32, 32, 32)
with (obj_block)
{ mp_grid_add_cell(grid, floor(x / 32), floor(y / 32));}

Como veis, hemos añadido varias variables sobre coordenadas, para controlar tanto de donde sale el personaje como dónde llega. También controlaremos la dirección de su mirada con la variable mirar. Si mira a la Izquierda, tendrá valor 0 y si mira a la derecha, tendrá valor 1. Pasemos al evento Step:

Step

///ir al raton
if mouse_check_button_released(mb_left) {

x_origen = x
x_destino = mouse_x
y_destino = mouse_y

camino = path_add();
mp_grid_path(grid, camino,x,y,x_destino,y_destino,1)
path_start(camino,velocidad,0,false)

if x_destino <= x_origen {sprite_index = spr_player_anda_izq image_speed = 0.2 mirar = 0}

if x_destino > x_origen {sprite_index = spr_player_anda_der image_speed = 0.2 mirar = 1}
}

/// comprobacion sobre a qué lado mirar
if x_destino = x and y_destino = y and mirar = 0 { sprite_index = spr_player_izq image_speed = 0}
if x_destino = x and y_destino = y and mirar = 1 { sprite_index = spr_player_der image_speed = 0}

Como podeis comprobar hemos hecho varios cambios, añadiendo variables para guardar la posición del ratón cuando soltamos el botón y usarlo en la creación de la ruta. Esa posición se queda guardada en la variable y no se actualiza aunque movamos el ratón, al menos hasta que soltemos otra vez el botón izquierdo. Gracias a esa variable podemos comprobar si al pulsar con el ratón el personaje se mueve hacia la izquierda o hacia la derecha, debido a que su posición X de destino será mayor o menor que la de origen.

De esta forma podemos cambiar el sprite por el adecuado, asignarle una velocidad y actualizar la variable mirar.

El último paso sirve para comprobar si el personaje ha llegado a su destino y cambiar el sprite por el sprite “parado”, mirando a izquierda o derecha gracias a la variable mirar que hemos actualizado.

Y hasta aquí el tutorial de hoy. Sé que es algo más extenso y complicado que los anteriores, así que sed libres de comentar y consultar dudas usando los comentarios, intentaré solucionarlas. Aquí os dejo los archivos del tutorial de hoy ya terminado y cómo queda en HTML5. En el siguiente tutorial daremos algo de color al escenario y empezaremos a interactuar con objetos.

Archivo proyecto tutorial

Ejemplo terminado HTML5

,

27 thoughts on “Game Maker Tutorial II: Escenario y movimiento personaje principal

  • Davidfiguer says:

    no funcionan los archivos de dropbox 🙁

  • Fran says:

    Gracias por el tutorial. Muy bien explicado.
    Creo que estás bastante liado… para cuando el próximo tutorial?? 🙂
    Un saludo.

  • Fran says:

    Se me olvidaba. A veces, al ejecutar el ejemplo y pulsar con el ratón para que se mueva el naufrago. Al llegar a su destino, se para pero sigue la animación como si caminase “quieto”. Es raro, por que vuelvo a reiniciar el ejemplo y puede funcionar correctamente. También sigue caminando, si hago click fuera de la zona delimitada con cuadros rojos.

    La animación del naufrago yo la tengo de 12 frames para derecha e izquierda, no sé si eso tiene algo que ver.

    Un saludo.

  • Seguramente el fallo suceda porque no consigue llegar a la coordenada exacta de destino, para evitar que siguiera la animación habría que ampliar el rango de comprobación, com un point_distance <= 20, etc.

    Sobre lo de continuar el tutorial,es algo que siempre tengo en mente, pero no dispongo de tiempo. Si os sirve de consuelo y motivación, he conseguido trabajo (pagado) con Game Maker, para un proyecto de bastantes juegos, así que os animo a seguir aprendiendo, ya que esto tiene mucho futuro. Este mes de Julio tengo doble faena, pero posiblemente en Agosto vaya la cosa más tranquila y pueda actualizar por las mañanas y terminarlo de una vez 😉 ¡Gracias por los comentarios!

  • Fran says:

    Hola Javi.

    Espero que el trabajo te valla bien. Como vas de tiempo para seguir con el tuto?? Estamos en agosto… jejeje. Es broma, cuando puedas, estará bien.

    Un saludo.

  • javifugitivo says:

    Pues no tengo vacaciones la verdad. Esta semana terminando un encargo grande de retoque de juegos, y programando otro juego nuevo, y al mismo tiempo intentando participar en la GameBoy Jam…

    De todas formas, me comprometo a continuar con el tutorial este mismo mes. ¡A ver si nada se tuerce!

  • Huygens says:

    Lo de que la pantalla siga al personaje (que se quede en el centro y se mueva la pantalla), no funciona. He copiado/pegado todo el código y nada.

    • Huygens says:

      Vale, ya me respondo yo mismo después de mucho toqueteo….
      Por si a alguien más le pasa:

      Hay que poner los valores de Hbor y Vbor altos, creo que el significado es Hbor= altura horizontal que deja respecto al borde y Vbor igual pero en vertical.
      Si pones poco no se mueve hasta que no estás muy cerca del borde, si pones mucho (por ejemplo 400), te “deja” el objeto en el centro de la pantalla.

  • javifugitivo says:

    Comprueba que has activado el uso de views de la room y has puesto que la cámara siga al personaje poniendo en las propiedades de la view que su Object following sea el personaje con las coordenadas que pongo en la captura. Ya me dices.

  • Ooo says:

    Estaría genial que continuaras con el tutorial, lo estás haciendo muy bien y me está ayudando mucho a iniciarme.

  • Ivan Jair says:

    Hola Gente Game maker.

    Si les intereza les puedo ayudar con eso de que el objeto personaje se queda caminando cuando hace contacto con el objeto bloque, la explicacion del porque se da eso es que el objeto bloque impide que siga caminando el personaje ya que este viaja a pixeles y si hacemos click en tal lugar fuera del desiganado va a seguir intentando llegar a el por esa razon no parara.

    SOLUCION: puden intentar entrando al obj_personaje y dentro colocamos un evento *colision — designamos al [bloque rojo] como obj a colicionar y cuando esto ocurra, la velocidad o speed va a ser 0 o para esto arrastramos ¨¨¨move fixed¨¨¨ y le cliqueamos en el cuadro de en medio _ speed * 0

  • Jose Luis says:

    Si no es mucha indiscreción javifugitivojavifugitivo . Cómo conseguiste ese trabajo, por medio de una demo de videojuego tuyo, se pusieron en contacto con tigo o les tocaste la puerta? sería de gran ayuda saberlo… ; y en caso de que te quieras reservar la contestación lo comprenderé. Gracias por compartir tus conocimientos con los demás que estamos aprendiendo Gml. Un abrazo 🙂

  • javifugitivo says:

    Pues no toque ninguna puerta, simplemente participé en Jams (como Ludum Dare) y me animé a publicar tutoriales en Gamedev.es. Todo suma a la hora de hacerse un nombre. Entonces el cliente contactó conmigo y empezamos a trabajar (y sigo aún desde entonces, hoy mismo presentamos nuestro juego número 19 para el cliente.

    • almasnegras says:

      Hola javifugitivo, quiero que sepas que estoy entusiasmado con tu tutorial, solo tengo dos dificultades que me gustaría saber si puedes ayudarme:
      He agregado dos vistas más para el personaje del demo (o el mío en todo caso): hacia arriba y hacia abajo.
      El problema es que a veces al tener que realizar un camino no directo para moverse (por ejemplo en forma de letra C) mantiene la vista puesta sobre el objetivo, de tal manera que a veces al moverse hacia arriba o hacia el lado contrario al apuntado para esquivar un objeto termina caminando hacia atrás (lo cual vendría bien para un juego de Michael Jackson aunque lamentablemente no es el caso)
      La pregunta es ¿cómo cambiar la vista del personaje de acuerdo a la dirección del segmento del trayecto realizado, como hace directamente por ejemplo el Adventure Games Studio?
      Agradezco enormemente tu voluntad y te mando saludos desde Argentina

  • javifugitivo says:

    Habría que revisar el código y asignar cada sprite de vista a la dirección en la que se mueve, con algo similar a:
    if direction = 90 {sprite_index = spr_personaje_mirando_arriba}
    if direction = 270 {sprite_index = spr_personaje_mirando_abajo}
    if direction = 180 {sprite_index = spr_personaje_mirando_izquierda}
    if direction = 0 {sprite_index = spr_personaje_mirando_derecha}
    También se podría hacer con un switch claro está.

  • Jose Luis says:

    Hola Javi!, tengo una pequeña duda técnica y he intentado muchas cosas pero aun así no logro solventarlo. Por lo visto cuando hago correr un proyecto de game maker, los objetos que se mueven de forma automática derrepente se paran y siguen de forma muy instantánea como si la imagen hiciera hipo. No sé que hacer la verdad….?!

    • javifugitivo says:

      En teoría estoy casi seguro que tiene que ver con las colisiones. Cuando un objeto intenta moverse pero choca con otro, puede que se quede quieto hasta que consigue encontrar una posición libre y entonces salta ahí. Ten mucho cuidado con este tema. Para probarlo, prueba a desconectar todas las colisiones y nos comentas.

  • Jose Luis says:

    Javi no tiene que ver con las colisiones porque ocurre sin más. Te explico un poco. He echo una recreación de un juego clásico de Atari 2600 “ATLANTIS”,vamos a modo de ejercicio; no sé si alguna vez has visto este juego. Sin muchos rodeos, verás que comienza con unas naves alienígenas moviendose de forma lateral de un lado hacia otro de la pantalla, en línea recta. Pues sin tocar ningun mando solamente visualizando el movimiento de las naves derrepente parece que se paran y siguen de forma instantanea, a tropezones, como expliqué anteriormente, como una especie de hipo en el movimiento de las propias naves alienígenas. He probado distintas velocidades de la room pero no consigo resolver el enigma,jeje.

    • javifugitivo says:

      Es algo extraño lo que te sucede, me gustaría ayudarte aunque sea echando un vistazo al proyecto por pantalla compartida y ver dónde puede estar el fallo. Déjame tu skipe y te agrego (dejaré el comentario sin publicar), a ver si sacamos porqué sucede. La única duda que tengo es que sean picos de rendimiento y que estés forzando demasiado el engine, por una programación no demasiado pulida, ya lo vemos en la semana que entra, un saludo.

  • Flayer says:

    ¿No continuais con el tutorial?. Es una pena, sois los únicos en toda la red que he encontrado que trata este genero de juegos con Game Maker 🙁
    Continuadlo por favor.

    • javifugitivo says:

      Soy el primero que quiero continuarlo, pero ha pasado tanto tiempo que tengo que ponerme al día y reempezarlo yo mismo. Ahora he aprendido mucho más y algunas cosas las haría de otra manera. Tengo muchos tutoriales listos para preparar y compartir conocimientos. Lo malo es el tiempo. En cuanto esté algo más libre, no preocuparos que terminaremos este y seguiremos con muchos más, sino Marcos me canea.

  • Jose Luis says:

    Si quieres hasta te paso el proyecto, que como te dije anteriormente, esto es algo que estoy haciendo a modo de ejercicio para seguir aprendiendo. El proyecto esta en .gmk ya que lo estoy haciendo con GM8.0 Pro y sólo pesa 2.56 megas. Si me dices una dirección de correo te lo envío y así le echas un vistazo con calma y cuando puedas.Qué te parece?!

  • Jose Luis says:

    ¿Cuanto es el número de instancias simultaneas recomendables?, es decir, ¿existe alguna cifra de instancias que no hay que sobrepasar para no mermar el rendimiento del motor de juego?

  • javifugitivo says:

    Perdona,pero he estado líado, puedes mandarme el archivo a javimartinez@mechanicmoon.com y en cuanto pueda le echo un vistazo. Sobre lo del número de instancias, depende si usas el Yoyorunner o no y sobre todo la plataforma. Por ejemplo , ahora estamos preparando un juego de bomberos, con muchas instancias de fuego, y a partir de 100, el rendimiento se merma mucho en html5 y sin embargo en ejecutable windows funciona bien. Te diría que en windows, como mucho unas 300 directamente cargadas en pantalla.

    Es encontrar el equilibrio entre rendimiento y jugabilidad. También es bueno desconectar todo lo que no está en pantalla, con instance_deactivate y funciones parecidas, para evitar cargar todo de golpe. Un saludo.

  • Jose Luis says:

    Muchas gracias Javifugitivo!! lo del número de instancias es algo que no tenía muy claro. El prototipo de ” Atlantis” te lo mando hoy mismo,tanto el proyecto en .gmk como el ejecutable en game maker 8.0 pro. Recuerda!! cuando lo cargues observa simplemente el movimiento de las naves parece fluido pero derrepente ocurren esas pequeñas paradas, de vez en cuando, como si le diese hipo a la imagen. Saludos!!

  • cristian says:

    Javifugitivo, gracias por este tutorial.
    Verás tengo un proyecto pensado para android, pero tengo unas dudas en game maker y me gustaría poder contactar contigo para resolverlas.

    • javifugitivo says:

      Te recomiendo que uses algun foro para resolver tus dudas, como la comunidad oficial de Game Maker, la página oficial de Yoyogames que tiene foro de ayuda y también comunidades como el foro de desarrollo de mediavida. En estos momentos no tengo demasiado tiempo como para tutelar a nadie, lamentablemente.

Leave a Reply