Cómo crear una cara de reloj con Watch Face Studio

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

En la siguiente guía, se describen las herramientas y ventanas principales que se incluyen en Watch Face Studio (WFS).

create-watchface

Herramientas

WFS incluye las siguientes herramientas:

  • Add Component: Abre una lista de componentes que puedes agregar a tu cara de reloj.
  • Forward / Backward: Mueve un componente seleccionado hacia adelante o atrás.
  • Group/Ungroup: Agrupa varios componentes y contrólalos como uno solo.
  • Mask: Es una herramienta que te permite cubrir todas o algunas de las otras capas, según el contorno de la forma de la capa inferior.
  • Build: Abre el diálogo de compilación.
  • Build: Abre un diálogo para obtener una vista previa de la cara de reloj en un dispositivo.

hotkeys

Componentes

Agrega todos los componentes que desees a la cara de reloj. También puedes usar una fuente de diseño personalizada para tus componentes. Por ejemplo, muestra datos de la frecuencia cardíaca o de los pasos con un componente de texto, o agrega una imagen personalizada para iniciar una app en particular.

Tipos de componentes

Los componentes compatibles se describen en las siguientes secciones.

Lienzo de la cara de reloj

Establece un color de lienzo para la capa inferior de la cara de reloj.

canvas

Texto

Los campos de texto son textos normales de forma predeterminada. El texto normal es estático y no cambia. En la ventana Properties del campo de texto, puedes cambiar el campo de texto normal a texto de datos. El texto de datos cambia y se propaga en función de las etiquetas.

Para obtener más información, consulta Expresiones de etiqueta.

Selecciona la opción Apply Curved-Text para crear texto que se curva con la cara de reloj.

Si quieres determinar la curva de tu texto, configura el ancho (W) y la altura (H). Si cambias W y H, se modificará automáticamente la dimensión de tu componente de texto. Para determinar la posición de tu texto, selecciona uno de los ajustes predeterminados del rango. Se pueden crear rangos adicionales si especificas Start y Angular distance. Establece la dirección del texto en el sentido de las manecillas del reloj o en el sentido contrario.

curved-text

Forma

Agrega varias formas, incluidos rectángulos y elipses.

Imagen

WFS admite la importación de imágenes personalizadas.

Animación

Importa secuencias de imágenes para animaciones.

animation

Agrega una animación como se describe en los siguientes pasos:

  1. Crea tu propia secuencia de animación con un programa de diseño, como Adobe Flash o Adobe Premiere.
  2. Haz clic en Add Component > Animation para agregar archivos de animación a tu cara de reloj.
  3. Selecciona una secuencia de imágenes de tu navegador de archivos y, luego, haz clic en Upload.
  4. Para editar la animación, cambia el orden de cada imagen o quita y agrega imágenes.
  5. Establece el Trigger value para determinar el momento que quieres que se reproduzca la animación.

Establece el valor del activador en WatchFace on para iniciar la animación en cuanto se muestre la cara de reloj. Otras opciones incluyen Tap, Every Sec, Every Min y Every Hour. También puedes retrasar el inicio con Delay y luego introducir una cantidad de segundos.

Las siguientes son otras opciones de animaciones:

  • Auto replay: Repite inmediatamente la animación cuando se completa hasta que se produce una interrupción, por ejemplo, cuando se apaga la pantalla.
  • Repeat delay: Establece un retraso entre las iteraciones de la animación repetida.
  • Resume Playback: Determina si se puede reanudar la animación o comenzar desde el principio cuando se detiene la reproducción debido a una interrupción, como cuando se recibe una notificación o una llamada telefónica.
  • Hide before playing: Determina si se ocultará la animación hasta que se active la reproducción.
  • Hide after finished: Determina si se oculta la animación cuando se completa la reproducción.

animation

Multimedia

Importa imágenes ya animadas, como archivos GIF, Lottie o WebP.

Agrega una imagen multimedia, como se describe en los siguientes pasos:

  1. Haz clic en Add Component > Multimedia.
  2. Selecciona el archivo en tu navegador de archivos y, luego, haz clic en Upload.
  3. Configura el Trigger Value hasta la hora de inicio de la animación.

Ten en cuenta que el tamaño del archivo, la resolución y el número de fotogramas de la imagen multimedia pueden afectar el rendimiento del dispositivo y el consumo de batería. Las imágenes multimedia se cargan de forma asíncrona durante el funcionamiento y pueden tener un retraso cuando se reproduce, según las capacidades de tu reloj y las diversas características de la imagen.

