De PNG a animación Rive: cómo convertir una imagen en un archivo .riv
Por el equipo de Charmotion · Actualizado el
Para convertir un PNG en una animación de Rive, importa la imagen en el editor de Rive, agrega una malla para que sus píxeles puedan deformarse, vincula la malla a huesos, crea los keyframes de cada animación y conéctalas en una máquina de estados (state machine) antes de exportar el .riv. Rive también acepta JPEG, WebP y SVG; el SVG se convierte en formas vectoriales editables, mientras que un PNG sigue siendo píxeles.
Puntos clave
- Rive importa PNG, JPEG y WebP como imágenes rasterizadas y convierte SVG en formas vectoriales editables.
- Una imagen rasterizada se mueve como un rectángulo plano hasta que le das una malla; la malla junto con los huesos es lo que permite que un PNG se doble, se aplaste y se incline.
- Dividir el personaje en imágenes separadas (cabeza, cuerpo, brazos) da un movimiento mucho más natural que deformar una sola imagen plana.
- Un .riv útil es más que una animación: planifica los estados que necesita tu app y conéctalos en una máquina de estados (state machine).
¿Ya tienes un personaje o logo? Mira tu personaje en pantallas reales de una app: pantallas de splash, onboarding, carga y estado vacío. Es gratis, funciona en tu navegador y no sube nada.
¿Rive puede animar un PNG?
Sí. El editor de Rive importa imágenes PNG, JPEG y WebP, además de archivos SVG y de Photoshop. La diferencia importa: un SVG se convierte en objetos vectoriales de Rive que puedes editar punto por punto, mientras que un PNG sigue siendo un mapa de bits. Puedes mover, rotar y escalar un mapa de bits de inmediato, pero para que se doble necesitas una malla.
Según la propia descripción de Rive, las mallas permiten "deformaciones naturales y orgánicas en gráficos rasterizados": dibujas un contorno alrededor de la imagen, Rive lo triangula y luego puedes mover los vértices en una línea de tiempo o dejar que los huesos los muevan. Solo se renderiza el área dentro del contorno, así que incluso puedes recortar varias partes de una misma imagen con varias mallas.
¿Cómo debo preparar el PNG antes de importarlo?
- Fondo transparente. Quita el fondo primero. Los halos que queden se notarán sobre cualquier color en el que luego coloques la animación.
- De frente y con espacio alrededor de las extremidades. Los brazos y las piernas que tocan el cuerpo son difíciles de mover sin desgarrar la imagen.
- Divídelo en partes si puedes. Exporta la cabeza, el cuerpo, cada brazo y los accesorios como PNG separados desde tu archivo de diseño. Las partes separadas pueden rotar sobre su propio pivote; una sola imagen plana solo puede deformarse.
- Resolución suficiente. Rive escala los vectores sin problema, pero los mapas de bits se ven borrosos al ampliarse, así que exporta al tamaño más grande en que se mostrará la animación, a 2× para pantallas de alta densidad.
Si el personaje solo existe como un único PNG plano con formas simples y colores sólidos, suele valer la pena vectorizarlo a SVG primero: así animas partes vectoriales reales y el .riv pesa menos.
¿Cómo lo riggeo y lo animo en el editor de Rive?
Los huesos son el esqueleto de Rive. Pueden simplemente llevar objetos hijos (una mano sigue al antebrazo), deformar trazados vectoriales o deformar mallas de imagen. Cuando vinculas una malla a huesos, Rive asigna a cada hueso un color y a cada vértice un peso que puedes pintar, calcular automáticamente y suavizar.
- Importa el PNG (o las partes) arrastrándolo al escenario.
- Agrega una malla a cada imagen en la sección Deform del Inspector y dibuja su contorno.
- Crea huesos para las partes que deben doblarse: una columna para el cuerpo y una cadena para cada brazo.
- Vincula los vértices de la malla a los huesos y ajusta los pesos hasta que las curvas se vean limpias.
- Crea una línea de tiempo por animación (idle, happy, wave, etc.) y agrega keyframes (fotogramas clave) a los huesos.
Mantén el reposo (idle) sutil y apto para loop, y haz que las reacciones sean puntuales y cortas, y que vuelvan a la pose de reposo, para que el cambio entre ellas nunca dé saltos.
¿Por qué el .riv necesita una máquina de estados?
Un .riv con líneas de tiempo sueltas reproduce una sola animación. Una máquina de estados permite que tu app cambie entre ellas con un número, un booleano o un trigger, y suaviza las transiciones. Rive ahora recomienda controlar las máquinas de estados mediante Data Binding (un view model con propiedades) en lugar de los inputs anteriores, y los runtimes más recientes están diseñados en torno a esto.
Un set práctico para el personaje de una app se ve así:
| Estado | Tipo | Uso habitual |
|---|---|---|
| idle | loop | Predeterminado en todas las pantallas |
| happy, wave | loop | Saludo, onboarding |
| thinking, loading | loop | Esperando una solicitud |
| sad, sleeping | loop | Errores, estados vacíos |
| attention | loop | Guiar al usuario hacia una indicación o una función nueva |
| listening, talking | loop | Asistentes de chat y de voz |
| success, error, yes, no | reacción puntual | Reacciones a una acción del usuario |
| enter, exit | reacción puntual | Mostrar y ocultar el personaje |
¿Hay una forma más rápida de obtener un .riv a partir de un PNG?
Riggear y crear los keyframes de diecisiete estados a mano lleva días de trabajo para la mayoría de las personas. Charmotion hace ese paso por ti: sube el PNG y el motor divide la ilustración plana en partes vectoriales (o, en ilustraciones detalladas y en 3D, conserva tus píxeles exactos y los riggea para compresión, estiramiento, inclinación y parpadeos), crea los keyframes de 17 animaciones y las conecta en un solo .riv con un view model de Data Binding y una máquina de estados clásica. Cada plan de pago incluye el .riv además de video transparente y código; puedes previsualizar tu propia imagen en el navegador primero, gratis y sin subirla.
Charmotion funciona mejor con mascotas de marca y personajes de logo planos y de frente. Las fotos, el arte pictórico y las vistas de perfil no encajan bien, y para esos casos un animador humano en el editor de Rive sigue siendo la mejor opción.
Convierte un PNG en una animación de Rive
- Prepara la imagen. Quita el fondo y, si es posible, exporta las partes del personaje como PNG separados.
- Importa en Rive. Arrastra los PNG al escenario de Rive. Los SVG se convierten en formas vectoriales; PNG, JPEG y WebP siguen siendo mapas de bits.
- Agrega mallas. Asigna a cada mapa de bits una malla en la sección Deform para que sus píxeles puedan doblarse.
- Riggea con huesos. Crea cadenas de huesos, vincula a ellas los vértices de la malla y ajusta los pesos.
- Anima con keyframes. Crea una línea de tiempo por estado: un idle apto para loop, más los loops y las reacciones puntuales que necesita tu app.
- Conecta una máquina de estados y exporta. Conecta las líneas de tiempo en una máquina de estados controlada por un view model o por inputs y luego exporta el .riv.
Preguntas frecuentes
¿Puedo importar un PNG en Rive?
Sí. El editor de Rive importa imágenes PNG, JPEG y WebP arrastrándolas o desde el panel Assets. Siguen siendo mapas de bits; agrega una malla si quieres que se deformen.
¿Es mejor SVG que PNG para Rive?
Para arte plano, normalmente sí. Rive convierte un SVG en objetos vectoriales editables, así que puedes animar formas individuales y el archivo sigue siendo ligero y nítido a cualquier tamaño. El PNG conserva los píxeles exactos, lo que conviene para arte detallado o con sombreado.
¿Mi .riv pesará más con un PNG dentro?
Sí, los mapas de bits incrustados suman su peso comprimido al archivo, mientras que cada forma vectorial se describe en unos pocos bytes. Exporta los mapas de bits a un tamaño no mayor que el que vas a mostrar.
¿Necesito un plan de pago de Rive para exportar?
Los planes de Rive difieren en lo que incluyen y cambian con el tiempo. Revisa las funciones actuales en la página de precios de Rive antes de empezar un proyecto comercial.
Respuestas rápidas de esta guía
Fuentes
- Importing assets, Rive
- Meshes, Rive
- Bones, Rive
- State Machine, Rive
- Data Binding overview, Rive
- Rive pricing, Rive