Archivo de la categoría: Aprende

Recopilación de mis tutoriales y recursos para aprender sobre el desarrollo de vídeojuegos.

Botones virtuales para juegos en dispositivos móviles – Godot Engine

¡Hola! en este tutorial veremos una pieza fundamental para juegos de teléfonos. Incluir teclas virtuales en Godot es súper sencillo. Este artículo es una adaptación de otro tutorial, así que necesitarán que su personaje ya se pueda mover con un teclado desde la computadora.

Mi código de movimiento, sería algo como esto: (noten que en la dirección de izquierda o derecha, se define con la entrada de la acción «ui_right» y «ui_left»)

Muy bien: entren en la escena principal del juego y dentro de un nodo CanvasLayer, añadan los botones que necesiten para mover a su personaje, con el nodo de tipo TouchScreenButton. Un aproximado, serían tres de esos nodos, uno para la izquierda, otro para la derecha y un último para la flecha de saltar. A cada uno le colocan una imagen correspondiente a su acción: el primero se llama izquierda, tiene la flecha izquierda, el derecho es derecha, tiene su flecha, y el último se llama salto, con la flecha que apunta hacia arriba.

Para decirle a Godot que presionar esos botones desencadena una acción, la clase TouchScreenButton tiene una propiedad llamada «Action» que al ser presionada, producirá una entrada con el nombre que digamos. A cada dirección se le asignará una acción diferente: a izquierda y derecha, ui_left y ui_right respectivamente, ya que son las acciones que buscamos para mover horizontalmente a nuestro jugador. Y al salto, le corresponde ui_up.

Lo último que falta configurar para estos nodos, es que en su propiedad “Visibility Mode” indiquemos “Tuch screen only” para que sólo se muestre cuando el juego se ejecute sobre un entorno donde exista una pantalla táctil. Y si quieren emular un toque de la pantalla con el puntero del mouse, vayan a los Ajustes de Proyecto y, escribiendo «touch» en el buscador, activen la emulación de los toques.

De esta forma terminamos. Ahora, tocar esos botones produce el mismo efecto que presionar el teclado.

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

¡Buenas noches! O mañana. Hoy terminaremos de crear nuestra Máquina de Estados.. sí, quizás sea incluso más trabajo que en la primera parte.

Antes de continuar, quiero avisar que ya hay dos repositorios publicados: el primero fue, como dije en mi artículo pasado, la Máquina de Estados. Por último esta el proyecto de plataformas completo. Dejaré los respectivos enlaces:

Oh, casi lo olvido: la primera parte de este tutorial se encuentra aquí.

Scripts importantes, y los estados de la máquina.

Vuelvan sobre su jugador. Es hora de que añadan un nodo llamado “Node”, y lo nombren «StateMachinePlayer» o algo por el estilo. El nodo «Node» es de las mejores opciones, ya que no utiliza otras funciones de nodos que puedan retrasar el rendimiento de nuestra Máquina de Estados.

El nodo principal de la máquina, tendrá como hijos directos otros nodos del mismo tipo, con el nombre de su respectivo estado. Por ejemplo: (Walk, Idle, Jump). Después les colocaremos un Script que se encargue de cada comportamiento, pero eso después.

Ahora que tenemos los nodos, los dejaremos ahí. Es necesario que hagamos un Script que se pueda usar en cualquier otro personaje que posea una Máquina de Estados. Un Script que sea la máquina de estados en sí. Con eso, simplemente tendremos que usar un “controlador” dentro de cada nodo que tenga la máquina de estados. Si no lo hacemos así, tenderemos a escribir más código del necesario, al momento de añadir una Máquina de Estados a cualquier otro personaje del mismo proyecto.

Ese Script lo crearemos de la siguiente forma:

Les mostraré lo que deben colocar dentro, y explicaré cada parte:

El diccionario “states_map” se encarga de guardar la dirección de todos los nodos que sean “estados” de la máquina. Ahora la dejamos vacía, pero en el “controlador” que se encuentra dentro de cada personaje, cuando llegue el momento, le daremos un valor. Por otro lado, “current_state” recibe el estado actual, y la “_active” es para el encendido y apagado de la máquina.

Para las funciones sí enumeraré una lista, vamos por ello:

  1. _ready(): Esta es muy simple. Todos los estados de la máquina van a disponer de una señal llamada “finished”. Es necesario que estén conectados a nuestra función de “change_state”, para que cada vez que termine un estado (“finished”) la máquina reciba la llamada y cambie al nuevo estado. Nota: los “hijos” son los nodos que creamos arriba, pronto les asignaremos un script con la señal “finished”.
  2. _input(event) and _physics_process(delta): Llegando a esta parte se darán cuenta de que usamos “current_state”. Sepan que esa variable guarda un nodo (cuando no es null). Ese nodo es uno de los estados, y todos los estados cuentan con una función llamada “handle_input(event)” y “update(delta)”. Sí… son un reemplazo de la función _input() y _ physics_process. No usamos las funciones “originales” dentro de los estados, porque crearía conflictos al manejar diferentes modos del parámetro “Event” y el tiempo “Delta”. Así como lo tenemos ahora, estamos usando un único valor que sale desde la Máquina de Estados.
  3. change_state(state_name): En esta función cambiamos los estados. Lo primero que se hace es comprobar que la máquina esta activa. Después, el estado actual se actualiza por la búsqueda que se realice en nuestro diccionario de mapas. Por ejemplo, sabiendo como funcionan los diccionarios en GDScript, para buscar el nodo “Idle”, tenemos que colocar la clave con la que guardamos ese estado. Esa clave es el “state_name” y cada vez que se emite la señal “finished”, se pasa un valor con el nombre del nuevo estado de la máquina. Tal que así: “emit_signal(‘finished’,”Idle”)”. Para finalizar, lo último es activar la función “enter” del estado actual. Seguro lo adivinas: “enter” es el reemplazo de los estados para “ready”.
  4. set_active: Otra papaya. Simplemente se encarga de activar o desactivar las funciones cuando llamemos a la función “set_active(true or false)”.

Perfecto, o casi perfecto. Puede que falten cosas por mejorar, pero ahí vamos aprendiendo. Por ahora nuestro código para la Máquina de Estados esta listo. Así como tenemos un script principal para la máquina, necesitamos uno para los estados. Cada estado independiente podrá heredar las funciones principales sin necesidad de repetir código.

Crearemos el script de la misma manera que el primero. Miren ahora, este es el código que tengo yo:

Muy corto. Primero creamos la señal “finished”. Recuerden que la invocamos en todos los estados, dentro del script de la máquina. Cuando usamos unos paréntesis para la señal, estaremos indicando que es necesario mandar un valor, cada vez que emitimos la señal. Nosotros generalmente haremos esto: “emit_signal(“finished”, “State_Idle”)”.

De resto, se darán cuenta que son las funciones que llamamos en el otro script. En el nodo principal no tienen importancia, sólo las colocamos para que estén creadas por defecto cada vez que añadamos un estado en nuestra máquina.

Controlador de la máquina dentro del jugador

Ya estamos terminando con nuestro trabajo. Vamos a crear el script del “controlador” de la máquina, en el nodo “StateMachinePlayer” que creamos al principio de este artículo. Aquí el código:

Fíjense que en donde dice “extends” he borrado la palabra “Node” y lo he reemplazado por la ruta que tiene el script de la Máquina de Estados principal dentro del proyecto. Eso hará que el código del otro script, forme parte del controlador, sin tener que escribirlo.

