GranotaGo banner

GranotaGo

Unity 2D C# WebGL UI Systems

Overview

GranotaGo es un juego educativo desarrollado en Unity para navegador en el que el jugador programa los movimientos de una rana mediante bloques de lógica computacional arrastrables. Creado para la 3ª edición de los Premis Ludi, impulsados por 3Cat y GameBCN, el proyecto busca introducir el pensamiento computacional a niños de 6 a 8 años a través de puzles interactivos. El juego fue diseñado con una interfaz completamente responsiva para ofrecer la misma experiencia en PC, móvil y tablet.

4 Team members
5 days Development time
2025 Year
Unity Engine

Mi rol

Gameplay & UI Programmer

Responsable del diseño e implementación de los principales sistemas de gameplay y UI, incluyendo el editor de bloques mediante drag-and-drop, el panel de ejecución, el sistema de progresión y la interfaz adaptada para WebGL para distintos dispositivos.

Trailer

0:00 / 0:00

Qué programé

Drag and drop block system

Block Execution System

Sistema encargado de interpretar la secuencia creada en el panel de ejecución, procesando los bloques en orden y convirtiendo cada uno en una acción de la rana. La ejecución espera a que cada movimiento finalice antes de continuar con el siguiente. Si la secuencia no resuelve el nivel, la rana vuelve automáticamente a la posición inicial para permitir un nuevo intento.

Drag and drop block system

Sistema de Bloques Arrastrables

Sistema de drag-and-drop para construir secuencias de lógica mediante bloques. Durante el arrastre, los elementos se muestran en un DragOverlay independiente. El panel de ejecución calcula en tiempo real la posición de inserción y muestra una previsualización antes de soltar el bloque. Al liberarlo, se inserta en la posición correcta o vuelve a su origen con una animación suave. El sistema soporta bloques tipo Loop con contenedores anidados y tamaño dinámico.

Execution panel layout

Panel de Ejecución Responsivo

El panel de ejecución ajusta su layout en función del contenido. Si los bloques caben en pantalla, se centran automáticamente; en caso contrario, se habilita scroll horizontal. El tamaño total del contenido se recalcula dinámicamente incluyendo bloques anidados como los loops. Al reordenar bloques, el resto se desplazan con animación suave. El sistema es compatible con ratón, touch y diferentes resoluciones.

Level selector and stars

Selector de Niveles y Progresión

Sistema de progresión con desbloqueo secuencial de niveles y guardado de partida mediante PlayerPrefs. Cada nivel evalúa la solución según el número de bloques utilizados, otorgando entre una y tres estrellas. La mejor puntuación se conserva entre partidas y se refleja tanto en el selector de niveles como en la pantalla de finalización.