No meu jogo de ritmo, tenho um objeto de nota que pode ser de uma cor diferente, dependendo do gráfico de notas. Eu poderia usar uma folha de sprite com todas as diferentes variações de cores que uso, mas preferiria parametrizar isso. (Cada sprite de nota é composto por diferentes tons de matiz. Por exemplo, uma nota vermelha possui apenas vermelho, vermelho claro e vermelho escuro.)
Como posso colorir um sprite de novo?
Estou trabalhando com o OpenGL, mas qualquer explicação de algoritmo ou matemática serve. :)
Eu provavelmente usaria uma imagem de cor única (por exemplo, seu sprite de anotações) com canal alfa e depois coloriria a imagem inteira com sua cor de base. Então, algo como na imagem a seguir ( do wikimedia commons ):
Se sua cor fosse vermelha, você coloriria a nota (todas as partes pretas) com o mesmo vermelho. Além disso, você precisará de uma imagem em escala de cinza com o sombreamento da nota. Em seguida, combine o sombreamento com a cor plana usando modos de mesclagem como Multiply e / ou Screen .
Outra abordagem, provavelmente mais simples, seria apenas ter uma imagem em escala de cinza na qual você multiplicaria cada componente de cor pela cor selecionada. Portanto, se você tiver um valor cinza 0.5e vermelho RGB(1.0, 0.0, 0.0), isso resultaria emRGB(0.5, 0.0, 0.0) pixel fornecido.
Atualização: Aqui está um exemplo de imagem para ilustrar o que quero dizer com os modos de mesclagem:
É claro que você pode usar a camada de sombra se não precisar dos destaques (que é basicamente o mesmo que a abordagem mais simples mencionada acima).
Isso é tão fora de tópico, mas eu tenho que perguntar - como você criou essa segunda imagem?
dman
@DMan Photoshop para as diferentes imagens de anotações e, em seguida, o Illustrator para organizar as coisas;)
bummzack
Obrigado pela sua explicação. :) É possível fazer a mistura em um shader de fragmento? Ou é preferível ficar com a função de mistura opengl e renderizar as 3 imagens separadamente?
Mr_Qqn
Eu não sou um especialista em shader, mas pelo meu conhecimento limitado, eu diria que não deve ser um problema. Alternativamente, você pode apenas pré-calcular as imagens necessárias na CPU?
21811 bhmzack
Sim, no momento vou gerar uma planilha de sprite com todas as variações.
Mr_Qqn 12/02
3
Faça uma versão em escala de cinza (ou apenas em branco) da imagem que deseja mostrar, com um canal alfa adequado. Use a cor do vértice para "tingir" a imagem.
A cor do vértice multiplica cada canal; portanto, branco x vermelho = vermelho, 50% cinza x vermelho = 50% vermelho e assim por diante.
O problema é que o sombreamento não será reconhecível ao usar cores brilhantes (por exemplo, amarelo).
21411 bhmzack
Não tenho certeza do que você quer dizer. Preto ou cinza muito escuro na imagem em escala de cinza multiplicada por amarelo muito brilhante ainda é preto ou amarelo muito escuro.
11111 Gebambett
BTW, desculpe, eu não tinha visto a "abordagem provavelmente mais simples" na sua resposta.
11689 Gebambett
11
Você está certo sobre a multiplicação. Eu estava misturando as coisas. Falta café, eu acho.
bummzack
Obrigado pela sua resposta, mas como estou aprendendo o opengl 3, prefiro usar o outro método. :)
Faça uma versão em escala de cinza (ou apenas em branco) da imagem que deseja mostrar, com um canal alfa adequado. Use a cor do vértice para "tingir" a imagem.
A cor do vértice multiplica cada canal; portanto, branco x vermelho = vermelho, 50% cinza x vermelho = 50% vermelho e assim por diante.
fonte