Ya que tenemos esto, pasemos a la función _ready(). Aprovechando que sólo se ejecuta una vez, pasaremos el nombre de cada estado (la clave), y su respectiva dirección dentro del jugador. Como son hijos del controlador, sólo hay que usar el signo “$” y escribir el nombre del estado, que generalmente es el mismo que la clave. Por último en esa función, usamos la función change_state(“Idle”) para decir que el primer estado en que se encontrará el jugador será el “Idle”.

Repetiremos una vez más la función change_state(state_name), y en su primera línea colocaremos un “.” y repetiremos el nombre. Con el “.” estamos accediendo a la función “change_state” que se encuentra arriba del script del controlador, osea en el script principal de la máquina, que se extiende sobre el controlador… haciendo eso, podremos procesar el estado con el código principal, que escribimos hace un rato. Nota: las últimas dos líneas no tienen importancia, son otra cosa.

Los estados independientes

Para esta parte necesitamos aplicar algo de lógica. Primero: el estado inicial es “Idle”. Por lo tanto, a partir de él deben salir otros estados: como el salto, el movimiento y el ataque. Sólo vamos a poder ejecutar un sólo estado a la vez. Un ejemplo sería que, cuando entremos en el estado del movimiento, sólo podremos salir cuando, dentro de su mismo código, demos instrucciones para que pasemos a otro estado, por ejemplo, el salto.

Empecemos pues, añadiendo el script del estado “Idle”:

¿Recuerdan cuando les dije que añadieran una animación para cada estado? Ya en la función _ready podemos decir (aunque esto es opcional y ustedes pueden hacer lo que quieran) que la animación “Idle” se reproduzca. Cuando usamos la palabra “owner”, estamos accediendo al nodo principal de la escena. En este caso el nodo principal es el KinematicBody2D del jugador, y uno de sus hijos, es el “Anim” que creamos en el artículo pasado.

Dentro de la función handle_input indicaremos que cuando se presione la flecha de arriba, compruebe que el “owner” osea el script del jugador, se encuentre en el piso. Si es así, puedes decir que el “estado a finalizado” y puedes “pasar al salto” (emit_signal(“finished”,”Jump”)). Desde ese momento, ya el script del Idle deja de ejecutarse, porque ahora el nuevo estado que estará ejecutándose será el salto.

Lo mismo pasaría si presionamos “Espace” y realizamos un ataque. Estaríamos cancelando el estado “Idle”, para pasar al “Attack”.

En la función update(delta) que se ejecuta en cada segundo, comprobaremos que la dirección del jugador no ha cambiado. De ser así significaría que queremos movernos, y emitimos la señal que llama al estado de movimiento.

Para los que quieran refrescar la memoria con respecto al código del “owner” o jugador, miren esta imagen del artículo pasado:

Esto, amigos míos, es todo lo que necesitan saber. Sólo falta que añadan el código de los otros estados y aprendan a salir de ellos para volver al “Idle”.

Continuemos, por ejemplo, con el código del “move_state”. Recuerden que casi todos los estados inician igual, y se extienden con la ruta del script de estados principal. Pasemos ahora al código que les quiero mostrar:

Todo igual ¿no?. Cuando el jugador tenga la dirección en 0 es porque ya esta quieto, y puede volver al estado “Idle”. Cuando saltas, cambias, etc. No veo complicaciones mayores. Igual si alguien tiene otra duda que no pueda resolver descargando el repositorio de la Máquina de Estados desde el enlace que dejé al inicio del capítulo, puede escribir un comentario. Con gusto lo ayudaré y actualizaré el artículo si es necesario.

Si te ha gustado el contenido, podrías ayudarme a seguir produciendo con una donación a PayPal o Patreon: https://www.paypal.me/joseleon1971?locale.x=es_XC&fbclid=IwAR2fl6Hg5ImDIBBv34BirPpfa7vL3QzZyEKN6E3LJibPYldSl9HO9yDGU-k

https://www.patreon.com/indielibre

Las donaciones me ayudan a estar conectado en Internet, en mi país es costoso. Cualquier cantidad, es aceptable :’).

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.

