Archivo de la categoría: Aprende

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

8 Errores que cometemos los desarrolladores de videojuegos indie

Desarrollar videojuegos es un camino largo, se requiere aprender mucho de los errores que vamos cometiendo en los juegos que vamos realizando. Ya que normalmente nuestros primeros juegos no serán exitosos.

Para disminuir los errores es que he creado este artículo.

Seguir leyendo 8 Errores que cometemos los desarrolladores de videojuegos indie

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

Selector de Personajes

Tengo tiempo sin hacer esto de los tutoriales, es hora de retomarlo. Explicaré un tema que me habían pedido hace un tiempo, en los siguientes días es probable que pueda hablar sobre los dos que me faltan hasta ahora (según la lista de tutoriales).

(Escribí esto hace como un mes, pero no tenía internet para publicarlo. Hoy en día me faltan más tutoriales por cumplir)

Hacer un selector de personajes en Godot es muy sencillo, tenemos muchos métodos diferentes. Lo que aplicaremos ahora será la creación de una nueva escena de Interfaz 2D. Para los personajes que serán “seleccionables” podemos usar el nodo de tipo TextureButton, y si hace falta redimensionar la imagen, activamos su propiedad “expand”.

Cuando tengamos las imágenes/botón preparadas (que en mi caso son naves, pero puede ser cualquier cosa) añadamos un script para el nodo raíz y empecemos a conectar la señal de “pressed()” de los botones con él.

Después necesitaremos un Singlenton o script en el AutoLoad que pueda guardar al jugador que queremos añadir a nuestro nivel. Hagan clic en “Nuevo Script” y lo guardan con el nombre de “global_var”. Pueden hacer de ese script un Singlenton si entran en los aquíAjustes de Proyecto y en la pestaña de AutoLoad lo añaden. El nombre que elijan para ese script será el que deben usar cuando quieran trabajar con sus variables y/o funciones. Si no sabes como funciona el AutoLoad, pasa por aquí.

Antes de cerrar el nuevo script, creen la variable de “player_dir” e indiquen que será de tipo String. Ella guardará la ruta que tiene el personaje que instanciaremos, en el Sistema de Archivos de nuestro proyecto.

Ya con esto podemos volver a nuestro Selector de Personajes. En el script con todas las señales de presionado conectadas, vamos a crear las variables de “nave_azul”, “nave_roja” y “nave_verde”, que son mis personajes. Esas tres variables son una cadena de texto (String) y para tener la dirección de cada una sólo tenemos que arrastrar la escena correspondiente al personaje hasta el espacio después del igual, en la variable.

Dentro de todas las funciones que quedaron abiertas, hagan que la variable “player_dir” del script global, pase a tener la dirección del personaje que represente ese botón. Por ejemplo: la primera señal que emití corresponde a la nave verde, por lo que la dirección correcta para el script global será la variable con la nave verde.

También debemos añadir una línea que nos haga cambiar de escena, yo lo resolví con una función que llama a “get_tree().change_scene()”, sólo tienen que poner dentro “change_scene()” la ruta de la escena nivel, y después de hacer clic en alguna nave, cambiaremos de escena.

Ya en nuestro nivel sólo tendremos que instanciar la nave que indiquemos en el Selector. Añadan un Script donde quieran: puede ser en el nodo raíz o por algún contenedor de los personajes, como es mi caso. Básicamente tienen que cargar la escena con la dirección que guardamos hace un rato, y usar la función “instance()” para crear una nueva instancia que podamos tener en la escena. La añadimos como hija y cambiamos su propiedad de posición si no tenemos una cámara.

Como algo opcional pueden crear un nodo Position2D para guardar la posición del nuevo personaje.

Espero que este artículo con su vídeo les sea de utilidad. Pueden dejar dudas o recomendaciones en los comentarios de este blog o YouTube.

📋 ¡Nueva Lista de Tutoriales sobre Godot! Sé parte de ella ✍️

