Narrativas interactivas: Odyc.js sirve para crear juegos con JavaScript y aprender al mismo tiempo

Por @Alvy — 27 de Mayo de 2026

Odyc.js es una pequeña librería en JavaScript con la que aprender a crear juegos interactivos sencillos, estilo Rogue, con mapas, muñecos, monstruos (sprites), diálogos, sonidos y algunas cosas más. Es como un LEGO minimalista pero para crear aventurillas pixeladas. Incluye una documentación bastante amplia pensada en enseñar a los más jóvenes, así que puede ser un gran recurso para hacer que les pique el gusanillo de crear el próximo superventas de Steam.

Estos juegos narrativos retro combinan normalmente personajes con píxeles gordos, sonidos, texto y algo de lógica (ej. llave que abre una puerta). La idea es que un juego entero pueda caber en un único archivo no demasiado grande y funcione con una sola llamada a createGame(). Se puede ver cómo funciona pulsando Crear un juego en la portada, eligiendo uno de los Ejemplos en el menú desplegable y pulsando el botón de Play para ejecutar el código fuente que se ve a la izquierda.

Todo se define con código bastante sencillo: sprites, posiciones iniciales, mapas y objetos. Los sprites pueden ser bloques de color o dibujos hechos con caracteres, y cada carácter puede representar uno de hasta 62 colores de la paleta. (¡Ah, qué tiempos en los que una @ era el protagonista y corría perseguido por una Z que era un zombie!!)

Odyc incluye 9 tipos de eventos para colisiones, entrada/salida en los mapas, turnos, mensajes y controles para la aparición de todo ello en pantalla, además de acciones para abrir diálogos, mostrar mensajes, lanzar menús, hacer preguntas, reproducir sonidos o terminar la partida. También incluye algunos sonidos generados por procedimientos, diálogos con efectos visuales, tres velocidades, una cámara configurable, y controles de teclado tipo flechas/WASD además de Retorno/Espacio.

A ver quién se anima a crear un juego en alguna tarde aburrida.

Relacionados:

Arte y Diseño

Coral Pixels, un nuevo tipo de letra con píxeles como puños… pero suavizados

Por @Alvy — 27 de Mayo de 2026

Me ha gustado Coral Pixels, una tipografía de Tanukizamurai/Takuni Font que combina el aspecto de los viejos tipos de letras vistos en pantallas CRT con la elegancia del suavizado (aliasing) que aportaba un poco de legibilidad a esos tipos de letras con píxeles como puños.

La gracia del asunto es esa estética de las tipografías de videojuegos y el arte digital pero llevada un paso más allá: de lejos puede parecer casi texto negro, o ligeramente gris oscuro borroso, pero de cerca es como una nube de puntitos de colores más o menos aleatorios que le dan un efecto visual peculiar a lo que de otro modo sería una fuente pixelada normal.

Además, incorpora transparencias para evitar bordes «cortantes» o halos, aunque eso tiene una pega, que es que puede tener menos contraste. Su creador recomienda como apaño invertir los colores o ajustar la visualización de algún modo desde la aplicación. He probado a convertirla a escala de grises y eso también parece que funciona.

(Vía Unsung, donde también hablan de Analog Mono y Geist Pixel, que tampoco están mal.)

Relacionados:

Matemáticas

Una gran metáfora para entender qué son y cómo usamos los números imaginarios, como √-1

Por @Alvy — 27 de Mayo de 2026

Estaba hoy viendo Las matemáticas como nunca antes te las han contado en el siempre infravalorado canal de Mensa España, cuando me llamó muchísimo la explicación que hace Rubén Pérez sobre los números imaginarios. Se puede ver a partir de 26:00, tras explicar que con los números naturales, enteros, racionales, irracionales y trascendentes ya se puede llenar la llamada «recta real».

Los números imaginarios como √-1: (raíz cuadrada de -1, como solución a la ecuación x² = -1) ya no «caben» en la recta real. Así que para representarlos hace falta lo que los matemáticos llaman plano complejo y a los legos les suena a WTF. Suele usarse un eje horizontal para la parte real y otro vertical para la imaginaria. Esto ya suena rarito al oírlo, pero lo cierto es que en el MundoReal™ usamos los números imaginarios cotidianamente: para calcular datos de la corriente eléctrica, en la ecuación de Schrödinger, en telecomunicaciones, al conectarnos al wifi, al recrear ondas de audio con la transformada de Fourier…

Pero ¿cómo podemos usarlos si son tan abstractos y difíciles de concebir? ¿Si no son como los números naturales que podemos asociar con algo del tipo «dos manzanas, tres manzanas, cinco manzanas»…? ¿O como los racionales («media manzana») o negativos («me deben una manzana»)? ¿O incluso como los irracionales y transcendentes como π o e, que podemos también medir?

La metáfora clave que se usa en el vídeo es considerarlos como lo que vemos en el plano de un espejo.

Lo que vemos al mirar el espejo tampoco es «real»: somos nosotros, hay uno de nosotros, y dos ojos, y quizá tenemos media galleta en la mano… pero en realidad es todo un efecto óptico de reflexión de la luz (de hecho «en 3D» aunque el espejo sea 2D).

Pero la imagen del espejo conserva tantas propiedades de la realidad que podemos incluso usarlos para peinarnos, maquillarnos o admirar la belleza y que lo que hagamos en ellos afecte a lo que sucede con nosotros mismos en el plano real. El resultado de »operar» en el espejo es como cuando operamos con números imaginarios. Y si luego «bajamos» al MundoReal™, queda algo tangible.

El resto de la charla (cuaterniones incluidos) es también interesante, y tiene un nivel divulgativo aunque con acertados dardos instructivos que van directos a la diana, que puede que ya conozca quien lo vea según lo poco o mucho que le gusten las matemáticas. Merece la pena echar un rato con él; seguro que aprendes más en esos 70 minutos que viendo 280 reels de TikTok, que más bien son como -70 minutos de vida.

Relacionado:

Arte y Diseño

Diales personalizados

Por @Alvy — 26 de Mayo de 2026

Dials es una herramienta absurdamente específica, con un único objetivo y muchas opciones: generar diales y relojes analógicos vectoriales, donde se puede ajustar prácticamente todo.

Una vez comienzas a explorarlo puedes ver su potencia, y jugar con los diferentes valores un buen rato. Con los diversos ajustes se pueden crear velocímetros, indicadores, paneles retro o interfaces tipo NASA totalmente personalizados. Igual te sirve hasta para algún proyecto maker.

Entre otras cosas se puede cambiar el ángulo del arco (ej. 220°), el rango de valores (digamos, 0-160), las subdivisiones entre marcas o el grosor… Pero eso no es todo, hay detalles casi enfermizos, como los radios de las esquinas redondeadas, si los números van dentro o fuera del dial, si hay puntitos centrales… y me dejo más de la mitad.

Una vez listo, se puede exportar en PNG o SVG, a varios tamaños y para mayor simplicidad las configuraciones se guardan en la propia URL. El sueño de cualquier diseñador industrial, maker, amante de las interfaces de coches imposibles o para quien haya dedicado demasiadas horas a mirar cuadros de mando en videojuegos, simuladores y cacharros electrónicos.

Relacionados: