Archivo de la etiqueta: Tutorial

Doble Salto en Juegos de Plataformas – Sunny Land en Godot

¡Hola amigos! En este turorial voy a explicarles cómo extender las funcionalidades de Sunny Land, el juego de plataformas que desarrollé hace unos meses, añadiendo la posibilidad de dos o más saltos en el personaje principal. Hago este tutorial porque un usuario me comentó que estaba intentando programar el doble salto del personaje y para ello había duplicado el estado de saltar en la Máquina de Estados.

Seguir leyendo Doble Salto en Juegos de Plataformas – Sunny Land en Godot

Mecánica de Movimiento en Juegos de Carreras

En la lista de tutoriales me dejaron la petición de las mecánicas para un juego de carreras. No he podido desarrollar el demo completo, tuve chance de estudiar un poco sobre las formulas de movimiento que podemos aplicar para los vehículos. Este método lo aplicó GDQuest en un repositorio que data del 2017, y usaba un auto como ejemplo. Yo usaré un barco, el funcionamiento es el mismo.

Seguir leyendo Mecánica de Movimiento en Juegos de Carreras

Enemigos que te disparan

Ya estoy retomando el ritmo de los tutoriales, vamos ahora con otro en la Lista. Les enseñaré a hacer enemigos un poco más inteligentes, que puedan dispararle a los jugadores cuando se encuentren cerca. Para esto podemos tomar prestado código del Juego de Plataformas Sunny Land y el Asset de la Máquina de Estados. Si al momento de ver este vídeo todavía estoy mudando los repositorios a GitLab, pueden obtener el código de los artículos.

Seguir leyendo Enemigos que te disparan

🔨 Creación de recursos TileSet para los mapas 2D en Godot 3.1 🧩

En Godot 3.1 el editor de TileSets mejoró drásticamente, haciendo mucho más fácil la creación de los recursos que usaremos para nuestros mapas de dos dimensiones. Sean AutoTiles o por separado.

Pasaré a explicarles como funciona este, prácticamente, nuevo editor de Godot.

Crear y editar un nuevo recurso

Dirijan la mirada al apartado de “Sistema de Archivos”. Hagan clic derecho sobre el lugar donde quieran crear un nuevo recurso Tileset y presionen clic derecho > Crear Recurso. El navegador de recursos es similar al de Nodos, busquen “TileSet” y listo. Lo guardan donde quieran, y después le dan doble clic sobre el Sistema de Archivos, para que se abra el editor.

Perfecto; ahora podemos crear un AutoTile o varios Tiles separados (Incluso los dos juntos).

Creando AutoTiles

Para esto ustedes deben tener preparada una hoja de Sprites con los tiles que van a necesitar, colocados en función de que sea fácil entender cómo es que deben estar colocados cuando Godot les dé posiciones. Usaré esta hoja:

Presionando el botón de “+” podrán añadir la imagen que quieran, yo seleccioné la hoja de arriba.

Ahora tienen que seleccionar el tipo de recurso que quieren crear. Elegiré primero el AutoTile, y después crearemos “un sólo tile”.

Después de presionar sobre el Autotile, se nos permitirá seleccionar la “región” o la “zona” de nuestra hoja, que tiene los Tiles que necesitamos. Para hacer que el selector sea más exacto, presionemos el botón con el imán:

Sin embargo, los Tiles son más pequeños que los cuadrados de ahí. Para reducir el tamaño, vamos al inspector y cambiamos el «Snap» a valores de 16×16. Cuando la tengamos así, podremos seleccionar exactamente la zona de los tiles (el snap.x es el tamaño horizontal de tus tiles, y el snap.y es el vertical).

Ya tenemos los Tiles que queremos usar, ahora vamos a la sección de «Collision», allí podremos hacer que los tiles sean sólidos para nuestro personaje. Nos encontraremos con que los cuadrados siguen siendo más grandes que la imagen (por lo menos en mi caso). Lo que haré será dirigirme nuevamente al inspector y abrir la sección «Selected Tile» , buscaré la propiedad «Subtile_size» y ajustaré los valores de «X» y «Y» al tamaño de mis tiles.

Ahora sólo debemos hacer un clic sobre la herramienta de rectángulo (la segunda, de izquierda a derecha), y después en los tiles que queramos como cuerpos sólidos.