Para evitar que todas las personas que leen o siguen mis movimientos en Indie Libre tengan que entrar en YouTube o Facebook para saber en qué vídeos trabajo, les daré la libertad de comentar en esta publicación sobre el tutorial que quieran ver publicado. La lista se estará actualizando según lleguen comentarios, podrán acceder rápidamente desde el menú de navegación dentro de Godot Engine.

UsuarioTutorial sobre…
HatSistema de Inventario
Luis Esquivel Vera¿Cómo hacer un bucle de animación entre distintos frames?

Sepan que cada tutorial seguirá esta línea:

  1. Desarrollo del repositorio (su propia carpeta en el repositorio de tutoriales)
  2. Redacción del guión que servirá como artículo para Indie Libre.
  3. Producción del vídeo y publicación del mismo junto con la versión escrita.

Por último recuerden que este apartado sólo es para los tutoriales de Godot Engine. Cuando empiece a trabajar en uno específico, lo indicaré en la lista con letras negras. Comenten abajo y sean libres de solicitar algo. Si supera mis capacidades, les avisaré.

Cómo automatizar la colocación de items en mapas con Godot Engine

Si estas desarrollando un vídeojuego (en Godot Engine) y quieres añadir mejoras u otros elementos, es probable que termines preparando muchas escenas para los items, monedas y otros objetos particulares, que después tendrás que posicionar dentro de un nivel. Instanciar y posicionar una escena dentro de otra puede resultar engorroso, sobretodo si después cambias de opinión y quieres eliminar o cambiar la posición de un item… en este artículo aprenderán a usar el nodo TileMap con un script muy sencillo, que les facilitará la tarea de colocar items en sus niveles.

Preparar el TileMap

Después de añadir un nodo TileMap con el nombre del item o cosa que represente, añádanle un recurso tileset con la imagen del objeto. Para crear ese recurso sólo tienen que hacer clic derecho en algún lugar del Sistema de Archivos y después presionar sobre «Crear Recurso > TileSet».

Supongo que ya saben trabajar con ese tipo de recursos. Después de añadir una imagen, presionan el botón amarillo con la opción de «Tile único» y ajustan el tamaño con el rectángulo amarillo. Después de colocar el recurso Tileset dentro del nodo TileMap, hagan que las celdas tengan el tamaño de la imagen de su item. En mi caso el item tiene las dimensiones de 16×16 pixeles.

Script del TileMap

Ya con eso podemos dibujar en cualquier lugar del mapa una imagen estática de nuestro objeto, faltaría que esas imágenes se convirtieran en una nueva instancia de la escena correspondiente. Añadan un script normal al nodo TileMap y copien lo siguiente:

extends TileMap

var cherry = load("res://Items/Cherry/Cherry.tscn")

func _ready():
	for c in get_used_cells_by_id(0):
		var new_cherry = cherry.instance()
		add_child(new_cherry)
		new_cherry.global_position = map_to_world(c) + Vector2(0, 8)
		set_cellv(c, -1)
  • La variable cherry lleva el nombre de su item y guarda con load la dirección de la escena que tiene ese item en la carpeta de proyecto. Pueden obtener esa dirección si desde el Sistema de Archivos hacen clic derecho sobre una escena y buscan la opción «Copiar Dirección».
  • La variable c del bucle for tomará la posición de todas las celdas ocupadas en el TileMap. La función get_used_cells_by_id(0) devolverá una lista (array) y el bucle se ejecutará según el tamaño de esa lista. Con cada valor de la variable c, una nueva instancia se guardará como hija del nodo TileMap.
  • Cuando decimos map_to_world(c) estamos indicando que la nueva posición global de cada item pase de la posición local del mapa (que en ese momento se guarda en «c») a la posición global de nuestro juego. Fíjense en que durante todas las vueltas del bucle, la variable «c» siempre tendrá el valor de Vector2() con la ubicación de cada celda. Para que los items se alineen con el suelo, pueden sumar un Vector2(0, y aquí poner el resultado del tamaño vertical de su item dividido entre dos) por ejemplo: como mi item mide 16px de alto, sume un Vector2(0, 16/2) para que quede alineado. Ustedes pueden sumar o restar según los valores que necesiten.
  • Con la última línea de set_cellv(c, -1) estaremos eliminando la imagen estática que creamos al principio en la posición que tenía la variable c durante esa pasada del bucle.

