Sprites

Um componente Sprite é uma imagem simples ou animação flipbook exibida na tela.

O componente Sprite pode usar um Atlas ou um Tile Source para seus gráficos.

Propriedades de Sprite

Além das propriedades Id, Position e Rotation, existem as seguintes propriedades específicas do componente:

Image

Se o shader tiver um único sampler, esse campo se chama Image. Caso contrário, cada slot recebe o nome do sampler de textura no material. Cada slot especifica o recurso de atlas ou tilesource a ser usado pelo sprite nesse sampler de textura.

Default Animation

A animação a ser usada pelo sprite. As informações de animação são obtidas do primeiro atlas ou tilesource.

Material

O material a ser usado para renderizar o sprite.

Blend Mode

O modo de mesclagem a ser usado ao renderizar o sprite.

Size Mode

Se definido como Automatic, o editor definirá um tamanho para o sprite. Se definido como Manual, você pode definir o tamanho por conta própria.

Slice 9

Defina para preservar o tamanho em pixels da textura do sprite ao redor das bordas quando o sprite for redimensionado.

Texturização Slice-9

Nós box de GUI e componentes Sprite às vezes têm elementos sensíveis ao contexto em relação ao tamanho: painéis e diálogos que precisam ser redimensionados para caber no conteúdo contido, ou uma barra de vida que precisa ser redimensionada para mostrar a vida restante de um inimigo. Isso pode causar problemas visuais quando você aplica texturização ao nó ou sprite redimensionado.

Normalmente, a engine escala a textura para caber nos limites retangulares, mas ao definir áreas de borda slice-9 é possível limitar quais partes da textura devem ser escaladas:

O nó box Slice9 consiste em 4 números que especificam o número de pixels para as margens esquerda, superior, direita e inferior que não devem ser escaladas normalmente:

As margens são definidas no sentido horário, começando pela borda esquerda:

• Segmentos de canto nunca são escalados.
• Segmentos de borda são escalados ao longo de um único eixo. Os segmentos das bordas esquerda e direita são escalados verticalmente. Os segmentos das bordas superior e inferior são escalados horizontalmente.
• A área central da textura é escalada horizontal e verticalmente conforme necessário.

A escala de textura Slice9 descrita acima é aplicada somente quando você altera o tamanho do nó box ou do sprite:

Mipmaps e slice-9

Devido à forma como o mipmapping funciona no renderizador, a escala de segmentos de textura às vezes pode exibir artefatos. Isso acontece quando você reduz a escala dos segmentos abaixo do tamanho original da textura. O renderizador então seleciona um mipmap de resolução menor para o segmento, resultando em artefatos visuais.

Para evitar esse problema, certifique-se de que os segmentos da textura que serão escalados sejam pequenos o suficiente para nunca serem reduzidos, apenas ampliados.

Modos de mesclagem

A propriedade Blend Mode define como os gráficos do componente devem ser mesclados com os gráficos atrás dele. Estes são os modos de mesclagem disponíveis e como eles são calculados:

Alpha :: Mesclagem normal: src.a * src.rgb + (1 - src.a) * dst.rgb

Add :: Clareia o fundo com os valores de cor dos pixels correspondentes do componente: src.rgb + dst.rgb

Multiply :: Escurece o fundo com os valores dos pixels correspondentes do componente: src.rgb * dst.rgb

Screen :: O oposto de Multiply. Clareia o fundo e os valores dos pixels correspondentes do componente: src.rgb - dst.rgb * dst.rgb

Manipulação em tempo de execução

Você pode manipular sprites em tempo de execução por meio de várias funções e propriedades diferentes (consulte a documentação da API para uso). Funções:

• sprite.play_flipbook() - Reproduz uma animação em um componente sprite.
• sprite.set_hflip() e sprite.set_vflip() - Define inversão horizontal e vertical na animação de um sprite.

Um sprite também tem várias propriedades diferentes que podem ser manipuladas usando go.get() e go.set():

cursor

O cursor normalizado da animação (number).

image

A imagem do sprite (hash). Você pode alterá-la usando uma propriedade de recurso de atlas ou tile source e go.set(). Consulte a referência da API para um exemplo.

material

O material do sprite (hash). Você pode alterá-lo usando uma propriedade de recurso de material e go.set(). Consulte a referência da API para um exemplo.

playback_rate

A taxa de reprodução da animação (number).

scale

A escala não uniforme do sprite (vector3).

size

O tamanho do sprite (vector3). Só pode ser alterado se o modo de tamanho do sprite estiver definido como manual.

Constantes de material

O material padrão sprite tem as seguintes constantes, que podem ser alteradas usando go.set() ou go.animate() (consulte o manual de Material para mais detalhes). Exemplos:

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

A cor de tingimento do sprite (vector4). O vector4 é usado para representar o tingimento com x, y, z e w correspondendo ao tingimento vermelho, verde, azul e alfa.

Atributos de material

Um sprite pode sobrescrever atributos de vértice do material atualmente atribuído, e eles serão passados para o vertex shader a partir do componente (consulte o manual de Material para mais detalhes).

Os atributos especificados no material aparecerão como propriedades regulares no inspetor e podem ser definidos em componentes sprite individuais. Se qualquer atributo for sobrescrito, ele aparecerá como uma propriedade sobrescrita e será armazenado no arquivo sprite em disco:

Configuração do projeto

O arquivo game.project tem algumas configurações do projeto relacionadas a sprites.

Sprites com múltiplas texturas

Quando um sprite usa várias texturas, há alguns pontos a observar.

Animações

Os dados de animação (fps, nomes dos frames) atualmente são obtidos da primeira textura. Vamos chamar isso de “animação condutora”.

Os ids de imagem da animação condutora são usados para procurar as imagens em outra textura. Por isso é importante garantir que os ids dos frames correspondam entre as texturas.

Por exemplo, se o seu diffuse.atlas tiver uma animação run assim:

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

Então os ids dos frames seriam run/hero_run_color_1, o que provavelmente não será encontrado, por exemplo, em um normal.atlas:

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

Então usamos os Rename patterns no atlas para renomeá-los. Defina _color= e _normal= nos atlas correspondentes, e você terá nomes de frame como estes em ambos os atlas:

run/hero_run_1
run/hero_run_2
...

UVs

As UVs são obtidas da primeira textura. Como há apenas um conjunto de vértices, não podemos garantir uma boa correspondência se as texturas secundárias tiverem mais coordenadas UV ou uma forma diferente.

Isso é importante, então certifique-se de que as imagens tenham formas suficientemente parecidas, ou você pode observar vazamento de textura.

As dimensões das imagens em cada textura podem ser diferentes.