Words Game

Siguiendo la tendencia del juego de palabras Wordle, he desarrollado mi propia versión en Javascript. Esta traducido a tres idiomas, (inglés, español y catalán) y no he implementado ninguna restricción de tiempo, por lo que se puede jugar tantas veces como se desee.

El juego consiste en encontrar la palabra de cinco letras correcta siguiendo las pistas y usando un máximo de cinco intentos.

Words Game

En la versión de castellano y catalán, he restringido las palabras del diccionario de modo que solo se permiten palabras que no contengan ningún signo de ortografía como acentos, diéresis, etc., con el fin de mejorar la jugabilidad y equilibrar la dificultad.

Código fuente:

https://github.com/sergiss/words-game

Tileset Extruder

El flickering o bleeding, es un glitch gráfico que aparece a la hora de renderizar escenarios creados a partir de tilesets. El problema está derivado por el redondeo de punto flotante producido en los shaders, en concreto a la hora de mapear las coordenadas UV de las texturas. El resultado son unas lineas verticales u horizontales que aparecen de forma aleatoria entre los tiles, estropeando la experiencia visual del programa.

Flickering

Una solución rápida y efectiva a este problema, es añadir pixeles extra en la periferia de cada tile, de forma que estos correspondan en color a los pixeles vecinos. A continuación se muestra un ejemplo:

Extrusión

En el ejemplo se muestra como se ha pasado de tener un tileset con las images totalmente pegadas, a otro con las imágenes separadas por pixeles extra, con los que se proyecta la imagen en todas las direcciones, de forma que cuando suceda el redondeo de coordenadas UV, se procesen pixeles que estén en el contexto deseado y así eliminar ruidos indeseados, como es el flickering o bleeding.

Con el fin de realizar este proceso de forma rápida y sencilla, he escrito esta aplicación web:

LIVE DEMO

Código Fuente:

https://github.com/sergiss/tileset-extruder

Generador de contraseñas

Aplicación web para generar contraseñas que no puedan ser pirateadas por ingeniería social, fuerza bruta o método de ataque de diccionario.

Código Fuente:

https://github.com/sergiss/password-generator

Quizá te interese esta entrada: https://sergiosoriano.com/copyright-omatic/

three.js 2D Animation

Recientemente escribí esta pequeña librería para crear animaciones en 2D en three.js

¿Cómo funciona?

Primero creamos el material con la imagen que contiene los sprites de la animación.

  const material = new THREE.MeshPhongMaterial({
    map: texture,
    alphaTest: 0.7,
    side: THREE.DoubleSide,
  });

A continuación se crea la geometría:

const geometry = new THREE.BufferGeometry();

const positions = [ -0.5, 0.5, 0, 
                     0.5, 0.5, 0, 
                    -0.5,-0.5, 0, 
                     0.5,-0.5, 0];

geometry.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));

geometry.setAttribute("uv", new THREE.BufferAttribute(new Float32Array([0, 1, 1, 1, 0, 0, 1, 0]), 2));

geometry.setIndex([0, 2, 1, 2, 3, 1]);
geometry.computeVertexNormals();

Creamos una malla con la geometría y el material, y lo añadimos a la escena.

mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

Finalmente creamos la instancia de la animación:


 animation = new Animation(mesh.geometry, 12, 6)
 .create("run", 0, 25, 0.025)
 .create("jump", 30, 63, 0.020)
 .play("run");

En el código anterior se encadena la inicialización, de modo que al constructor se le pasa la geometría y el numero de filas y columnas que tiene la animación. Con el método ‘create’, registramos una animación, indicando el identificador, frame de inicio (índice), frame final (índice), y tiempo de duración de cada frame. Con el método play reproducimos la animación deseada (identificador).

Código Fuente:

https://github.com/sergiss/three.js-animation

Si te gustan los juegos 2D, quizá te interese: https://sergiosoriano.com/html-2d-game-engine-javascript-vanilla/

Algoritmo de búsqueda A* (A Estrella)

Implementación del algoritmo de búsqueda A* o A Estrella en Javascript.

Demo

Ejemplo de uso:

let grid = new Table(cols, rows);

  ...  // Llenar tablero

const astar = new AStar(grid);

Para instanciar la clase AStar debemos pasarle al constructor una implementación de la clase Grid, en la que se representan los obstáculos del tablero. (Ver Table como referencia de implementación).

let n1 = grid.getNode(x1, y1); // Obtenemos el nodo 1 en la posición x1, y1
let n2 = grid.getNode(x2, y2); // Obtenemos el nodo 2 en la posición x2, y2

const route = astar.route(n1, n2); // Cálculo del camino más corto

Finalmente, obtenemos el camino más corto entre dos puntos invocando el método route de astar, pasando como parámetros los nodos que representan dichos puntos.

Si la ruta es accesible se retorna un arreglo con las posiciones que conforman el camino, de lo contrario se retorna null.

Código fuente

Este es el código fuente del proyecto:

https://github.com/sergiss/a-start

Simon JS

El otro día implementé esta versión del juego Simon en Javascript (Vanilla JS)

Aunque no necesita de muchas presentaciones, Simon es un juego electrónico creado por Ralph Baer y Howard J. Morrison en 1978 y que tuvo gran éxito durante los 80.

El juego consiste en repetir correctamente la secuencia de colores y sonidos planteada. Una vez repetida, la secuencia se incrementa en un valor aleatorio. Iterando la mecánica hasta que el jugador cometa un error.

Demo

Código fuente

Este es el código fuente del proyecto:

https://github.com/sergiss/simon

Puedes visitar el pequeño engine que desarrollé para juegos web 2D.

Desarrollo de un editor de niveles 3D

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.

Level Editor 3D - Sergio Soriano

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

Funcionalidades

Menú de opciones  - Sergio Soriano
  • 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

Herramientas de edición - Sergio Soriano
  • 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

Copyright O’matic

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

copyright o'matic - Sergio Soriano
copyright o’matic

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

Desarrollo de un Editor de niveles en 2D

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:

Editor de niveles 2D - Sergio Soriano

Funcionalidades

Herramientas:

Tools - Sergio Soriano
  • 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.

Layers - Sergio Soriano
Layers

Tileset: Es el conjunto de ‘tiles’ disponible.

Tileset - Sergio Soriano
Tileset

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