Shaku Gfx Demo: Custom Effects

This demo demonstrate how to create and use a custom effect with multiple textures.
Custom effect = shaders + setup code to use it. In this case we created a custom effect that animate opacity based on another texture.

The following is a minimal code example to show how to create and use a custom effects with multiple textures.

// define our custom effect
class CustomEffect extends Shaku.gfx.SpritesEffect
{
  /**
    * Override the fragment shader for our custom effect.
    */
  get fragmentCode()
  {
    const fragmentShader = `  
      #ifdef GL_ES
          precision highp float;
      #endif

      uniform sampler2D mainTexture;
      uniform sampler2D overlayTexture;
      uniform float elapsedTime;

      varying vec2 v_texCoord;
      varying vec4 v_color;

      void main(void) {
          gl_FragColor = texture2D(mainTexture, v_texCoord) * v_color;
          vec4 overlay = texture2D(overlayTexture, v_texCoord + vec2(0.0, elapsedTime));
          gl_FragColor.g *= overlay.r * 2.0;
          gl_FragColor.rgb *= gl_FragColor.a;
      }
      `; 
      return fragmentShader;
  }

// create custom effect instance
let effect = new CustomEffect();

// load texture to render with effect
let spriteTexture = await Shaku.assets.loadTexture('assets/sprite.png');
let spriteOverlay = await Shaku.assets.loadTexture('assets/overlay.png');
spriteOverlay.wrapMode = Shaku.gfx.TextureWrapModes.Repeat;

// create sprites batch
let spritesBatch = new Shaku.gfx.SpriteBatch();

// part below goes between startFrame() and endFrame()
// -------------------------------------------------------

// update custom effect 'elapsedTime' uniform and secondary texture
effect.uniforms.elapsedTime(Shaku.gameTime.elapsed);
effect.uniforms.overlayTexture(spriteOverlay, 1);

// draw texture with the effect
spritesBatch.begin(undefined, effect);
spritesBatch.drawQuad(spriteTexture, new Shaku.utils.Vector2(350, 350), 400);
spritesBatch.end();