Getting Started

Project Setup

Editor

Core Concepts

Assets and Resources

Animations

Components

GUI

Physics

Sound

Input

Game logic

Files

Working with files

Network Connections

Rendering

Workflow

Debugging

Optimization

Monetization

Android

iOS

Consoles

HTML5

Desktop

Engine extensions

← Back to Manuals

This translation is community contributed and may not be up to date. We only maintain the English version of the documentation. Read this manual in English

Sprites

Un componente Sprite es una imagen simple o una animación flipbook que se muestra en pantalla.

El componente Sprite puede usar un Atlas o un Tile Source para sus gráficos.

Propiedades del sprite

Además de las propiedades Id, Position y Rotation, existen las siguientes propiedades específicas del componente:

Image: Si el shader tiene un solo sampler, este campo se llama Image. De lo contrario, cada slot toma el nombre del sampler de textura en el material. Cada slot especifica el recurso de Atlas o Tile Source que se usará para el sprite en ese sampler de textura.
Default Animation: La animación que se usará para el sprite. La información de la animación se toma del primer Atlas o Tile Source.
Material: El material que se usará para renderizar el sprite.
Blend Mode: El modo de mezcla que se usará al renderizar el sprite.
Size Mode: Si se establece en Automatic, el editor definirá un tamaño para el sprite. Si se establece en Manual, puedes definir el tamaño tú mismo.
Slice 9: Configura esta opción para preservar el tamaño en píxeles de la textura del sprite alrededor de los bordes cuando se redimensiona el sprite.

Texturizado slice-9

Los nodos caja GUI (box-nodes) y los componentes Sprite a veces incluyen elementos cuyo tamaño depende del contexto: paneles y diálogos que deben redimensionarse para ajustarse al contenido, o una barra de salud que debe redimensionarse para mostrar la salud restante de un enemigo. Esto puede causar problemas visuales cuando aplicas texturizado al nodo o sprite redimensionado.

Normalmente, el motor escala la textura para ajustarla a los límites rectangulares, pero al definir áreas de borde slice-9 es posible limitar qué partes de la textura deben escalarse:

Escalado GUI

La propiedad Slice9 del nodo caja consta de 4 números que especifican la cantidad de píxeles de los márgenes izquierdo, superior, derecho e inferior que no deben escalarse de la forma normal:

Propiedades Slice 9

Los márgenes se establecen en sentido horario, comenzando por el borde izquierdo:

Secciones Slice 9

Los segmentos de las esquinas nunca se escalan.
Los segmentos de los bordes se escalan a lo largo de un solo eje. Los segmentos de los bordes izquierdo y derecho se escalan verticalmente. Los segmentos de los bordes superior e inferior se escalan horizontalmente.
El área central de la textura se escala horizontal y verticalmente según sea necesario.

El escalado de textura Slice9 descrito arriba solo se aplica cuando cambias el tamaño del nodo caja o del sprite:

Tamaño de nodo caja GUI

Tamaño de Sprite

Si cambias el parámetro de escala del nodo caja o sprite (o del objeto de juego), el nodo o sprite y la textura se escalan sin aplicar los parámetros Slice9.

Al usar texturizado slice-9 en Sprites, el Sprite Trim Mode de la imagen debe estar configurado en Off.

Mipmaps y slice-9

Debido a la forma en que funciona mipmapping en el renderizador, el escalado de segmentos de textura a veces puede mostrar artefactos. Esto ocurre cuando se reduce la escala de segmentos por debajo del tamaño original de la textura. Entonces el renderizador selecciona un mipmap de menor resolución para el segmento, lo que produce artefactos visuales.

Mipmapping Slice 9

Para evitar este problema, asegúrate de que los segmentos de la textura que se escalarán sean lo suficientemente pequeños como para que nunca se escalen hacia abajo, solo hacia arriba.

Modos de mezcla

La propiedad Blend Mode define cómo deben mezclarse los gráficos del componente con los gráficos que hay detrás. Estos son los modos de mezcla disponibles y cómo se calculan:

