Envie Artigos e Concorra a Prêmios
 
Artigos
Article List
Criando Efeitos atraves de SpriteBatch com XNA

Uma abordagem sobre enumenração SpriteBlendMode

Enviado por Luciano José em 21/4/2008 0:00:00

Introdução
 
Será assumido que você tenha algum conhecimento sobre SpriteBatch.
Mais informações neste artigo: Um Panorama sobre o objeto SpriteBatch do XNA
Este artigo vai tratar especificamente da enumeração: SpriteBlendMode.
 
A enumeração SpriteBlendMode provê 3 valores:
 
  • SpriteBlendMode.None
  • SpriteBlendMode.AlphaBlend
  • SpriteBlendMode.Additive
 
 
Modos de mistura de Sprites
 
SpriteBlendMode.None
 
Indica que nenhum modo de “blending” será utilizado.
 
Nesse modo, por exemplo, não é possível modificar a opacidade da textura.
 

Demonstração:

 

Suponha que você tenha feito sua arte em uma ferramenta de edição de imagem que permita alterar a opacidade da imagem. E, ao finalizar a sua arte, você coloque a opção de “opacity” menor que 100% com o objetivo de obter uma imagem “transparente” em seu jogo. Nesse caso, para este modo de “blending”(SpriteBlendMode.None), você não obterá o resultado desejado - que é uma imagem transparente em seu jogo. O resultado obtido será uma imagem totalmente opaca.

Foto1
 
A imagem acima contém apenas 10% de opacidade.

 

Foto2 - Por exemplo: Na ferramente MS Expression Design você pode “regular” a opacidade, alterando os valores nas barras ao lado do nome “Opacity”.
 
Se você tentar renderizar a imagem(Foto1) utilizando SpriteBlendMode.None. Você, certamente, obterá algum resultado visual com uma imagem totalmente opaca - como mostrado abaixo:

 

Foto3 - Imagem com sua propriedade de opacidadade em 10%. Essa Imagem foi renderizada no modo SpriteBlendMode.None. Essa imagem está ocopuando toda a janela(800x600).

 

Foto4 – Imagem com 20% de opacidade
 
 
 
Foto5 – Imagem com 20% de opacidade sendo renderizada no modo
SpriteBlendMode.None.
 
Observe que tanto nas fotos 3 e 5, o texel´s com o seus valores RGBA – (0, 0, 0, 0) estão vísiveis neste modo(SpriteBlendMode.None).
 
 
 
 
SpriteBlendMode.AlphaBlend
 
Quando esse é escolhido, é abilitado o efeito de Alpha Blending. No XNA, por padrão, este modo é utilizado para qualquer imagem renderizada com o spriteBatch.
 
Isso ocorre para o bloco de código a seguir:
 
this.spriteBatch.Begin();
...
this.spriteBatch.End();
 
O bloco acima, tem “o mesmo efeito” que o bloco de código abaixo:
 
this.spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
...
this.spriteBatch.End();
 
Esse padrão do XNA, mencionado anteriormente, pode ser quebrado quando o SpriteBlendMode é explicitamente indicado com outro valor diferente de SpriteBlendMode.AlphaBlend - isso só pode ser verdade a partir da 2º sobrecarga do método SpriteBatch.Begin.
 
Abaixo uma lista das sobrecargas do método SpriteBatch.Begin:
SpriteBatch.Begin ()
SpriteBatch.Begin (SpriteBlendMode)
SpriteBatch.Begin (SpriteBlendMode, SpriteSortMode, SaveStateMode)
SpriteBatch.Begin (SpriteBlendMode, SpriteSortMode, SaveStateMode, Matrix)
Observe que a partir da 2º sobrecarga do método em questão, é que pode-se modificar o SpriteBlendMode.
 
Quando este modo(SpriteBlendMode.AlphaBlend) é escolhido, a textura tem a capacidade de
 
Ter o seu valor do alpha modificado; a textura pode “ficar transparente” – a opacidade da textura pode ser alterada.
 

Diferentemente do ocorrido com o modo SpriteBlendMode.None, se você tentar renderizar a imagem da Foto1 neste modo - o resultado visual obtido será uma imagem transparente, como mostrado na foto abaixo:

 
Foto6 - Imagem com 10% de opacidade. Renderizada no modo SpriteBlendMode.AlphaBlend.
 

Tome Cuidado!

 
Imagine que esteja desenhando sua arte em alguma das ferramentas de edição de imagem apresentadas a seguir, e você queira o seu arquivo de textura com o fundo com transparência abilitada - ao final, você deve tomar alguns cuidados, se você estiver utilizando a ferramenta:
 
-Gimp
 
