Alterar a matrix de cores, brilo e saturação de cores de imagens inseridas no canvas com JS


(Sergio José Gomes) #1

Olá.

Pesquisei em vários sites e não encontrei um que esplicasse, ou se quer citasse, os métodos em Javascript que alterem as cores, ou as propriedades das cores, de uma imagem inserida no canvas através do drawImage.

O efeito que quero criar é como o mostrado na imagem abaixo, na qual a primeira é a imagem original e as outras foram obtidas alterando a matriz, saturação e brilho da imagem original, feitos em um programa para gerar possibilidades que eu poderia usar:

guycores

Meu objetivo é conseguir alterar as imagens dos personagens de um jogo que estou criando em JS puro quando eles se chocarem com alguma magia específica. Eu poderia usar as imagens já modificadas, mas acho que criar uma função que altere as propriedades seria mais eficiente já que eu também poderia reutilizá-la em outros personagens sem precisar carregar uma porrada imagens para cada personagem que fosse afetado pela magia específica.


(Luã Ciceri Schwertner) #2

Olá @Sergiodesjg a imagem não ta rolando cara. E também ficou um pouco confuso, posta o código do teu canvas para gente poder te ajudar.


(Sergio José Gomes) #3

Ok.

Em resumo, meu objetivo era conseguir alterar a matiz, brilho e saturação da imagem do personagem de um jogo através de uma função ou método Javascript que serviria para dar um efeito de envenenado, chocado ou congelado no personagem do jogo.

Detalhe: o jogo deve rodar no canvas, por isso, citei que a imagem seria inserida pelo método “contexto.drawImage()” e não como uma tag img.

Como não estou conseguindo anexar a imagem através do editor de posts segue abaixo um link para a imagem de exemplo:

https://drive.google.com/file/d/16977sov0A0WinTMznOZlcULnj93u9bh_/view?usp=sharing

Depois que postei aqui a minha dúvida continuei pesquisando e descobri que é possível fazer o que quero usando frameworks ou bibliotecas, dando a entender, para mim, que fazer essas alterações em imagens usando JS é mais trabalhoso ou complicado do que pensei. Embora os frameworks como o camanjs sejam razoáveis de se usar em complexidade, meu objetivo era usar funções do próprio Javascript já que eu achava que era algo mais simples.

Baseado em um pouco mais de pesquisa sobre alguns jogos, começo a pensar que será mais viável criar as imagens modificadas do que usar os frameworks.