☝ La importancia del GDD (Game Design Document) 📚

Si tienes la idea para un gran videojuego, no basta con decir la historia y hablar un poco de las mecánicas que vas a implementar. Es importarte que toda la información referente al proyecto quede estructurada de una forma donde no se deje nada para la improvisación.

Una buena practica es elaborar un documento de diseño. En vídeojuegos, se conoce mejor como GDD o Game Design Document. Ahí abordarás todas las mecánicas, herramientas, estadísticas e información general que tengas planeada para tu juego, y la organización que alcances te permitirá trabajar con seguridad y, en caso de querer formar un equipo de desarrollo, desenvolverte correctamente.

Si bien la organización o los cronogramas que debes preparar para controlar la eficiencia de tu trabajo son documentos aparte, el GDD englobará todo el grueso de tu proyecto, guardando cada detalle que quieras implementar.

Cada documento de diseño puede alcanzar una estructura diferente, quizás más largo o más corto, dependiendo de cada proyecto. Pasaré a explicar cómo podemos crear uno de estos documentos, además de la estructura básica para que tengan una idea y puedan empezar a escribir algunas cosas.

¿Qué es un documento de diseño?

Como dije arriba: un documento de diseño o GDD (Game Design Document), es el archivo con toda la información referente al proyecto: desde sus estrategias de marketing hasta el gameplay que se implementará. Cabe resaltar que el documento de diseño no es obligatorio para empezar un proyecto, es más como una ayuda que puede ser muy útil para organizar al equipo.

¿Qué debemos escribir ahí?

Los temas que se van a tratar dentro de un documento de diseño son variados. Les dejaré una lista con algunos puntos importantes:

  1. Introducción. En esta sección podemos desarrollar los aspectos generales del proyecto: el nombre, género, plataformas y público al que va dirigido. Además, estaría bien hacer un resumen sobre las mecánicas principales que van a formar parte del proyecto.
  • Cuando nos referimos a la “introducción” de un documento de diseño, es importante señalar que en ella sólo se redactarán los conceptos más importantes de la jugabilidad, la interfaz, los gráficos, y otros elementos del juego. También se le conoce como High Concept, y su objetivo es presentar el juego a cualquier lector sin que este tenga que leer muchas páginas diferentes para hacer su propio resumen.
  1. Mecánicas. Quizás sea una de las partes más extensas del documento. Aquí van a estructurar cada detalle dentro del juego. Desde el movimiento de los jugadores, a las funciones que active, por ejemplo, una palanca. Dentro de esta sección suelen añadir un apartado para los objetos, la interacción del jugador con ellos, los controles, etc, llamado “Jugabilidad”. Ahí se debe desarrollar claramente como el jugador realiza acciones dentro del mundo. También hay una subsección para el “Flujo de Juego”, donde se explica con detalle qué cosas pasan desde que el jugador abre el juego. En esta parte pueden valerse de elementos gráficos para diferenciar cada acción del jugador. Un ejemplo sería: “El jugador entra en el selector de personajes y toma al guerrero, el juego activará los enemigos, después de luchar se abre una puerta”, o cosas así.
  2. Primeros minutos: Este es un apartado menos extenso que el “Flujo de Juego”, escribiremos unicamente de las primeras mecánicas, personajes u elementos que se presentarán durante los primeros minutos de juego. Es importante que el inicio sea emocionante, muchos jugadores no pasan más de cinco minutos hasta que ya eliminan el juego de su teléfono o computador.
  3. Interfaz. Aquí se explicará el funcionamiento de cada “pantalla”. Son los diferentes estados gráficos dentro del juego, como puede ser la pantalla de juego, la pantalla de título, o la pantalla de pausa. Además, también se debería hablar sobre GUI (Game User Interface) y cómo el jugador interactúa con ella.
  4. Arte. Para esta sección van a redactar todo sobre el arte y estilo dentro del juego. Se deciden temas como la perspectiva (2D,3D,2.5D) y los colores. Esta es una información que generalmente puede mostrarse al público general, ya que explica como se verá el juego.
  5. Sonido. Acá se resolverán las dudas que se tengan respecto a los efectos de sonido, doblaje, y música.