Na barra de opções, vá em Layer-> Transparency-> Add Alpha Channel.
 
Agora, vá para a janela de Ferramentas do Gimp, e escolha a ferramenta “Fuzzy Select Tool”. Clique com essa ferramenta no funda da sua artBoard e aperte a tecla do teclado Delete.
 
-Adobe Photoshop
 
Assegure-se que a sua layer que vem criada pelo Photoshop, denominada BackGround, está desbloqueada. Ao estar desbloqueada,
escolha a ferramenta Magic Wand(W) e clique no fundo de sua artBoard e aperte a tecla Delete.
 
-Paint.Net
 
Escolha a ferramenta Magic Wand, clique no fundo da ArtBoard e aperte delete.
 
-Microsoft Expression Design 2 beta e Adobe Illustrator
 
Quando você for exportar sua arte, por padrão, a opção de transparência já vem marcada e você não precisa se preocupar!
 
 
SpriteBlendMode.Additive
 
Esse modo é usado para “reluzir” objetos; tal efeito pode ser usado em explosões, efeitos mágicos, etc.
 
 
Demonstração
 

Para demonstrar este modo, será utilizado a imagem abaixo:

 
 
Foto7
 
Quando, no jogo, essa imagem for renderizada utilizando o modo  SpriteBlendMode.Additive, ela tomará um aspecto “transparente” e com algumas caracteristicas:
 
Quando essa imagem transpõe(passa por cima) de outra textura, ela vai “reluzir” a outra textura de acordo com as cores envolvidas na transposição.
 
Você observará, na demonstração disponivel mais adiante, que nas regiões mais escuras em que houve a transposição, a região da textura transposta tende a ficar mais próxima ao aspecto normal. O efeito contrário acontece quando a região da textura está sendo transposta por alguma coloração que tende ao Branco.
 

A foto abaixo, mostra o que acontece com a textura transposta quando uma textura com o modo SpriteBlendMode.Additive transpõe essa textura:

 
 
Foto8- na região entre o branco e o preto, está a escala cinza, mas para obter algum efeito reluzente, a cor deve estar entre o branco(RGB – 255, 255, 255) e o preto(RGB – 255, 255, 255). Alguns exemplos: o vermelho(RGB – 255, 0, 0), o verde(RGB – 0, 255, 0) são cores que estão entre o branco e o preto.
 
 

Adimitamos a textura abaixo:

Foto9 – um retangulo totalmente preto
 

Se a Foto9 for renderizada com o modo SpriteBlendMode.Additive, e, posteriormente, essa textura(Foto9) “passe por cima” da maça. O resultado obtido será a propria maça:

Foto10
 
 
Em contra partida, se a textura(Foto9) utilizada para obter o efeito acima, for um retângulo totalmente branco, o resultado obtido será o próprio retangulo branco 100% opaco.
 
Fica, então, sendo possivel obter algum resultado reluzente com qualquer cor sendo diferente e estando entre o preto(RGB – 0, 0, 0) e o branco(RGB – 255, 255, 255) - como mostrado na Foto8.
 
Nesta demonstração, o efeito luminoso obtido se resumi a este bloco de código localizado no método Draw:
 
this.spriteBatch.Begin(SpriteBlendMode.Additive);           
            this.spriteBatch.Draw(this.luz, posicaoDaLuz, Color.Yellow);
            this.spriteBatch.End();
 
Observe o 3º parametro do método spriteBatch.Draw, aonde foi indicado a cor amarela. Nas fotos da demonstração mostradas mais adiante, você reparará um efeito luminoso que sai da lanterna será amarelo; tal efeito foi acançado através da imagem da Foto7.
 
Quando você for criar seus efeitos, quando possível, tenha em mente a criação deles com as tonalidades da textura estando em Branco e Preto.
 
 
Abaixo, é exposto a a fórmula que causa indepêndencia entre o programador e o designer:
 
Cor Branca(RGB – 255, 255, 255) + Cor X(RGB – Y, W, Z) = Cor X(RGB – Y, W, Z)
 
No método Draw do spriteBatch, foi indicado que a cor de tingimento é Color.Yellow, dai quando a Foto5 for renderizada na tela, temos um resultado visual obtido a partir da fórmula:
 
Branco + Amarelo = Amarelo
 
Você observará nas fotos a seguir, que nas regiões brancas foram tingidas com amarelo e o resultado obtido é amarelo. Nas regiões aonde da textura há o preto, nada acontece.
 
Quando você for construir seu jogo com sua equipe e dependendo do efeito que você vai querer obter no jogo - se você quer promover uma indepêndencia entre o designer e o programador, evitando texturas para c