Archivo de la etiqueta: 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

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.

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

Avanzando con el desarrollo de un juego de plataformas

¡Buenas noches compañer@s! Ayer se empezó el desarrollo del nuevo proyecto de plataformas que planeo publicar en Itch.io, GitHub y Godot Assets Library, como Software Libre. El desarrollo del mismo es radicalmente diferente a mi «juego» de plataformas pasado: tratando de suprimir la mayoría de problemas lógicos mientras se trabaja con mejores mecanismos para proyectos generales.

Sin más, dejaré las publicaciones que forman una especie de «camino», durante el desarrollo de los Assets y el proyecto:

¿Por qué hago un artículo para hablar sobre una fase tan temprana?… supongo que en esto se basa el DevLog, y aunque esto sea mi primer paso, la máquina de estados es un tema muy interesante e importante. Además, aprovecho para hablar un poco más sobre esos Assets que puse arriba:

PD: Este artículo se escribió cuatro días atrás, pero perdí la electricidad desde ese momento y vuelvo hoy para publicarlo.

¿Qué es ese paquete de Assets?

Muy bien, desde el principio: seguro algunos ya saben que estoy muy emocionado con practicar Pixel Art y hacer mis propios gráficos. Ese pasatiempo se complementó perfectamente con mi entusiasmo dentro de la programación de juegos, y desde entonces he buscando la forma de dibujar, programar y escribir, para ser feliz y útil dentro de mi trabajo. Ese «pack» es la primera fase del proyecto que he ideado para este mes (y parte del siguiente).

¿Cuáles son esas fases?

La primera fase corresponde al dibujo/Pixel Art: se elaboran todos los recursos importantes que podrán usarse para formar juegos más adelante.

Después, la segunda fase es la programación de una «plantilla» o «demo», que haga uso de los Assets para desarrollar un prototipo jugable que pueda ser difundido por todos como material educativo; permitiendo su lectura, cambio y distribución por parte de cualquier usuario (Software Libre).

Por último, seguro una de las cosas mas interesantes, es tomar ese demo desarrollado y explicar, paso por paso, sobre el desarrollo del mismo… sí, esto toma el nombre de «Curso» y «Tutoriales».

¿Qué generará ingresos?

Estuve dándole vueltas a la publicación de contenido pago, pero no creo que sea necesario. Es probable que pueda alcanzar al público anglosajón y reciba donaciones que me permitan continuar con el desarrollo de nuevos proyectos. Teniendo en cuenta que los Assets y proyectos de código abierto son algo que les beneficia, sin importar que sea hispano.

¿Cuáles son las mecánicas que se introducirán?

Unos días atrás pregunté por algunos temas que puedan resultar de interés para ustedes. Tengo entendido que debería abarcar la inteligencia artificial de enemigos y «jefes», además de introducir mecánicas para el uso de inventario, o recolección de objetos (Para este punto estoy desarrollando un Asset aparte, un inventario que podrán añadir en cualquier proyecto 😉 ). También me hablaron sobre las cuerdas y el balanceo, como de los ataques con espadas o cuerpo a cuerpo… todo eso lo tengo en cuenta. Todo se introducirá poco a poco, y algunas cosas que me parecen importantes, como por ejemplo el inventario, serán desarrolladas con la intención de que, a futuro, puedan ser útiles en cualquier tipo de proyecto, desarrollándolas con un punto de vista general.

SI tienes una idea para introducir, puedes decírmelo en los comentarios. Cuando termine una buena parte y me parezca un buen resultado, abriré el repositorio para que puedan ir descargando el código, sin embargo, las imágenes y el curso pueden salir después… o quizás antes, vamos a ver como me trata el tiempo.

Mi Proyecto para la SuperMegaJam

Esta semana he estado trabajando en la idea que presentaré por la SuperMegaJam, un concurso organizado por FuryGames dentro de la plataforma itch.io/.

Al momento de escribir esto, queda poco más de un mes para terminar y enviar mi proyecto. Todavía no he programado nada. Me limité a diseñar y probar las imágenes desde Godot, puede que siga así otros diez días más.

El proyecto lo enfocaré a dispositivos móviles, es una buena forma de practicar el diseño de interfaces. Ya que además de esto, el que siga mi actividad en las redes sociales notará que hago muchas pruebas con herramientas gráficas para facilitar el trabajo en alguna área… lamentablemente termino con una mecánica aceptable y un diseño de aplicación sumamente horrible, pero sigamos con el asunto de hoy.

Desde que inicié con Pixel Art me mantengo dibujando cosas naturales: los tiles de piedra, tierra y árboles, porque parecen más fáciles. Después de todo, la naturaleza es un «azar» y me podía permitir poner líneas y cuadros donde quisiera… pues no, con cada dibujo noté un progreso: menos pixeles locos, descubrí que hasta poner puntos en cualquier parte del lienzo necesita una lógica, un estilo.

Cansado así de destinar mi tiempo libre en dibujos naturales, experimenté con la textura de la madera, no como árbol, sino para «tablones». El resultado no fue de mi agrado, así que decidí suprimir los detalles y hacer un diseño más plano, cargado de líneas de contorno.

Me parece que ahora resulta más placentero para la vista. Sin embargo, las velas y los botones necesitan mejorar. Lo primero porque las líneas disparejas no encajan con toda la rectitud del resto, y lo segundo, porque no me parecen tan llamativos. El siguiente paso será terminar todos los elementos gráficos de la interfaz, después de eso, podré pasar con el diseño de nodos y escenas, entrando así en el área de Godot.

Estimo que la programación del proyecto no será tan complicada. Quizás sólo una cosa se me escapa completamente: el uso de Shaders para efectos especiales.

Hace relativamente poco, FuryCode publicó el siguiente vídeo, experimentado con shaders en Godot

Eso aumentó mi curiosidad por dichos efectos. Son muchas las cosas que se pueden llegar a hacer, mediante un lenguaje particular. Mi meta con este proyecto es hacer agua y su reflejo, algo así como el efecto del siguiente vídeo:

Pero no me adelanto. Prefiero tener primero un diseño aceptable que me permita introducir alguna mecánica innovadora, por lo menos para mi.

Me despido ahora. Antes de finalizar, les aviso que estoy por publicar 5 tutoriales más para la serie básica de Godot, después de eso no sé que continuare.

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.