DevLog #02 — De cuadritos a una ciudad cyberpunk (con arte gratis)
Cambiamos los cuadros de colores por dos packs gratuitos de itch.io, portamos un nivel completo a Unity y ya se puede jugar en el navegador.
En el devlog anterior todo eran cuadros de colores.
Esta vez Raccoon ya empieza a parecerse a un juego.
Y para llegar hasta aquí hicimos algo bastante sencillo: dejamos de esperar a tener arte propio y usamos recursos gratuitos para poder seguir avanzando.
¿Por qué arte de otros?
Porque todavía no tenemos arte propio terminado.
Tenemos bocetos e ideas, pero nada que pudiéramos usar para construir un nivel completo. Y no queríamos detener el juego mientras resolvíamos esa parte.
Recuerdas la regla del primer devlog: antes de gastar horas en arte, el juego tiene que ser divertido. Pues seguimos con ella. Solo que ahora el juego tiene mejor pinta mientras lo comprobamos.
Buscamos algo que encajara con la dirección que queremos para Raccoon y encontramos dos packs gratuitos de Ansimuz (Luis Zuno) en itch.io, ambos con licencia CC0:
- Cyberpunk Street: fondos de calle con neones y una pista de música synthwave.
- Warped City: tileset, personaje animado, enemigos, efectos, letreros de neón y más fondos. También trae un demo hecho en Phaser con un nivel completo.
CC0 significa que se pueden usar incluso en un juego comercial sin pedir permiso.
Aun así, el crédito va aquí porque nos parece lo justo: gracias, Ansimuz.
Y esto es temporal. La idea no es quedarnos con este arte para siempre, sino seguir construyendo el juego mientras hacemos el nuestro.
Primero, un fondo
Lo primero fue lo más fácil: poner la calle de Cyberpunk Street detrás del prototipo, con parallax para que las capas se muevan a distinta velocidad según la cámara.
Y fue curioso lo mucho que cambió el juego con algo tan simple.
Los cuadritos dejaron de parecer un prototipo.
Y empezaron a parecer...
bueno, un juego.
Un nivel que ya existía
Después vimos algo todavía más interesante.
El demo de Warped City trae un nivel completo hecho en Tiled: un mapa de 120×28 tiles de 16 px, con capas visuales, colisiones y objetos.
En vez de diseñar un nivel desde cero, decidimos aprovecharlo y portarlo a Unity.
Para no hacerlo todo a mano, escribimos un script que se ejecuta una sola vez dentro del editor. Lee el mapa y construye la escena Level01 automáticamente.
Suena a que bastaba con importar el mapa y darle Play.
No fue así.
El nivel traía mecánicas que nuestro prototipo todavía no tenía.
Lo que faltaba
La primera fueron las escaleras.
Hay pisos separados por 5 y 10 tiles y el salto no alcanza. Así que, al tocar una escalera y presionar arriba o abajo, apagamos la gravedad y el jugador trepa.
Después, los precipicios. Entre algunos edificios no hay nada, así que caer ahora significa morir. Con la regla de altura del primer devlog ya casi estaba.
También hubo que darle vida al personaje. Hicimos un componente sencillo para reproducir animaciones por frames y un estado para cada momento del jugador: reposo, correr, saltar, caer y trepar.
Y dos detalles más:
- Al derrotar a un enemigo ahora hay una explosión.
- La cámara tiene límites, calculados a partir del tamaño del Tilemap, para que nunca se salga del nivel.
Nada espectacular por separado.
Pero juntas son las cosas que hacen que el nivel empiece a sentirse como un juego completo.
¿Realmente se puede completar?
Un nivel que no hiciste tú puede tener un salto imposible. O una parte que simplemente no se alcanza.
Y no queríamos descubrirlo después de jugar media hora.
Primero analizamos el mapa con las alturas, las distancias y la capacidad real de salto del personaje, para confirmar que existía un camino desde el inicio hasta la meta.
Luego probamos los saltos más difíciles con la física real del juego y la llegada a la meta.
Y por último lo jugamos completo, a mano.
Y sí: se puede completar.
Revisar las licencias también importa
Aquí encontramos algo importante.
La música del demo de Phaser no es de Ansimuz, es de otra persona, y la licencia del pack no la cubre. Por eso no la usamos.
Con algunos efectos de sonido del demo pasó lo mismo: no encontramos un autor ni una licencia claros, así que los dejamos fuera hasta poder verificarlos.
Es muy fácil bajar un pack, ver que dice "gratis" y asumir que todo lo que trae se puede usar.
Pero gratis no siempre significa que todo tenga la misma licencia.
Si estás haciendo un juego que algún día quieres publicar, vale la pena revisar qué cubre cada una.
Ya se puede jugar
Después de todo esto, Raccoon ya tiene un nivel que se puede jugar de principio a fin.
Y lo subimos a itch.io para que lo pruebes directo en el navegador, sin instalar nada:
Jugar Raccoon Cyberpunk en itch.io
Todavía hay cosas pendientes.
Las torretas no disparan, porque así eran en el demo original.
No hay efectos de sonido.
Y en celular el control es bastante limitado: por ahora solo se puede atacar tocando la pantalla.
Si quieres intentarlo
Ahora viene la parte para quien quiera portar un mapa de Tiled a Unity por su cuenta.
Así lo tradujimos nosotros:
| En el mapa | En Unity |
|---|---|
| Capa visual | Tilemap "Main" |
| Colisión sólida | Tilemap "Solid" con CompositeCollider2D |
| Colisión de un solo sentido | Tilemap "OneWay" con PlatformEffector2D |
| Escaleras | Tilemap "Ladders" como trigger |
| Letreros | Sprites animados |
| Enemigos | Prefabs Drone y Turret en las mismas posiciones |
Los enemigos no estaban en el mapa, sino en el código JavaScript del demo, así que sus posiciones hubo que copiarlas desde ahí.
Para las escaleras, la idea es que el Tilemap "Ladders" sea un trigger: mientras el jugador esté dentro y presione arriba o abajo, se pone la gravedad del Rigidbody 2D en 0.
Y para los límites de la cámara, el tamaño del Tilemap te da el ancho y el alto del nivel.
Lo que sigue
Este nivel todavía usa al personaje humano que viene en el pack.
Pero el protagonista de Raccoon no es un humano.
Falta el mapache.
El siguiente paso es ir reemplazando estos recursos temporales por arte propio, empezando por el protagonista. Lo estamos trabajando en parte a mano y en parte con ayuda de IA, y ya contaremos cómo.
La música también va por su propio camino: quiero terminar tocándola yo mismo, para que tenga un sonido más personal.
Y queda una decisión pendiente:
¿Qué hacemos con las máscaras que heredamos del proyecto anterior?
Eso lo dejamos para el próximo devlog.