Desarrollo

Esta es la continuación de la entrada Desarrollo de un editor de niveles 2D, en esta ocasión presento la aplicación que he desarrollado para crear escenarios en 3D con estética viejuna.

Está desarrollado en Java y utiliza OpenGL para la renderización de gráficos, en concreto el framework LibGDX.

Funcionalidades

• 1.) Crear nuevo documento: Abre el asistente para la creación de un nivel nuevo.
• 2.) Cargar documento: Muestra el selector de archivos para cargar un nivel existente en el árbol de directorios.
• 3.) Guardar cambios: Guarda el nivel en disco.
• 4.) Undo/Redo: Deshace o repite los cambios acumulados.

Herramientas de edición

• Blocks: En esta sección se muestra la información del bloque seleccionado. Entre otros se podrá elegir la geometría del mismo, así como la textura de las diferentes caras.
• Entities: Este apartado permite añadir modelos 3d a la escena. Como requisitos los modelos deben de estar en formato .g3db (LibGDX binary data). Permitiendo personalizar la rotación y la escala del mismo.
• Decals: Los decals (calcomanías) son objetos/personajes en 2.5D, es decir objetos en 2 dimensiones que se pueden mover en los ejes x, y, z y que siempre miran hacia la cámara. Dando la sensación de pseudo-3d.
• Environtment: Se configuran la iluminación ambiente y los diferentes puntos de luz que se deseen añadir a la escena, pudiendo configurar el color y la intensidad. Por último también se puede añadir el fondo del escenario (skybox).
• Tools: Entre otros, he implementado opciones de creación de zonas para poder lanzar eventos durante el juego, herramientas de generación de calles, etc…

Código Fuente:

https://github.com/sergiss/level-editor-3d

¿Cansad@ de introducir lincencias en los encabezados de tu código fuente? ¿Has escrito un programa con 100 billones de lineas, 362 mil paquetes y 1001 test unitarios, quieres compartir tu código, pero te das cuenta que se te ha olvidado poner encabezados....? 🤡

Tras instalar una nueva versión de Eclipse y tenerlo ya todo apunto para picar código, me he encontrado con la sorpresa que el plugin para añadir y gestionar copyrights que suelo utilizar, ya no estaba soportado. Así que me he puesto manos a la obra y he codificado este pequeño programa para tenerlo a mano.

El programa consiste en un diálogo, donde en primer lugar se debe introducir el texto que se quiere insertar en el encabezado de los ficheros. Seguidamente se debe seleccionar el directorio donde están los ficheros (código fuente, notas, etc.) e indicar si se quiere recorrer todo el árbol de directorios a partir del mismo (subfolders). Finalmente se indican las extensiones de los ficheros, separadas por comas, que se quieren procesar, y si queremos restringir las coincidencias con mayúsculas y minúsculas (Match Case).

Cuando todo esté listo procedemos con el botón «Perform».

Código Fuente

https://github.com/sergiss/copyright-o-matic

Una de las herramientas más utilizadas a la hora de desarrollar videojuegos, sobre todo en aquellos en los que necesitamos representar un mundo abierto o escenarios, es el editor de niveles.

Llegados a este punto tendremos que elegir entre utilizar recursos ya existentes (como los proporcionados por el framework que se esté utilizando, o editores de pago/código abierto, como por ejemplo Tiled), o desarroyar nuestro propio editor. Personalmente recomiendo utilizar los recursos existentes, ya que avanzaremos mucho mas rápido en nuestros proyectos. Pero si por el contrario, queremos saber como se realiza este tipo de herramientas, o bien, es un requisitos del proyecto, tendremos que desarrollar nuestro propio editor de niveles.

Este es el que yo he desarrollado:

Funcionalidades

Herramientas:

• 1.) Crear nuevo documento: Abre el asistente para la creación de un nivel nuevo.
• 2.) Cargar documento: Muestra el selector de archivos para cargar un nivel existente en el árbol de directorios.
• 3.) Guardar cambios: Guarda el nivel en disco.
• 4.) Undo/Redo: Deshace o repite los cambios acumulados.
• 5.) Pincel: Dibuja el ‘tile’ escogido en las coordenadas seleccionadas del mapa.
• 6.) Bote de Pintura: Rellena la superficie seleccionada con el ‘tile’ escogido.
• 7.) Borrador: Borra el ‘tile’ escogido.
• 8.) Cuenta gotas: Identifica y selecciona el ‘tile’ que ocupa las coordenadas seleccionadas del mapa.
• 9.) Dibujar póligono: Habilita el modo de dibujado libre de polígonos para la detección de colisiones.
• 10.) Dibujar círculo: Habilita el modo de dibujado de circulos para la detección de colisiones.
• 11.) Selección de vertices: Permite la selección de vertices entre los poligonos existentes en la capa seleccionada.
• 12.) Habilita la visualización de la rejilla.
• 13.) Habilita la visualización de polígonos de colisión.

Layers: En esta sección se podrán gestionar las diferentes capas del nivel.

Tileset: Es el conjunto de ‘tiles’ disponible.

Conclusiones:

En esta entrada se ha mostrado de forma breve las funcionalidades básicas para el desarrollo de un editor de niveles para juegos en 2 dimensiones.

Espero que sea de utilidad como inspiración para cualquier proyecto.

Código Fuente:

https://github.com/sergiss/level-editor-2d

Tomando como referencia el Buscaminas de Windows XP, he implementado este clon del juego inventado por Robert Donner en 1989.

Detalles de la implementación

Entre las diferentes acciones que tiene la mecánica de juego, cabe destacar, cuando el jugador realiza un ‘click’ en un área en la que no hay ninguna mina y que a su vez, tiene celdas vecinas vacías. Esta acción requiere que se descubran todas las celdas que no contienen minas, propagándose hasta encontrar una celda vecina que si contenga una mina a su alrededor.

Para ello he implementado un algoritmo iterativo de rellenado por difusión (floodfill), utilizando una cola de prioridad y evitando la vertiente recursiva. Ya que una implementación recursiva puede provocar una desbordamiento de memoria, debido a la cantidad de ramificaciones que se generan al recorrer los estados vecinos.

Por lo demás es un juego fácil de implementar, en que he optado prescindir del elemento Canvas (por ninguna razón en especial), utilizando 100% elementos HTML y estilos CSS para la representación gráfica, y claro está, Javascript para la lógica.

Código Fuente

https://github.com/sergiss/minesweeper

Conversor de imagen a texto, en el que se realiza una representación de una imagen en código ASCII.

En resumen la conversión consiste en iterar los píxeles de la imagen y operando del siguiente modo:

1. Pasamos el píxel actual escala de grises. Para ello sumamos los componentes RGB y dividimos entre 3, obteniendo la media de color.

grayscale = (red + green + blue) / 3;

2. Teniendo en cuenta que la variable grayscale tendrá un valor entre 0 y 255, hay que encontrar una representación de estos valores con caracteres. Una forma de hacer esto, es crear un array o cadena de texto, el cual se almacene los caracteres ordenados por densidad de píxeles. Como ejemplo podemos ver que la letra ‘O’ tiene más pixeles que el signo de puntuación ‘.’, por lo que la letra ‘O’ estaría almacenada antes que el signo de puntuación ‘.’.

A continuación se muestra una secuencia de caracteres que funciona bastante bien, para este menester:

characters = '#####********+++++++++=========--------:::::::::..';

3. Finalmente almacenamos o representamos en pantalla el carácter calculado:

character = characters[(characters.length - 1) * (grayscale / 255)];

Código Fuente

https://github.com/sergiss/image-ascii

En la entrada SGDK mostré un ejemplo de implementación del mítico juego de Nintendo Tetris para Mega Drive.

En este post comparto la implementación de Tetris en Javascript.

• Flechas Izquierda/Derecha = Mover
• Flecha Arriba = Rotar
• Flecha Abajo = Acelerar

Código Fuente

https://github.com/sergiss/tetris.js

Implementación en Javascript del interprete CHIP-8.

CHIP-8 is an interpreted programming language, developed by Joseph Weisbecker. It was initially used on the COSMAC VIP and Telmac 1800 8-bit microcomputers in the mid-1970s. CHIP-8 programs are run on a CHIP-8 virtual machine. It was made to allow video games to be more easily programmed for these computers

wikipedia

Live Demo

Código Fuente

https://github.com/sergiss/chip-8

Ejemplo de implementación del juego Puyo Puyo usando HTML5 y Javascript.

El objetivo del juego es:

• Se debe de hacer coincidir 4 puyos o más del mismo color para hacer que desaparezcan.
• Generar el máximo de puntos luchando contra el incremento de velocidad.
• El juego termina si el tablero se llena de puyos y no se pueden insertar más piezas.

Live Demo (CPU)

arrows = move, space = rotate

Características:

• Inteligencia Artificial (modo CPU) para partida autónoma.
• Algoritmo Flood fill para la detección de combinaciones de Puyos del mismo color.
• Personalización de número de columnas y adatación dinamica de filas.
• Generación aleatoria de estados de tablero.

Código Fuente

https://github.com/sergiss/puyo-puyo

Implementación en Javascrip del autómata celular el Juego de la Vida.

El universo del juego de la vida consiste en una cuadrícula ortogonal infinita de dos dimensiones de celdas cuadradas, cada una de las cuales se encuentra en dos estados posibles, vivo o muerto.

Página del proyecto: https://github.com/sergiss/game-of-life

Este proyecto escrito en Java lo realicé hace unos años, con el fin de entender los procesos que envuelven la generación de escenarios de forma procedural, en concreto escenarios tipo Minecraft. Para ello se ha utilizado el framework libGDX basado en OpenGL para la representación de gráficos 3D.

Página del proyecto: https://github.com/sergiss/voxel-engine