Este componente no se puede utilizar con los anuncios AMP HTML, los anuncios de vídeo ni los anuncios de imagen.
Puede usar el componente Hoja de sprites para crear animaciones de sprites o para mostrar sprites de imágenes individuales por separado utilizando un único archivo de origen de imagen.
Hoja de sprites en la que se usan 8 sprites para crear una animación. Los sprites se pueden mostrar de forma individual, sin ser parte de ninguna animación.
Para añadir el componente Hoja de sprites a su proyecto, siga estos pasos:
- Abra el panel Componentes y, a continuación, la carpeta Gráficos y efectos.
- Arrastre el componente Hoja de sprites
a la escena.
- En la sección de propiedades del componente Hoja de sprites, que se encuentra en el panel Propiedades, introduzca la URL del archivo de imagen de la hoja de sprites en el campo Origen. Si el archivo de origen es local, haga clic en el botón Explorar
que hay en ese campo para seleccionar el archivo en el sistema de archivos de su ordenador.
- Introduzca los valores Distancia X, Distancia Y, Anchura del fotograma y Altura del fotograma del sprite específico que quiere mostrar. Si crea una animación, este sprite se mostrará en el primer fotograma de la animación.
- Dependiendo del uso que le quiera dar a la hoja de sprites, siga los pasos para mostrar otros sprites o para crear una animación de sprites.
Para mostrar otros sprites:
- Añada otro componente Hoja de sprites.
- Configúrelo usando la misma fuente, pero con las distancias y las dimensiones de los fotogramas del sprite que quiera mostrar en este componente.
Para crear una animación de sprites:
- En el panel Propiedades, muestre la sección Propiedades avanzadas del componente Hoja de sprites.
- Introduzca el número de fotogramas de la animación. El componente muestra un sprite por fotograma y asume que todos los sprites son del mismo tamaño.
- Marque la casilla Reproducción automática si quiere que la animación comience a reproducirse automáticamente. También puede activar la animación configurando un evento mediante la acción Hoja de sprites > Reproducir o Reproducir o pausar la animación (abajo descrita).
Propiedades
| Propiedad | Descripción |
|---|---|
| Nombre | Nombre del componente. |
| Origen | URL de la imagen que se usa como hoja de sprite. Puede estar vinculado con datos dinámicos. |
| X Offset (Distancia X) | Distancia desde el borde izquierdo de la hoja de sprites hasta el sprite (en píxeles). |
| Y Offset (Distancia Y) | Distancia desde el borde superior de la hoja de sprites hasta el sprite (en píxeles). |
| Anchura del fotograma | Anchura del sprite (en píxeles). |
| Altura del fotograma | Altura del sprite (en píxeles). |
| Alineación |
Posición del sprite dentro del componente:
|
| Escalado |
Cómo mostrar los sprites que tienen un tamaño diferente al del componente:
|
Propiedades avanzadas
Utilice las propiedades avanzadas para configurar animaciones de sprites. Para editar las siguientes propiedades, vaya al panel Propiedades y haga clic en el icono de ampliación , situado junto a Propiedades avanzadas:
| Propiedad | Descripción |
|---|---|
| Number of Frames (Número de fotogramas) | Número de fotogramas que tiene la animación. Si introduce un número superior al número de sprites que hay en la hoja, la animación incluirá fotogramas en blanco al final. |
| Duration (Duración) | Duración de cada fotograma en milisegundos. |
| Number of Loops (Número de bucles) | Número de veces que se repite la animación. Introduzca 0 si quiere que la animación se repita continuamente. |
| Reproducción automática | Si se marca, la animación se reproduce automáticamente. |
| End on frame one (Finalizar en el primer fotograma) | Si se marca, la animación finaliza en el primer fotograma tras el último bucle. |
| Reverse (Invertir) | Si se marca, la animación se reproduce hacia atrás. |
Eventos y acciones
Eventos que envía el componente Hoja de spritesPuede activar otras acciones basadas en los siguientes eventos del componente Hoja de sprites:
| Evento | Descripción |
|---|---|
| En pausa | Se envía cuando se pausa la animación. |
| Finalizada | Se envía cuando finaliza la animación. |
| Reproducción iniciada | Se envía cuando se empieza a reproducir la animación. |
| Repetida | Se envía cuando se reinicia la animación. |
Para seleccionar uno de estos eventos en el cuadro de diálogo Evento, defina el componente Hoja de sprites como objetivo.
Las siguientes acciones del componente Hoja de sprites pueden activarse como respuesta a otros eventos:
| Acción | Opciones de configuración |
|---|---|
| Crear animación |
|
| Reproducir | Inicia la animación desde la ubicación en la que se detuvo o se puso en pausa. |
| Pausar | Pone en pausa la animación que se está reproduciendo en ese momento. |
| Reproducir o pausar la animación | Reproduce y pone en pausa la animación según corresponda. |
| Repetir | Inicia la animación desde el primer fotograma. |
| Mover hacia atrás | Muestra el fotograma anterior de la serie. |
| Mover hacia adelante | Muestra el fotograma siguiente de la serie. |
| Ir al fotograma | Muestra el fotograma especificado. |
Cuando seleccione uno de estos eventos en el cuadro de diálogo Evento, defina el componente Hoja de sprites como receptor.
Consulte cómo configurar eventos.
Vista previa
Cuando haya especificado el origen, las distancias y las dimensiones de los fotogramas, Google Web Designer mostrará una vista previa estática del componente Hoja de sprites en la escena para que pueda comprobar que ha especificado el sprite correctamente.
Las animaciones de sprites no se pueden visualizar en la interfaz de Web Designer. Para reproducir animaciones de sprites, puede previsualizar el documento correspondiente en un navegador haciendo clic en el botón Vista previa, situado en la esquina superior derecha.