Origen_
La casita donde empezó todo: una cochera, dos amigos y el primer cuadro soldado. Premio: hacha.
← Proyectos
[Proyecto 07 · Juego 3D]
Totopía_
Un planeta de bolsillo donde la historia de una empresa se juega en vez de leerse. Caminas, talas árboles, construyes puentes y escaleras, y en cada estación descubres un capítulo de la marca. Lo hicimos en el lab, del modelado en Blender a un juego que corre en el navegador.
TipoProyecto propio · Lab
FormatoJuego 3D en el navegador
Nuestro rolConcepto, 3D, juego y sonido
[totopia.vercel.app]
[La idea]
La página de "Nosotros" que nadie lee, convertida en un mundo que dan ganas de recorrer. Cada capítulo de la historia es un lugar del planeta, y para llegar hay que ganarse el camino_
[Misión 1 de 5]
[Cinco misiones]
Una empresa,
cinco estaciones_
Para la demo inventamos Cuadro Alto, una marca ficticia de bicis soldadas a mano en Guadalajara. Al llegar a cada estación la cámara se vuelve cinematográfica y aparece un capítulo con su dato clave. Algunas te dan una herramienta para seguir avanzando.
Equipo_
Alrededor de la fogata se presenta a la gente que hace las bicis.
Taller_
El taller está en una isla. Para llegar hay que talar árboles y construir un puente. Premio: pico.
Faro_
Desde el faro se ve hasta dónde ha llegado la marca y a quién ayuda.
Cohete_
Lo que viene está en lo alto de una meseta, y se sube por una escalera hecha a mano.
[Ganarse el camino]
Talar, picar,
construir_
Las herramientas cambian el mapa. Con el hacha cada árbol da una madera y con diez se construye un puente. El pico rompe rocas, y con treinta piedras se levanta una escalera de caracol. Al terminar las cinco misiones se desbloquea un bote para darle la vuelta al mundo por mar.
Hacha → 10 maderas → puentePico → 30 piedras → escalera5 misiones → bote
[Orientarse]
Nadie se pierde
en un planeta chico_
Una interfaz ligera, en los colores de Totot, que guía sin tapar el mundo. Cada estación tiene su color y su ícono en toda la interfaz.
[Vista de mapa]
- MisiónLa pista de la misión actual y una barra con las cinco estaciones.
- BrújulaMuestra hacia dónde queda cada estación mientras caminas.
- BalizaUn haz de luz y un marcador con la distancia, en metros, a la siguiente estación.
- MapaCon la tecla M la cámara sube y muestra el planeta entero.
- AccionesLos avisos para talar, picar o construir aparecen sobre el objeto en el mundo.
- InventarioHerramientas, maderas y piedras siempre a la vista.
[En el celular]
Se juega
con el pulgar_
En pantallas táctiles aparecen un joystick y botones para saltar y usar. La calidad gráfica se ajusta sola si el teléfono no da el ancho.
[Bajo el capó]
Lo que hicimos_
El mundo, el personaje, la física, el sonido y la historia, de punta a punta.
Un mundo en Blender
Planeta low-poly con bosques, desierto, islas y meseta; personaje con articulaciones separadas y piezas de puente, escalera y bote. Todo exportado a GLB con compresión Draco.
Caminar sobre una esfera
La gravedad apunta al centro del planeta: el personaje camina, salta y choca con árboles y rocas en cualquier punto del mundo.
Construcción
El juego mide la brecha frente a ti para saber si cabe un puente y arma la escalera para que siempre arranque en tierra firme.
Imagen de juego
Sombras de contacto, bloom y desenfoque tipo maqueta; shaders de agua con espuma en la orilla, árboles que se mecen con el viento y partículas.
Sonido hecho en código
Pasos, hachazos, el mar y una caja de música que cambia de acorde se generan en el navegador con Web Audio, sin un solo archivo de sonido.
La historia es intercambiable
Nombre, textos, datos y premios de cada estación viven en un solo archivo. Cambiarlos convierte a Totopía en la historia de otra marca.
BlenderThree.jsthree-mesh-bvhpostprocessingN8AOWeb AudioViteDracoVercel
[En línea]
Dale la vuelta
al mundo_
Cinco misiones y un bote para el final. Se juega con teclado o en el celular.
Jugar Totopía ↗[¿Quieres contar tu historia como un juego?]
Hablemos_