Visual animation guide
This guide shows the real sprites, explains what each sequence is for, and plays a simple loop so you can understand how each animation works. The character creator lets you preview animations with the frames you create.
Caminar
stand-neutral -> walk-step-left -> stand-neutral -> walk-step-right
Este loop base marca el ritmo del personaje en escritorio y web. Si el baseline cambia entre frames, el personaje vibra o salta visualmente.
stand-neutral.png
walk-step-left.png
stand-neutral.png
walk-step-right.png
Salto y aterrizaje
jump -> fall -> bounce-squish -> bounce-recover -> stand-neutral
La secuencia pasa por impulso, caída y recuperación. El rebote le da peso; sin esos frames el personaje se siente rígido.
jump.png
fall.png
bounce-squish.png
bounce-recover.png
stand-neutral.png
Arrastre y resistencia
tilt-left / tilt-right + resist-frame-1 / resist-frame-2
Cuando arrastrás al mochi, primero cambia a inclinaciones suaves o fuertes según la dirección y la tensión del drag. Si se estira o resiste, alterna entre resist-frame-1 y resist-frame-2.
dragged-tilt-left-light.png
dragged-tilt-left-heavy.png
resist-frame-1.png
resist-frame-2.png
dragged-tilt-right-light.png
dragged-tilt-right-heavy.png
Pared y techo
grab-wall / climb-wall y grab-ceiling / climb-ceiling
Los frames de agarre fijan la pose y los de climb alternan el movimiento. Esa combinación evita que escalar se vea como un simple teletransporte.
grab-wall.png
climb-wall-frame-1.png
climb-wall-frame-2.png
grab-wall.png
grab-ceiling.png
climb-ceiling-frame-1.png
climb-ceiling-frame-2.png
grab-ceiling.png
Idle expresivo
sit -> sit-look-up -> spin-head loop -> sit
Este bloque hace que el personaje siga vivo cuando no está caminando. El spin-head necesita una progresión consistente para que el loop cierre limpio.
sit.png
sit-look-up.png
spin-head-frame-1.png
spin-head-frame-4.png
spin-head-frame-2.png
spin-head-frame-5.png
spin-head-frame-3.png
spin-head-frame-6.png
sit.png
Usando computadora
sit-pc-edge-legs-down -> dangle-1 -> dangle-2 -> dangle-1
Este es el loop que usa el mochi web cuando la burbuja de chat está abierta y el personaje queda apoyado en el borde de la interfaz como si estuviera usando la compu.
sit-pc-edge-legs-down.png
sit-pc-edge-dangle-frame-1.png
sit-pc-edge-dangle-frame-2.png
sit-pc-edge-dangle-frame-1.png
