Los smartwatches se han convertido en una extensión más de nuestro día a día. Si diseñas para ellos, Watch Face Studio es la herramienta que necesitas para crear esferas personalizadas e interactivas para dispositivos Galaxy Watch con Wear OS.

En este tutorial, te mostramos cómo aprovechar una de las funciones más potentes del estudio: el giroscopio. Gracias a esta herramienta, puedes hacer que tus diseños reaccionen dinámicamente a los movimientos de la muñeca, generando experiencias visuales mucho más inmersivas.

Para poder mostraros todo su potencial, nos centraremos en dos ejemplos creativos.: Cambiar la escena del reloj según si el usuario sube o baja la mano y aplicar un efecto de paralaje con elementos 2D para simular profundidad 3D

Lo mejor de todo es que no necesitas conocimientos avanzados de programación. Watch Face Studio permite implementar este tipo de interacciones de forma sencilla y visual.

Cambio de la esfera del reloj en función del movimiento de la muñeca

Este proyecto pretende demostrar cómo se pueden cambiar diferentes propiedades en función del movimiento y la rotación de la muñeca. Nuestro objetivo es crear una escena dinámica en la que al subir la muñeca se pasa a una escena diurna, y al bajarla se vuelve a una escena nocturna. Puedes empezar siguiendo estos pasos:

1.     Al abrir el proyecto, en la lista de capas, mantén pulsada la tecla Ctrl/Comando y haz clic en «Sun», «CloudLeft», «CloudRight», «DaySky», “PalmTreeShadow” y «DayWater» para seleccionar estos componentes.

2.     En la pestaña «Propiedades», en la sección GYRO, pulsa «Aplicar Giroscopio». Después, en la sección X-AXIS, ajusta el rango de -45 a 45 grados. Como es la mitad del rango total, el usuario sólo tendrá que inclinar la muñeca 45 grados en cualquier dirección para ver el efecto.

3.     A continuación, selecciona «DaySky» y «DayWater». Ajusta la opacidad al 0% para ambas direcciones en el X-AXIS. Como «NightSky» y «NightWater» son capas situadas justo debajo de “DaySky” y «DayWater», al reducir la opacidad de los elementos diurnos se revelan lentamente los elementos nocturnos.

4.     Selecciona «CloudLeft» y en la sección X-AXIS, ajusta el desplazamiento de X a -250px para ambas direcciones.

5.     Para «CloudRight», el desplazamiento debe ser de 250px para ambas direcciones.

6.     En la lista de capas, selecciona «Sun» y arrastra el pivote del sol al centro de la esfera del reloj, que es (225, 225). Esto hace que parezca que el sol va a lo largo de los bordes del reloj.

7.     Selecciona «Sun» y «PalmTreeShadow» y en la sección X-AXIS, ajusta la opacidad a 0% para ambas direcciones. Después, ajusta la rotación negativa a -70 grados y la positiva a 70 grados.

8.     Selecciona «PalmTreeShadow» y arrastra el pivote a su raíz, ajusta la escala a 180% para rotación negativa en el X-AXIS y a 130% para rotación positiva. Como el árbol está ligeramente a la izquierda, tienes que estirar más la sombra cuando cae sobre el lado derecho.

9.     Aquí puedes ver una vista previa de la esfera de reloj que acabamos de crear.

Efecto de paralaje 3D usando imágenes 2D

El efecto de paralaje es una técnica visual que crea la ilusión de profundidad y movimiento moviendo elementos a diferentes velocidades. Cuanto más cerca esté el objeto del sujeto, más se moverá. Podemos seguir esta regla para crear una esfera de reloj en Watch Face Studio.

1.     Al abrir el proyecto, en la lista de capas, selecciona todos los árboles dentro del grupo «Trees», «mountain front» y «mountain back». En la sección GYRO de la pestaña «Propiedades», haz clic en «Aplicar Gyro».

2.     No te olvides de establecer, en las secciones X-AXIS e Y-AXIS, el rango de -45 a 45 grados.

3.     Ahora selecciona sólo los árboles dentro del grupo «Trees». En la sección X-AXIS y aplica un desplazamiento de 60px a X para rotación negativa y -60px para rotación positiva. Ve a la sección Y-AXIS y aplica un desplazamiento de -60px a Y para rotación negativa y 60px para rotación positiva.

4.     En la lista de capas, selecciona «mountain front». Este debe desplazarse menos que los árboles ya que está detrás de ellos. Ahora tan solo tienes que repetir el paso 3 para el «mountain front », pero, esta vez, en el eje X, establece la rotación negativa a 40px y la rotación positiva a -40px. Para el Y-AXIS, establece la rotación negativa a -40px y la positiva a 40px.

5.     Selecciona «mountain back» y repite el paso 3. Esta vez, en el X-AXIS, establece 20px como rotación negativa y -20px como rotación positiva. Para el eje Y, establezca -20px como rotación negativa y 20px como rotación positiva.

6.     El aspecto final de la esfera del reloj será el siguiente:

¡Importante! Puedes añadir tantas capas como quieras. Sin embargo, ten en cuenta el rendimiento y el consumo de batería antes de añadir un número elevado de capas.

Como puedes ver, Watch Face Studio simplifica la implementación de interacciones complejas, permitiéndote diseñar esferas más inmersivas sin necesidad de programación avanzada. Descárgalo, explora sus funciones y empieza a crear diseños que se muevaen contigo. ¿Te animas a probarlo?

Samsung Dev Spain es la comunidad oficial de Samsung para desarrolladores españoles. Si te das de alta, puedes conseguir entrar en nuestro programa de préstamos -y conseguir dispositivos para desarrollar apps para nuestro ecosistema-, acceder a material gratuito como la Guía de optimización de apps para foldables, participar en promociones como dispositivos por apps o acudir gratis a eventos formativos como Samsung Dev Day o disfrutar de ventajas exclusivas en Samsung PLUS.