Como altero a cor de um sprite?

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. :)

opengl sprites color

— Mr_Qqn
fonte

Respostas:

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 ):

imagem de uma nota musical

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:

camadas de mistura

É 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).

— bummzack
fonte

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

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.

— ggambett
fonte

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

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. :)

— Mr_Qqn