Manecillas analógicas

Agrega manecillas analógicas de reloj para la hora, los minutos y los segundos. Abre el navegador de archivos a fin de seleccionar un archivo de imagen para importar en cada manecilla.

analog-hands

Reloj digital

Las opciones del reloj digital incluyen Date y Time. Cuando agregues la fecha, agrega un componente de texto con la etiqueta Date. La visualización predeterminada para las fechas es DAY_WEEK_S MON_S DAY_1_31_Z. Cuando agregues la hora, agrega un componente de texto con una etiqueta de reloj digital. La pantalla predeterminada para la hora digital es HOUR_1_12_Z:MIN_Z:SEC_Z.

digital-clock

Barra de progreso

Agrega una barra de progreso a la cara de reloj para hacer el seguimiento de varias actividades. Las opciones para el componente de la barra de progreso incluyen una barra de progreso lineal y circular. Para determinar la posición de la barra de progreso, selecciona uno de los seis ajustes predeterminados de rango. Se pueden crear rangos adicionales si especificas Start y Angular distance. Configura la dirección de la barra de progreso en el sentido de las manecillas del reloj o en el sentido contrario.

Administración de componentes

Administra tus componentes con las herramientas de WFS. Puedes agregar, agrupar, desagrupar y ordenar componentes en tu cara de reloj, como se describe en la siguiente sección.

Agrega componentes

Cuando agregas un componente, se coloca en una posición predeterminada en el lienzo. El componente se selecciona automáticamente para que puedas modificarlo con facilidad.

preview-window

Agrupa y desagrupa componentes

Un grupo es una combinación de uno o más componentes. Se pueden agrupar todos los componentes. Los grupos se pueden desagrupar.

group

Enmascara y desenmascara componentes

La forma de la capa inferior determina el área visible del grupo de máscaras. Las capas superiores solo aparecen a través del contorno de la forma de la capa inferior. Por ejemplo, si colocas una imagen triangular en la capa inferior y una imagen y una animación en las capas superiores, la imagen y la animación aparecerán solo a través del contorno triangular de la capa inferior.

group

Para crear el grupo de máscaras, haz lo siguiente:

  1. Selecciona las capas que desea agrupar.
  2. Elige Mask en el área de teclas de acceso rápido o haz clic derecho en las capas y selecciona Mask.

Para liberar el grupo de máscaras en la ventana Layers, haz lo siguiente:

  1. Selecciona el grupo de máscaras.
  2. Selecciona Unmask en el área de teclas de acceso rápido o haz clic derecho en las capas y selecciona Unmask.

Ventana de vista previa

La ventana de vista previa es el área de trabajo principal cuando se diseña la cara de reloj.

Agrega todos los elementos de la cara de reloj al lienzo que se muestra en la ventana de vista previa. En el lienzo, arrastra los elementos a la posición, cámbiales el tamaño, organízalos y rótalos.

preview-window

Ventana de capas

La ventana de capas incluye la lista de componentes y grupos que se muestra en la ventana de vista previa. De forma predeterminada, cada componente tiene su propia capa.

layer

Dentro de la ventana de capas, están disponibles las siguientes acciones:

  • Search: Busca capas por nombre.
  • Show / Hide: Se pueden ocultar o mostrar las capas. Las capas ocultas no se reproducen en la ventana de vista previa.
  • Theme color: Activa o desactiva los colores de un tema.
  • Rename: Cambia el nombre de la capa; para ello, haz doble clic en el campo del nombre e introduce un nombre nuevo.

Si haces clic con el botón derecho en las capas, se muestran las siguientes opciones de menú:

  • Lock/Unlock: Bloquea la capa para que no se mueva en el lienzo.
  • Group/Ungroup: Agrupa varios componentes y contrólalos como uno solo.
  • Mask/Unmask: Hace que las capas superiores sobre la capa inferior solo aparezcan a través del contorno de la forma en la capa inferior.
  • Swap image (solo para imágenes): Cambia el archivo de imagen de una capa a otra.
  • Layer color: Agrega una etiqueta de color a la capa para diferenciarlas.

Líneas condicionales

Las líneas condicionales te permiten mostrar y ocultar componentes en una cara de reloj y controlar su comportamiento. Usa líneas condicionales para cambiar la apariencia de tu cara de reloj en respuesta a ciertas condiciones, como la hora, el recuento de pasos o la batería. Haz clic con el botón derecho en el área del fotograma y selecciona Loop a fin de establecer el condicional para que se repita.