Todo listo, deberían tener un resultado así:

Si tienen alguna duda, pueden dejarla en los comentarios :).

Creación de Proyecto e información sobre los recursos – Sunny Land con Godot – Cap I

Si estas aquí es porque te decidiste a iniciar un nuevo curso. Espero que aprendas cosas nuevas. Seguro que ya sabes crear proyectos, definir los Nodos y las Escenas en Godot, y muchas cosas más relacionadas con el editor… pasaré entonces a darte más detalles sobre los Recursos que se pueden crear dentro de Godot, pero primero configuraremos nuestro proyecto.

Dirijanse a los “Ajustes de Proyecto”, les enumeraré los cambios que realizaremos:

  1. Windows → El Ancho y Alto del proyecto será de 320 y 240 pixeles respectivamente.
  2. Windows → Bajando en las propiedades de la misma sección, sería bueno cambiar el Mode a 2D y el Aspect en Keep. Así los gráficos se ajustarán a cualquier cambio que se le realice a la pantalla.
  3. Escriban “Snap” en el buscador, y después activen la propiedad “Pixel Snap”. Con eso evitamos que los gráficos no se encuentren perfectamente alineados.

Creando Recursos

Ahora podemos empezar: según la documentación oficial del motor, tenemos que Los recursos son Contenedores de datos. Sirven cuando un Nodo puede disponer de sus datos y darles una función. El recurso que necesitaremos para trabajar con nuestros mapas de tiles, se conoce como TileSet. Para no desviarme del tema, y pasar directamente a construir los gráficos ncesarios, les dejaré con este enlace la documentación de Godot en Español en su tema de los recursos: https://docs.godotengine.org/es/latest/getting_started/step_by_step/resources.html.

Creamos una nueva carpeta desde el sistema de archivos de Godot y dentro de ella, cuando pulsemos el clic derecho, podremos “Crear un Recurso”. Nos mostrará un menú parecido al que sale cuando creamos nodos, simplemente escribimos “TileSet” y ya tendremos lo que necesitamos. Guardamos y abrimos con doble clic.

Se abrirá el editor de Tiles. Lo pueden usar para crear AutoTiles y Tiles separados. Para eso ustedes deben tener preparada una hoja de Sprites con los tiles que van a necesitar, alineados en función de que sea fácil entender cómo es que deben estar colocados cuando Godot les dé posiciones. La hoja que usaré yo, la tienen en la carpeta de Assets que pegamos dentro del proyecto.

La añadimos con el botón de “+” y ahora podremos elegir entre crear un recurso AutoTile (azul) o un Tile único (amarillo). Esa hoja de ahí tiene muchas opciones, pero sólo vamos a poder aplicar tiles automáticos con unas zonas determinadas, como la tierra y la madera. Por lo tanto, primero seleccionaré la opción de AutoTile. Se nos permitirá definir la “región” o la “zona” de nuestra hoja. Para hacer que el selector sea más exacto, presionemos el botón con el imán:

Se percatarán de que 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.

Los tenemos y ya podemos avanzar 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, dirijanse nuevamente al inspector y abran la sección «Selected Tile» , busquen la propiedad «Subtile_size» y en los valores de «X» y «Y» ponen 16×16, el tamaño de estos 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:

Estos tiles ya deberían funcionar correctamente, sin embargo, nos toca seguir añadiendo otras partes que faltan. Como ya saben formar AutoTiles, explicaré como se hacen imágenes separadas, para saltarme el trabajo de hacerlo con todas.

Muy bien, hacer esto es practicamente el mismo proceso. Van al apartado de “Region” y en lugar de Autotiles seleccionan “Single Tile”. Marcan los tiles que necesitan, le dan una colisión si hace falta, y nos vamos felices.

En el próximo capítulo les explicaré todo lo que necesiten saben sobre el nodo TileMap y diseñaremos un mapa para nuestro nivel principal.