Cats in Happy City:
Cuando las normas UE
se juegan en la calle
Un videojuego de simulación sobre colonias de gatos callejeros que traduce bienestar animal, burocracia institucional y ODS a decisiones cotidianas reales. Porque la teoría sin acción tangible no cambia nada.
"Las normativas existen. Las intenciones también. Lo que falta es la práctica diaria que las convierte en hábito (educación + consecuencias)."
Paleta, tipografía y tokens visuales
Un sistema construido desde Figma Make y traducido a código: colores de ciudad nocturna y espacio urbano, tipografía redonda y accesible, tokens de interfaz lúdica con intención pedagógica.
La brecha entre la norma y el hábito diario
La Unión Europea cuenta con normativa de bienestar animal, los Objetivos de Desarrollo Sostenible incluyen metas sobre ciudades sostenibles y ecosistemas terrestres, y las instituciones disponen de herramientas legales específicas para la gestión ética de las colonias felinas. Sin embargo, las colonias de gatos callejeros siguen viviendo una realidad muy distinta: recursos insuficientes, procesos administrativos lentos y decisiones que no solucionan problemas en la vida real. No falta legislación; falta convertirla en práctica cotidiana.
Cats in Happy City nace precisamente de esa brecha. La jugadora gestiona una colonia en Ciudad Feliz y debe decidir cuándo alimentar, cómo responder a una denuncia vecinal, qué hacer ante un gato enfermo o cómo actuar cuando la burocracia bloquea una intervención necesaria.
Objetivo del juego
El objetivo del juego no es enseñar leyes, sino mostrar que aplicar los ODS y la normativa europea a escala de barrio —a través de decisiones diarias, no de declaraciones de intenciones— es lo único que genera un cambio real. Los recursos educativos facilitan la comprensión del marco general, pero la transformación ocurre en la práctica cotidiana.
Teoría que existe. Práctica que falta.
Los ODS y la normativa UE sobre bienestar animal no son declaraciones abstractas. Son compromisos concretos se cumplen ( o no ) sistemáticamente en los espacios urbanos compartidos.
Lo que dice la norma vs lo que pasa en la calle
ODS 11 (ciudades sostenibles), ODS 15 (ecosistemas terrestres) y el Reglamento UE de bienestar animal establecen obligaciones claras sobre coexistencia, gestión de fauna urbana y responsabilidad municipal. Están aprobados, publicados y en vigor.
Recursos insuficientes, trámites que bloquean acciones urgentes y población que no reconoce sus obligaciones, compromiso mínimo exigible. La brecha no es de legislación — es de hábito, de práctica diaria, de decisiones pequeñas que nadie toma.
Ciudades y comunidades sostenibles
En el juego, cada decisión sobre el espacio urbano compartido — dónde se alimenta, cómo se gestiona el conflicto vecinal — es una aplicación directa de este ODS a escala de barrio.
Vida de ecosistemas terrestres
La salud de la colonia, el control de poblaciones sin esterilización y el impacto en la fauna local son mecánicas activas del juego, no texto informativo al margen.
La burocracia como mecánica
El sistema burocrático del juego simula situaciones reales expuestas públicamente, de distintos municipios y ciudades: plazos que vencen, formularios que bloquean acciones urgentes y consecuencias concretas de no cumplir con los trámites a tiempo.
Metodología
Diseño sistémico orientado a consecuencias
Cada mecánica del juego tiene un referente real. Nada es decorativo.
Definición de mecánicas, eventos narrativos, reglas normativas y ciclo semanal con referencia explícita a normativa UE y ODS aplicables a cada situación de juego.
Paleta, tipografía y componentes construidos en Figma Make y exportados como tokens CSS. Sin frameworks genéricos — todo a medida para este proyecto.
Prototipo inicial en Phaser.js. Migración completa a React + Vite cuando la complejidad de la interfaz de gestión superó lo que un motor de juego 2D puede manejar bien.
Estado global en App.jsx con useState + updateGs. Props controladas desde el componente raíz a cada pantalla. Persistencia en localStorage. Sin Redux.
Revisión WCAG con cálculo de luminancia relativa en Python. Verificación visual end-to-end con Playwright. 179 tamaños de fuente normalizados.
npm run build → script Python fix-crossorigin → limpieza de artefactos → ZIP para itch.io. Documentado para reproducirse en cualquier sesión de trabajo.
Dos capas, una experiencia coherente
El juego separa la capa narrativa de la capa de gestión sistémica. Un estado global las conecta sin duplicar datos ni lógica.
Narrativa e inmersión
Las pantallas que sitúan a la jugadora en Ciudad Feliz y generan vínculo con la colonia
- TitleScreen — Portada con ilustración de voluntaria
- OpeningScreen — Introducción narrativa en carrusel de 4 páginas
- IntroTutorial + GuidedTour — Incorporación progresiva al sistema
- ColonyScene — Vista interactiva de la colonia con gatos animados
- EncounterDialog — Eventos narrativos aleatorios con consecuencias reales
- ConflictScreen — Gestión de tensiones con vecinos y administración
Tecnología: SVG custom de gatos (CatSVG.jsx), animaciones CSS, estados emocionales visuales por gato individual.
Gestión y consecuencias
Las pantallas donde las decisiones tienen impacto medible en la colonia y el entorno
- MapScreen — Mapa de distritos con colonias activas y turno nocturno
- MgmtScreen — Panel semanal: misiones, coordinación y cierre de semana
- GameTopBar — Recursos en tiempo real: energía, presupuesto, motivación
- PauseMenu — Pausa con acceso a opciones y estado de partida
- Sistema — Burocracia con plazos y penalizaciones reales
- Ciclo semanal — Mecánica temporal que afecta a salud y nutrición de la colonia
Tecnología: Estado global gs con persistencia en localStorage, props controladas desde App.jsx hacia cada pantalla.
Del concepto al juego publicable
Voluntariado felino como mecánica de norma aplicada
GDD inicial: mecánicas sistémicas de colonias urbanas, sistemas de gestión como réplica de burocracia municipal real, ciclo de semanas con consecuencias acumulativas y alineación explícita con ODS 11 y 15.
Primer intento en Phaser.js
El motor resultó inadecuado para la complejidad de la interfaz de gestión: paneles, modales, navegación entre pantallas y estado persistente requerían una arquitectura de aplicación, no de juego 2D.
Sistema de tokens desde Figma Make
Paleta completa, tipografía (Baloo 2 + Nunito), componentes de interfaz e iconografía custom. Exportación a theme-cats.css como fuente de verdad visual para todo el proyecto.
Migración y construcción en React + Vite
Arquitectura de estado global, 10+ pantallas como componentes React, integración del sistema visual, fuentes locales (sin CDN externo en producción) y corrección de bugs críticos de producción.
Auditoría, build y publicación en itch.io
Auditoría WCAG completa con verificación Playwright, corrección del bug crossorigin de Vite en hosting estático, pipeline de build documentado y publicación en itch.io.
Los ODS no se cumplen en los informes anuales. Se cumplen — o no — en las decisiones que toma una gestora de colonia un martes por la noche cuando tiene poco presupuesto, un gato enfermo y un formulario de gestión sin rellenar. Ese es el juego. Esa es también la realidad.
Lo que se construyó
Del prototipo al juego publicado con marco normativo integrado
Normativa UE traducida a mecánica
Cada sistema del juego — burocracia, ciclo de recursos, gestión de conflictos — tiene un referente en normativa real. La jugadora aprende aplicando, no leyendo.
ODS visibles en decisiones cotidianas
ODS 11 y 15 no aparecen como texto informativo. Aparecen como consecuencias: una colonia mal gestionada tiene impacto medible en el ecosistema del barrio dentro del juego.
Arquitectura React sólida y documentada
Estado global sin Redux, props controladas, fuentes locales y pipeline de build reproducible. Una base técnica que permite añadir mecánicas sin romper lo existente.
Juego publicado y jugable en itch.io
De prototipo experimental a videojuego publicado con build de producción optimizada para hosting estático, auditoría de contraste WCAG y verificación visual end-to-end.
Por qué importa alinear norma y hábito
La mayoría de los proyectos que citan los ODS los usan como marco decorativo: aparecen en la introducción y desaparecen en la práctica. Cats in Happy City funciona al revés — la normativa está en las mecánicas, en los sistemas de consecuencias, en los plazos burocráticos que la jugadora tiene que gestionar.
Eso es lo que falta en la aplicación real de la normativa UE sobre bienestar animal y en el cumplimiento de los ODS urbanos: no más texto, sino más práctica. No más declaraciones, sino más decisiones cotidianas bien tomadas.
Un juego no cambia hábitos solo. Pero sí puede demostrar que la teoría tiene consecuencias concretas cuando se aplica — y que no aplicarla también las tiene.
Herramientas del proyecto
La norma se aplica
o no sirve de nada
Cats in Happy City es un videojuego sobre gestión de colonias felinas. También es una demostración de que los ODS y la normativa UE tienen sentido práctico real cuando se traducen a decisiones cotidianas concretas — y de que ignorarlas tiene consecuencias igual de concretas.
"Se habla mucho de sostenibilidad, bienestar animal y ciudades inteligentes.Este juego pregunta qué pasa cuando tienes que tomar esas decisiones tú,
con recursos limitados, un martes por la noche."