¿Cómo crear un GDD? 🚀

Primero que todo, necesitaremos tener instalado algún Software de oficina. En Windows seguramente tendrán el Microsoft Word, pero también hay una alternativa que se puede usar en todos los sistemas operativos: LibreOffice. Para esta labor no tiene nada que envidiarle a Word, es gratuito y su interfaz es bastante parecida (las líneas de este artículo se escriben en LibreOffice).

Cuando tengan instalado el programa que quieran usar, sólo van a tener que empezar a escribir el índice de contenido. Por aquí abajo les mostraré unas plantillas básicas que pueden copiar y pegar.

Cosas que debemos considerar ☝

1️⃣ El documento de diseño será un material que seguramente más de una persona ojeará. El/los encargados de escribir sobre él deben mantener un lenguaje estándar y fácil de entender para todos. La organización es muy importante.

2️⃣ Mientras están escribiendo sobre su proyecto, no eviten un tema que parezca «obvio», seguramente para otra persona no quede claro, y necesitará una explicación.

3️⃣ Mientras más información tengan, más sólido será su documento. Traten de desarrollar bien cada mecánica o hueco de la historia (en caso de que su juego tenga historia). Una opción sería escribir todo dentro del documento de diseño y después sacar las páginas de cada tema para dividirlas en otros documentos, como: «Mecánicas» e «Historia»; dentro de una carpeta llamada: «GDD »Proyecto IX’ «.

Estructura básica para un GDD 📈

Aquí me gustaría destacar esta plantilla que encontré en Internet: https://docs.google.com/document/d/1-I08qX76DgSFyN1ByIGtPuqXh7bVKraHcNIA25tpAzE/edit, me parece un buen ejemplo.

Además, podemos considerar lo siguiente:

  1. Introducción
    • Concepto del juego
    • Características principales
    • Género
    • Publico dirigido
    • Alcance
  2. Mecánicas de juego
    • Jugabilidad
    • Flujo de juego
      • Diagrama de flujo
      • Introducción al juego
      • Jugando
      • Fin de partida
    • Personajes
      • Protagonista
      • Compañero del protagonista
      • Antagonista
    • Control de jugador
      • Interacción con el personaje
      • Interacción con el entorno
      • Interacción con la interfaz
    • Interacción del entorno con el jugador
  3. Interfaz
    • Diagrama de flujo de pantallas
    • Menú principal
    • Menú de pausa
    • Menú de guardado/cargar partida
    • Interfaz de usuario durante partida
    • Interfaz de fin de partida
    • Creditos
  4. Arte
    • Estilo
    • Concepts
    • 2D
    • 3D
  5. Sonido
    • Música
    • FX
    • Diálogos

Si lo necesitas, puedes añadir o quitar alguna sección. Esa estructura la he encontrado aquí.

Beneficios de un GDD 🏆

Como les dije arriba, tener un documento de diseño puede resultar muy útil para mantener organizado un equipo de trabajo. Para finalizar este artículo, colocaré una lista de beneficios por usar un GDD.

  1. Se establecen los límites y las posibilidades del equipo.
  2. Al tener una base documentada, aumenta la seguridad de éxito tras la publicación del juego, se supone que han evaluado y preparado un plan para muchos posibles riegos.
  3. Con toda la información del proyecto, el trabajo en equipo será más fluido: no hay necesidad de que un diseñador o programador tenga que preguntar por cada detalle al administrador del proyecto.

¿Antes de empezar tus proyectos trabajas un documento de diseño? Comparte tu experiencia. Si tienes alguna duda, puedes dejarla en los comentarios.

🤖 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.