Cuando tengamos todas las colisiones que necesitamos, pasaremos a la sección «BitMask», para definir cómo reaccionarán los Tiles mientras se estén creando. Deben hacer clic en todo el espacio que ocupa cada tile, menos en los bordes. Como en esta imagen:

Si el cuadrado rojo es muy grande para sus tiles, vayan al inspector y en la sección «Selected Tiles» cambien la propiedad «Autotile Bitmask» de 2X2 a 3X3.

El AutoTile ya debería hacer su trabajo correctamente. Añadan el recurso a algún nodo Tilemap y vean el resultado:

Recuerden que deben cambiar el tamaño de las celdas por el de sus tiles.

Creando tiles únicos

Para esto pueden usar también una hoja de sprites. Yo seguiré con la misma de antes. En lugar de seleccionar «AutoTile», hacen clic en «Single Tile».

Básicamente es lo mismo que usar Autotiles, con la diferencia de que por cada nuevo «Single Tile», debes hacer clic en el botón amarillo para crearlos y seleccionar otra zona de la imagen.


Espero que este tutorial sea suficiente para ustedes. Dentro de poco compartiré un vídeo siguiendo los pasos de este artículo.

Godot Engine: ¿Cómo crear una Máquina de Estados? I

¡Hola compañeros! Hace ya muchas noches de insomnio que empecé con el nuevo proyecto de plataformas. Quiero anunciar que ya se encuentra casi terminado, pero hoy me gustaría mostrarles algo diferente…

He dividido cada funcionalidad del juego en un paquete, como un Asset independiente, para que ustedes puedan tomar la parte que más les interese y puedan adaptarla a sus proyectos con facilidad. El primer Asset de estos que publicaré, será la Máquina de Estados que pueden usar para los personajes jugables, ya que la implementada en los NPC será diferente, incluyendo cosas relacionadas con la IA (Inteligencia Artificial)…

Esta noche les enseñaré a elaborar una máquina de estados en Godot Engine, así estarán preparados para el momento de descargar el Asset o, simplemente, sabrán los pasos para desarrollar su propia máquina. Sin embargo, puede que esto sea algo extenso, dividiré el tutorial en dos partes.

La escena del Jugador y los Nodos necesarios

¿Ya tienen identificado a su jugador? ¿Todas las animaciones de las que dispondrá? De ser así, podemos empezar a añadir los nodos que formarán parte de la Máquina de Estados. Miren este árbol de nodos, es mi jugador:

Ustedes deben decidir que tipo de nodo será la raíz de su jugador, el mio es un KinematicBody2D, por lo tanto también hago uso de un CollisionShape2D. Para controlar las imágenes del personaje uso unas hojas de sprites, divididas de la siguiente forma, que coloco en el nodo Sprite (llamado: Images):

Para animar las hojas de Sprites es necesario que también añadan un nodo AnimationPlayer, como ven en la imagen de arriba. El nodo de “BodyPivot” es un Position2D y después de crearlo, dentro de él añado el Sprite, ya que al momento de elegir la dirección del personaje (izquierda o derecha) parece más ordenado alterar un Position2D que el Sprite (Sin embargo, pueden prescindir del Position2D y usar únicamente el Sprite).

Antes de empezar con la máquina de estados…

Supongamos que todavía no crearemos la máquina de estados. Primero “prepararemos el terreno”: vayan al AnimationPlayer y empiecen a añadir una animación para cada “Estado” de la máquina.

Esta es mi animación de “Idle”. Algo que tienen en común todas las otras animaciones, es que tienen que cambiar la Textura (Asignando la hoja indicada para el estado Idle), los Hframes (El numero de frames horizontales) y la propiedad Frame (Esta cambiara cada microsegundo, y representa la imagen actual). Cuando ya cada Frame de la hoja ocupe un microsegundo, marquen el tiempo final y coloquen que esa será la duración total de la animación. Además activen las flechas que están a la derecha del tiempo total, (como yo, que las tengo en azul) para que la animación se repita. Sólo la tienen que desactivar en animaciones de un disparo, como la de Ataque.

Ahora les dejaré una imagen con todas las animaciones que voy a usar para mi máquina de estados:

Si no sabes usar el AnimationPlayer, puedes ver este tutorial de aquí, donde enseño sobre la animación de personajes usando hojas de sprites (Estoy por actualizar el Tutorial).

Llegamos al último paso antes de crear la máquina de estados. Vamos a añadir un Script para nuestro nodo principal. Aquí el mío:

Como ahora sólo tenemos a un personaje que salta, se mueve y ataca, no necesitamos muchas líneas. Sin embargo explicaré cada sección de mi Script:

  1. Variables: ahí se definen las variables que se encargaran de representar la física y las aceleraciones, tanto para el salto como para el movimiento. Estos últimos se expresan en “float” (números con decimales), o también en números enteros. La velocidad (velocity) es la variable que representa los cálculos del M.R.U (Física: Movimiento Rectilíneo Uniforme), es Vector2 porque necesita un valor para el eje horizontal y otro para el vertical.
  2. _physics_process(delta): como sabrán, esta función se ejecuta en cada frame del juego (hay como 30 frames por segundo). Dentro de ella llamo a una función que he creado para aplicar una gravedad constante todo el tiempo. Es más fácil aplicar desde el jugador la gravedad, que crear la misma función en los estados que necesiten hacer uso de ella.
  3. _input(event): esta función se ejecuta cada vez que el jugador presiona una tecla o, en caso de los teléfonos, toca la pantalla. Recibe un parámetro llamado event, que representa el botón exacto que fue presionado o el gesto que se realizó en la pantalla. Dentro de esta función estoy comprobando que flecha fue presionada, entre la izquierda y la derecha (como esta el código ahora, cuando se presiona la “izquierda” la variable vale -1, y cuando se presiona “derecha” vale 1). Según el resultado, la dirección de la imagen cambiará (Nunca debe valer 0, por eso uso esa condición en el if. De lo contrario, la imagen desaparecería). Nota: cuando cambias por números negativos la escala de un nodo, este se voltea. Osea que en mi código lo que hago es voltear la imagen. Ustedes pueden lograr un resultado similar si usan el método “flip_h = true” de los nodos Sprite2D.
  4. apply_gravity(delta): cada vez que inicia esta función se le suma al valor anterior de la variable que controla la velocidad vertical (velocity.y) el producto de multiplicar la gravedad por el tiempo físico (delta). Esto se sumará hasta que el jugador toque el suelo (if is_on_floor()), donde la velocidad vertical vuelve a ser 0. La función move_and_slide() se usa para mover al jugador según una fórmula física que haga uso de la Velocidad. Pero también hay una alternativa que permite usar unicamente el resultado de la Distancia… Sin embargo esos son otros temas, y creo que ya sabían bien que es el move_and_slide(). Cuando el get_slide_count() no sea 0, significará que el jugador esta colisionando con algo. Entonces comprobaremos que este chocando por debajo del cuerpo para decir que la velocidad vertical vuelva a 0. Si no hacen eso, notaran que cuando chocan debajo de un bloque, el jugador se queda en el aire un tiempo.

Muy bien. Después de esto ya el siguiente paso sería añadir los nodos de la máquina, junto con el código que necesitan para funcionar. Por hoy hemos finalizado la primera etapa. ¿Qué les ha parecido? Me estaban reprochando hacer siempre un enfoque básico, redundando en muchos temas… ahora quiero ver que tal queda este “nivel” de dificultad, donde doy por hecho que ya saben de algunas cosas para seguir el artículo.

🤖 Los nodos y las escenas 🎬 – en Godot 🚀

Ahora que conocemos un poco de Godot, podemos aventurarnos a crear componentes y niveles para nuestro juego. Pongamos como ejemplo la habitación de una casa: un lugar decorado con muchos muebles y un par de personajes con los que podemos interactuar. Cuando nos referimos a ella, lo hacemos como “Escena” ¿no?. Pues en la “escena de la habitación” tenemos diferentes muebles u objetos, que podemos llamar “Nodos”.

Partiendo de ese concepto todo se hace más sencillo: Godot nos permite formar todos los cuartos (escenas) que necesitemos y amueblarlas con cualquier objeto (Nodo) que le dé sentido a nuestro juego.

Cunado estamos creando una nueva escena, vamos a tener lo siguiente:

Tres botones para los principales tipos de escena y un botón personalizado.