Ten en cuenta que las capas que no se muestran no reducen el rendimiento ni afectan la duración de la batería.

conditionals conditionals

Puedes configurar la cara de reloj para que responda a las siguientes condiciones:

Hora

La cara de reloj puede cambiar dinámicamente según los intervalos de tiempo. Por ejemplo, la cara de reloj puede iluminarse durante el día y, luego, oscurecerse gradualmente a medida que pasa el tiempo. Puedes configurar el tiempo en horas, minutos o segundos.

Para agregar una condición de tiempo, sigue estos pasos:

  1. Crea capas.
  2. Establece períodos para controlar cuándo mostrar cada capa. Selecciona la barra de inicio y, luego, el intervalo de tiempo.
  3. Haz clic y arrastra desde la barra de inicio hasta la barra final.
  4. Repite los pasos dos y tres para definir los períodos de cada capa.
  5. Haz clic en Run para obtener una vista previa de los cambios.

En el siguiente ejemplo, se muestra cómo mostrar distintas caras de reloj para una configuración del sistema de 12 y 24 horas, según la configuración elegida en el teléfono del usuario:

  1. Agrega dos componentes de reloj digital. El primer componente muestra las primeras 12 horas y el segundo, la versión de 24 horas.
  2. Colócalos en la misma posición.
  3. Agrega una condición de 12 y 24 horas a las líneas condicionales.
  4. Establece los períodos a fin de mostrar el primer reloj digital para la capa de 12 horas en el formato de 12 horas y la otra capa en el formato de 24 horas.

Control de tiempo

El control deslizante Time Control te permite ver la cara de reloj en funcionamiento. Úsalo para obtener una vista previa de cómo cambiará la cara de reloj en la ventana de vista previa durante todo el día. Usa el control deslizante a fin de cambiar a horas específicas o mira las animaciones de la cara de reloj con los botones para reproducir y avanzar.

time-control

Recuento de pasos

Puedes diseñar la cara de reloj para que cambie dinámicamente, según el recuento de pasos. Por ejemplo, puedes crear una cara de reloj que cambie según el porcentaje de pasos diarios que se alcanzó.

Ventana Properties

Cada componente tiene un rango de propiedades modificables. Por ejemplo, puedes cambiar el color de los números en un reloj digital o elegir si las manecillas del reloj miden horas, minutos o segundos.

properties

Panel Action

El panel Action en la ventana Properties permite la interacción con tu cara de reloj. El usuario puede presionar un componente para cambiar imágenes, abrir diferentes apps o medir la frecuencia cardíaca.

action-panel

Pestaña Style

Usa la pestaña Style para cambiar los estilos de la capa seleccionada. Puedes agregar estilos para imágenes, imágenes multimedia, índices y componentes de manecillas. Puedes agregar hasta 30 colores del tema y 10 imágenes. Por ejemplo, puedes agregar imágenes específicas de las manecillas para la hora, los minutos y segundos como estilos de manecillas.

style style style

Selecciona el ícono "apply theme" para aplicar los colores y estilos del tema a la capa seleccionada, como se muestra en la siguiente imagen.

style

Color

Aplica un color específico a tu componente o guarda un color de tema para la cara de reloj. Para las complicaciones, el tema de color inicial es la escala de grises.

Apariencia de la imagen

Modifica la apariencia de la imagen con los siguientes controles:

  • Hue: Un control deslizante que controla el tono del color
  • Saturate: Un control deslizante que aumenta o reduce la intensidad del color de la imagen
  • Lightness: Un control deslizante que aclara los colores de la imagen

Apariencia del texto

Usa la pestaña Text appearance para configurar la alineación del texto y el estilo de fuente. Para decorar el texto, selecciona Add Bitmap Font en Project Settings. Si deseas usar el tamaño de fuente predeterminado entre las fuentes del mapa de bits que se agregaron al proyecto, selecciona la casilla de verificación Apply Default Font Size.

text-style

Panel Run

También puedes ejecutar tu cara de reloj dentro de WFS en el panel Run. Puedes ajustar la hora, la fecha, la batería del dispositivo, los pasos, la frecuencia cardíaca o los valores de GYRO dentro de WFS para probar la apariencia de la cara de reloj en diferentes circunstancias. La vista previa Run se puede establecer como Active o Always-on. Cuando se usa Siempre encendida, también se muestran el valor Current-On Pixel Ratio y el botón Analyze.

run run-always-on

Prueba la cara de reloj en Run on device.

Para obtener más información, consulta Cómo probar una cara de reloj.