Godot 2D #1: Movimiento TopDown básico
¡Muy buenas a todos!
¿Quieres crear un sistema de movimiento para tu personaje?
Entonces este es tu tutorial. Vamos a ver cómo hacerlo desde cero, desde los conceptos que debemos tener en cuenta, hasta cómo implementarlos en Godot. En el vídeo que tengo en mi canal de YouTube lo podéis encontrar explicado de forma más específica y detallada, ¡así que no dudes en echarle un ojo! Dicho esto, vamos al lío.
Esta entrada corresponde a la parte escrita del vídeo que he mencionado en el párrafo anterior. Por lo tanto, si quieres ver este mismo tutorial de una forma más visual, ¡no dudes en hacerlo!
Este vídeo incluye una explicación de los conceptos "más complejos" que utilizamos para crear este sistema de movimiento. Si quieres aprender un poco más a fondo qué estamos haciendo, ¡te recomiendo mucho que te pases por ahí! Además, al final de este tutorial tendrás un apartado para copiar el código final sin problema.
Vídeo de este tutorial:
https://www.youtube.com/watch?v=HLBWRSiE5lY&t=6s
Antes de nada, debemos crear un proyecto nuevo y guardarlo donde nosotros queramos (puedes hacerlo nada mas ejecutar Godot clickando en "Nuevo Proyecto"). Una vez que lo tengas, deberías llegar a una pantalla como esta:
Como este proyecto es en 2D, nos iremos a la parte del entorno para trabajar en 2D arriba del todo. Luego crearemos nuestro primer nodo haciendo click en "Escena 2D" en la parte de la derecha de la pantalla (puedes ver dónde clicar mirando la imagen).
Una vez hecho esto, se creará un nodo llamado "Nodo2D". Este nodo es el padre de la escena y es sumamente importante, ya que es el que hace que la escena exista y, cualquier cosa que le añadamos, siempre será hijo de este nodo.
Queremos añadir un nodo para crear un personaje que se mueva en 4 direcciones: arriba, abajo, izquierda y derecha. Para ello, vamos a emplear un nodo especial llamado "KinematicBody2D", que nos facilitará las cosas en el futuro ya que es un nodo pensado para que se mueva, calcule correctamente colisiones, etc..(está preparado internamente para ello).
Para añadir un nodo simplemente haremos click izquierdo sobre nuestro "Nodo2D" y, a continuación, le daremos al simbolito de "+" que hay arriba. Se nos abrirá una pestaña y buscaremos el nodo "KinematicBody2D". Puedes verlo en esta imagen que te dejo aquí:
Una vez creado, repetiremos este mismo proceso pero esta vez crearemos un nodo llamado "Sprite", que nos permitirá ponerle texturas y es lo que usaremos para ver dónde está nuestro personaje. Además, aprovecharemos y cambiaremos el nombre del "KinematicBody2D" a "Player" (o el nombre que queramos darle para saber que ese es el jugador):
Como puedes ver, hemos creado un nodo llamado "Sprite" como hijo de "Player". Si esto no te ha quedado así no te preocupes, basta con usar el ratón arrastrando ese nodo dentro de la jerarquía de nodos (la pestaña que se muestra en la imagen), y arrastrar a nuestro "Sprite" sobre el nodo "Player" que automáticamente se hará hijo suyo. Esto es muy útil para reasignar nodos, créeme, es una funcionalidad que usarás a menudo.
Quizás te preguntes qué es la exclamación amarilla que aparece al lado de "Player", no te preocupes, que no te va a explotar el ordenador por tener eso. Este warning nos avisa únicamente de que no le hemos puesto una colisión al personaje. Para este proyecto no lo necesitamos pero si quieres usarlo, pásate por mi canal de Youtube que tengo vídeos sobre el tema.
Si tienes todo como en la imagen de arriba puede seguir adelante.
Una vez que lo tengas, vamos a añadir un Script a nuestro "Player". Sí, esto está pasando, ¡vamos a programar!
Para añadir el Script basta con clickar al nodo "Player" y darle a "Añadir Script", que es un icono de un pergamino con un +. Le daremos a crear nuevo Script y listo, podemos empezar a programar.
Una vez que lo hayas hecho, se abrirá una nueva pestaña llamada Scripts. Aquí es donde emplearemos la mayor parte de nuestro tiempo a la hora de hacer un juego.
Lo primero que vamos a hacer es borrar casi todo lo que tenemos en pantalla. Si por cualquier motivo no sabes para qué sirven esas funciones, pásate por el vídeo en el que las explico detalladamente.
Vamos a crear una nueva variable llamada "motion", esta variable es un Vector2 (un Vector matemático con 2 elementos: x,y). Sin meternos mucho en materia o sin profundizar demasiado, te diré que un vector es una flecha que apunta hacia un sitio determinado. Lo que vamos a hacer es decirle a nuestro personaje que se mueva en la dirección a la que apunte "motion", simple ¿no?
extends KinematicBody2D var motion = Vector2()
El problema es que "motion" ahora mismo vale (0,0), es decir, que no tiene ninguna dirección.
Para mover a nuestro personaje tenemos que modificar estos valores. Para ello, vamos a usar la función "_physics_process(delta)". Esta función está preparada internamente para que todas las cosas relacionadas con la física y las mates ocurran dentro de esta función (está optimizada para ello). Como queremos mover un objeto, es recomendable hacerlo aquí.
extends KinematicBody2D var motion = Vector2() func _physics_process(delta):
La cosa es, ¿cómo le decimos al entorno que queremos mover un objeto?
Para resolver esta cuestión, primero debemos tener claro cómo queremos meter un Input, es decir, qué teclas o elementos queremos tocar nosotros desde fuera para hacer que nuestro personaje se mueva. Para ello, vamos utilizar cosas que ya están programadas de antes por el propio entorno, pero también es posible cambiar las Inputs manualmente y customizando las teclas que queremos (por ejemplo W,A,S,D). Esto lo explico rápidamente en mi canal de YouTube, no dudes en echarle un ojo.
Para mover a nuestro personaje, deberemos decirle al entorno que, si estamos pulsando la tecla que hayamos elegido para mover al "Player", cambie el valor de nuestro "motion" en el eje que nosotros queramos. Pero si no estamos pulsando nada, que nuestro "motion" valga 0 (así no apuntaremos a ningún sitio y el personaje no se moverá).
Una vez que esto esté listo, le diremos que nos mueva al "Player" el valor de "motion". Para ello, usaremos la función "move_and_slide()". Vamos a programar primero el movimiento en el eje x, para ello escribiremos:
extends KinematicBody2D var motion = Vector2() func _physics_process(delta): if Input.is_action_pressed("ui_right"): motion.x = 100 elif Input.is_action_pressed("ui_left"): motion.x = -100 else: motion.x=0 motion=move_and_slide(motion)
Si ejecutamos nuestro programa dándole al play arriba del todo (nos pedirá guardar la escena), veremos que si le damos a las flechas del teclado, nuestro personaje se moverá a la izquierda y a la derecha, y se parará cuando no toquemos nada.
Una vez hecho esto, solo tenemos que programar el movimiento arriba y abajo también siguiendo los mismo pasos.
Deberemos tener una cosa muy en cuenta que si queremos que se mueva nuestro personaje en diagonal (pulsando arriba y a la derecha a la vez por ejemplo), deberemos cambiar de posición el lugar donde ponemos "motion" a 0 (esta vez usando tanto x como y), ya que si no el personaje no se moverá. Cuando lo tengas, solo tienes que darle al play y ver como tienes un personaje 2D completamente funcional que se mueve en todas direcciones. Al darle por segunda vez al play, seleccionaremos la escena principal, y ya siempre que le demos al play se nos abrirá esa escena, aunque esto podríamos cambiarlo (pero ya es cosa de otro tutorial que crearemos más adelante ).
Si tienes el código tal y como he puesto ahí abajo, ya tienes todo listo, sólo hay que darle al play.
Este de aquí el código final, así que puedes copiarlo desde aquí directamente a tu proyecto y funcionará.
extends KinematicBody2D var motion = Vector2() func _physics_process(delta): motion=Vector2(0,0) if Input.is_action_pressed("ui_right"): motion.x = 100 elif Input.is_action_pressed("ui_left"): motion.x = -100 elif Input.is_action_pressed("ui_left"): motion.y = -100 elif Input.is_action_pressed("ui_left"): motion.y = 100 motion=move_and_slide(motion)
Y hasta aquí este tutorial, si tienes alguna duda no dudes en dejarme un comentario en el vídeo e intentaré contestarte lo más rápido posible.
Además, si quieres descargar este proyecto tienes aquí un enlace donde puedes descargártelo e importarlo a tu ordenador, así podrás ver todo mucho más de cerca. Solo tienes que darle al link, saltar la publicidad y descargarlo.
¡Nos vemos!
Para acceder sin problemas completa el captcha, todo lo que se te abra cierralo, es publicidad. Cuando se haya puesto el captcha con un tick, más abajo aparecerá un botón azul "click here to continue". Le dais click y cargará otra página (ojo, si se abre una pagina nueva como antes, ciérrala es publicidad otra vez, la siguiente página tiene que aparecer donde estáis). Después, esperáis a que la cuenta llegue a 0 y más abajo hay un botón verde que pone "get link". Cerráis todo lo que os salga, y finalmente en la propia página llegareis a GitHub donde podéis descargar el proyecto.
El vídeo de este tutorial:
Mi canal de YouTube:
https://www.youtube.com/channel/UCAwrHOXBtRvfw034z7BjIhw
¿Alguna duda? Déjame un comentario aquí abajo y te contestaré lo más rápido posible. También puedes hacerlo en el propio vídeo del tutorial que está en YouTube.