Siempre que estemos creando una escena, vamos a tener esas cuatro opciones, todas las escenas necesitan un nodo principal, osea un nodo que sea el padre de los demás nodos que se encuentren dentro de esa escena. Si seguimos el ejemplo de la habitación, tendríamos que seleccionar una “Escena 2D” si nuestra habitación es en dos dimensiones o, “Escena 3D”, en caso de que sean tres. Esto es así para que sea más fácil trabajar con objetos “2D” teniendo una habitación que sea un “Nodo 2D”. ¿Suena lógico no? Me refiero a usar un nodo 2D para que sea padre de otros nodos en dos dimensiones… sin embargo, esto no es algo obligatorio, ustedes pueden poner de nodo principal cualquier otro y conseguir lo que necesitan, son libres de hacer lo que mejor se ajuste a su proyecto. Yo pienso que para trabajar en orden, es mejor el primer método que mencioné.

Entonces, una vez seleccionada la “Escena 2D” vamos a tener una nueva escena cuyo único nodo es de tipo “Nodo 2D”. Les recuerdo que cada escena sólo puede contener un nodo principal, tienes que elegir bien si están creando una escena en dos dimensiones, tres dimensiones, o simplemente una interfaz de usuario.

Ahora que tenemos nuestra escena, podemos añadir nuevos nodos haciendo clic en el Nodo2D y presionando clic derecho>AñadirNodoHijo.

Godot nos presentará un menú con todos los nodos disponibles: los verdes son componentes optimizados para crear interfaces de usuario, los azules son los que más vamos a requerir, forman parte de los nodos optimizados para dos dimensiones, así como los rojos son del espacio 3D. Si hacemos clic en algún nodo, vamos a tener debajo una descripción, esto es muy importante para saber que componente necesitamos, aunque el mismo nombre ya nos puede dar una idea de su función.

Para finalizar este capítulo, vamos a añadir un nuevo nodo llamado “Sprite”: Clic derecho en nuestro nodo principal y después ”Añadir nodo hijo”. En el navegador de nodos escribimos el nombre que estamos buscando y seleccionamos el “Sprite” azul: Una vez creado, podemos hacerle clic y ver todas sus propiedades en la sección del Inspector.

Si hacemos clic en la propiedad “Texture” nos permitirá cargar una imagen .png que tengamos en nuestra carpeta de proyecto, vamos a hacer clic en “Cargar” o “Load” y seleccionamos el icono que se crea en cada proyecto de Godot.

El resultado sería el siguiente:

Muy bien, ya saben que las escenas en Godot siempre tienen un nodo principal y muchos nodos descendientes que ayudan a darle una función a la escena. Una definición más teórica sería la siguiente:

Escenas: conjunto de Nodos que forman un escenario o componente. Las escenas no necesariamente deben ser una habitación, una escena puede tener como nodo principal un cuerpo físico 2D e hijos que ayuden a formar un personaje como el jugador, en este caso, dejan de llamarse “Escenario” para ser denominadas “Componente” del juego. Otro ejemplo sería, añadir una nueva “Escena” y poner como nodo principal un Sprite con la imagen de una moneda, además de otros nodos hijos, que, al guardar, nos permita disponer del “Componente Moneda” para usarlo en un verdadero nivel dentro del mismo proyecto.

Nodos: Son las piezas (como objetos) que conforman una escena. Cada nodo tiene una función única, pero también debemos tener algo en cuenta: cuando estamos creando un nuevo nodo, veremos que dentro del Nodo2D hay muchos nodos azules que son sus hijos… pues bien, cada nodo que sea hijo de un “Nodo2D” siempre hereda todas las propiedades de su padre. Pueden comprobar eso haciendo clic en el nodo2D y viendo en el inspector las propiedades que dicen “Node2D” (Position,Z-indiex,etc) para después hacer clic en el Sprite y ver que, en el inspector, además de sus propiedades naturales, hay una sección llamada “Node2D”, con las mismas características de un nodo tipo Node2D.

Llegamos al final de este capítulo. Guarden la escena presionando Control+S y coloquen cualquier nombre, usaremos esta escena la próxima vez.

Repasando la interfaz de Godot 💻 📝

¡Hola Amigos! Vamos a analizar las partes del editor de Godot.

Partiendo desde un proyecto inicial, tenemos lo siguiente:

Podemos dividir el editor de Godot en tres secciones principales: “Izquierda”, “Centro” y “Derecha”.

El la parte de arriba, podemos encontrar un menú con las opciones típicas de cualquier programa a la izquierda. Los botones “2D”, “3D” y “Script” se usan para pasar de una pantalla principal a otra. En la pantalla de “2D” y “3D” podemos editar escenas con dicha perspectiva, mientras que en “Script”, vamos a editar todo lo relacionado con código en el proyecto.