Alpha: Mezcla normal: src.a * src.rgb + (1 - src.a) * dst.rgb
Add: Aclara el fondo con los valores de color de los píxeles correspondientes del componente: src.rgb + dst.rgb
Multiply: Oscurece el fondo con los valores de los píxeles correspondientes del componente: src.rgb * dst.rgb
Screen: Lo opuesto a Multiply. Aclara el fondo y los valores de los píxeles correspondientes del componente: src.rgb - dst.rgb * dst.rgb

Manipulación en runtime

Puedes manipular sprites en runtime mediante distintas funciones y propiedades (consulta la documentación de la API para su uso). Funciones:

sprite.play_flipbook() - Reproduce una animación en un componente Sprite.
sprite.set_hflip() y sprite.set_vflip() - Define el volteo horizontal y vertical en la animación de un sprite.

Un sprite también tiene varias propiedades que se pueden manipular con go.get() y go.set():

cursor: El cursor normalizado de la animación (number).
image: La imagen del sprite (hash). Puedes cambiarla con una propiedad de recurso de Atlas o Tile Source y go.set(). Consulta la referencia de la API para ver un ejemplo.
material: El material del sprite (hash). Puedes cambiarlo con una propiedad de recurso de material y go.set(). Consulta la referencia de la API para ver un ejemplo.
playback_rate: La velocidad de reproducción de la animación (number).
scale: La escala no uniforme del sprite (vector3).
size: El tamaño del sprite (vector3). Solo se puede cambiar si la propiedad Size Mode del sprite está establecida en Manual.

Constantes de material

El material predeterminado de sprite tiene las siguientes constantes que se pueden cambiar con go.set() o go.animate() (consulta el manual de Material para más detalles). Ejemplos:

go.set("#sprite", "tint", vmath.vector4(1,0,0,1))
go.animate("#sprite", "tint", go.PLAYBACK_LOOP_PINGPONG, vmath.vector4(1,0,0,1), go.EASING_LINEAR, 2)

tint: El tinte de color del sprite (vector4). El vector4 se usa para representar el tinte con x, y, z y w correspondientes al tinte rojo, verde, azul y alfa.

Atributos de material

Un sprite puede sobrescribir atributos de vértice del material asignado actualmente; estos se pasarán al vertex shader desde el componente (consulta el manual de Material para más detalles).

Los atributos especificados en el material aparecerán como propiedades normales en el inspector y se pueden definir en componentes Sprite individuales. Si alguno de los atributos se sobrescribe, aparecerá como una propiedad sobrescrita y se almacenará en el archivo de sprite en disco:

Configuración del proyecto

El archivo game.project tiene algunas opciones de configuración del proyecto relacionadas con los sprites.

Sprites con múltiples texturas

Cuando un sprite usa múltiples texturas, hay algunas cosas que conviene tener en cuenta.

Animaciones

Los datos de animación (fps, nombres de frames) se toman actualmente de la primera textura. A esta la llamaremos la “animación guía”.

Los ids de imagen de la animación guía se usan para buscar las imágenes en otra textura. Por eso es importante asegurarte de que los ids de frame coincidan entre texturas.

Por ejemplo, si tu diffuse.atlas tiene una animación run así:

run:
    /main/images/hero_run_color_1.png
    /main/images/hero_run_color_2.png
    ...

Entonces los ids de frame serían run/hero_run_color_1, lo que probablemente no se encontraría, por ejemplo, en un normal.atlas:

run:
    /main/images/hero_run_normal_1.png
    /main/images/hero_run_normal_2.png
    ...

Por eso usamos Rename patterns en el atlas para renombrarlos. Define _color= y _normal= en los atlas correspondientes, y obtendrás nombres de frame como estos en ambos atlas:

run/hero_run_1
run/hero_run_2
...

UVs

Las UV se toman de la primera textura. Como solo hay un conjunto de vértices, no podemos garantizar una buena coincidencia si las texturas secundarias tienen más coordenadas UV o una forma diferente.

Es importante tener esto en cuenta, así que asegúrate de que las imágenes tengan formas suficientemente similares; de lo contrario, podrías experimentar sangrado de textura.

Las dimensiones de las imágenes en cada textura pueden ser diferentes.