Clarão de dano
Leve um sprite a uma cor chapada por alguns quadros quando ele leva dano, para o golpe ser lido num relance.
Cards
Um exemplo ao vivo para ajustar, aprender e copiar.
Como funciona
Quando um personagem leva um golpe, muitos jogos deixam o sprite branco (ou vermelho) por alguns quadros. Custa quase
nada e avisa o jogador na hora que o ataque acertou, mesmo numa tela cheia. A parte do shader é pequena: ler o sprite,
fazer um mixMistura de a até b por um fator t, em linha reta. O GLSL chama de mix; o HLSL e a maioria dos editores de nós chamam de lerp. Interpolação linear (mix) Mistura de a até b por um fator t, em linha reta. O GLSL chama de mix; o HLSL e a maioria dos editores de nós chamam de lerp.mix(a, b, t) = a (1 − t) + b t
O tempo fica no código do jogo, não no shader. A intensidade é um uniformUm valor que o código host define antes de uma chamada de desenho e que fica igual para todos os vértices e pixels dela, como o tempo, o tamanho do canvas ou uma cor. Uniform Um valor que o código host define antes de uma chamada de desenho e que fica igual para todos os vértices e pixels dela, como o tempo, o tamanho do canvas ou uma cor.
O sprite continua sendo desenhado com a mesclagemCombinar a cor que o shader de fragmento devolve com a cor que já está no framebuffer, em vez de substituí-la. Transparência, brilho aditivo e multiplicação vêm daí. Blending Combinar a cor que o shader de fragmento devolve com a cor que já está no framebuffer, em vez de substituí-la. Transparência, brilho aditivo e multiplicação vêm daí.result = src × srcFactor + dst × dstFactor
Leitura complementar
- Relative luminance (abre em uma nova aba)Referência
- Blend modes (abre em uma nova aba)Referência
- Alpha compositing (abre em uma nova aba)Referência
- mix (abre em uma nova aba)Referência
- clamp (abre em uma nova aba)Referência
- Linear interpolation (abre em uma nova aba)Referência
- texture (abre em uma nova aba)Referência
- texelFetch (abre em uma nova aba)Referência
- Using textures in WebGL (abre em uma nova aba)Documentação
- Uniforms (abre em uma nova aba)Livro
- Window: requestAnimationFrame() method (abre em uma nova aba)Documentação
- The OpenGL ES Shading Language, version 3.00 (abre em uma nova aba)Documentação
- Blending (abre em uma nova aba)Artigo
- WebGLRenderingContext: blendFunc() method (abre em uma nova aba)Documentação
- Spatial shaders (abre em uma nova aba)Documentação
- CanvasItem shaders (abre em uma nova aba)Documentação
- Resource (abre em uma nova aba)Documentação