Como dije hace un momento, Godot se divide en tres secciones: en la izquierda encontraremos la pestaña de “Escena”. Allí se administran los componentes de cada nivel u objeto, en el siguiente capítulo la veremos más a fondo. Justo a su lado, encontramos la pestaña “Importar”, la cual es usada para cambiar los parámetros de un archivo dentro de la carpeta de proyecto.

Debajo de “Escena” y como última pestaña en la izquierda, tenemos el “Sistema de Archivos”. Es parecido al navegador de carpetas que hay en nuestro sistema operativo. Desde él, podemos acceder a todos los recursos que tenemos dentro de nuestra carpeta de proyecto, y si hacemos clic derecho en una carpeta dentro del “Sistema de Archivos” podemos seleccionar la opción que dice: “Abrir en navegador” para poder usar rápidamente el navegador de carpetas de nuestro sistema operativo y realizar cualquier cambio.

Pasando ya al centro del editor, tenemos lo siguiente:

En la parte superior encontramos las herramientas correspondientes a nuestra perspectiva, yo tengo en la imagen las herramientas de una vista “2D”. Si nosotros cambiamos a la pantalla de Scripts, veremos como desaparecen esas herramientas por un menú. También podemos apreciar que las pestañas inferiores (“Salida”, “Depurador”, “Audio”, “Animación”) no cambian si pasamos entre pantallas. Cuando activamos una de esas pestañas, por ejemplo: “Salida”, vamos a abrir la consola, una herramienta útil para imprimir valores desde código. Para finalizar el resumen de esta sección, debo mencionar que la pestaña “Depurador” se abrirá automáticamente cada vez que recibamos un error o tengamos una advertencia. De lo contrario, nosotros mismos podemos abrirla para enterarnos de los valores actuales en una variable, los recursos que consume el proyecto, etc.

La última sección del editor, es la derecha:

Aquí tenemos la pestaña de “Inspector” y “Nodos”. La primera se encarga de presentar todas las propiedades que tenga un nodo, permitiendo modificarlas, Los nodos se crean en la pestaña de escena y son los componentes de cada proyecto, en el siguiente capítulo veremos más sobre ellos. Como segunda pestaña tenemos “Nodos”, contiene dos características muy útiles en Godot: la posibilidad de trabajar con señales y, además, administrar grupos para cada nodo seleccionado en la Escena.

Fin del capítulo. Ya conocen cada parte de Godot, durante los siguientes artículos aprenderemos un poco más de cada sección y mediante la practica nos acostumbraremos a esta interfaz, que para un flujo de trabajo, muchos la consideran excelente.

Crear nuevos proyectos en Godot 🤖 📂

¡Hola amigos! Hoy veremos cómo se crean nuevos proyectos en Godot Engine.

Cuando hagamos clic sobre el ejecutable de Godot, vamos a ver la siguiente pantalla:

Al principio no tendremos ningún proyecto creado. Si hacemos clic en la pestaña de “Plantillas” podremos descargar desde los servidores oficiales de Godot, un juego gratuito y libre de modificar.

Ahora veamos estas opciones:

Por ahora podemos ignorar el botón “Escanear” junto con todos los grises oscurecidos. Si queremos crear un nuevo proyecto haremos clic en “Nuevo Proyecto” o, en caso de que tengamos uno descargado, hacemos clic en “Importar”. Cuando importamos un proyecto tenemos que seleccionar la carpeta donde se aloja y hacer clic en el archivo proyect_godot, pero ya lo veremos, más adelante.

Nosotros haremos clic en “Nuevo proyecto”. Por esta ventana podemos elegir un nombre y la ubicación del proyecto. Es necesario que la carpeta donde lo vayamos a guardar se encuentre vacía, para eso podemos, después de colocar un nombre, hacer clic en el botón de “Crear Carpeta” y después “Crear y editar”.

Perfecto. Ya tenemos nuestro proyecto creado, en el siguiente capítulo explicaré las partes del editor.

Animaciones con el nodo Tween – Godot Engine

Si necesitamos una animación muy básica, donde sólo tenemos que cambiar algunas propiedades de un nodo, puede que usar AnimationPlayer sea muy exagerado. Ese nodo dispone de muchas funciones que para una animación sencilla no hacen mucha falta, así que Godot nos ofrece una alternativa con el nodo Tween, para tener animaciones sencillas o hasta con un cierto nivel de complejidad.