extension to canvas replacement bitsy hack which adds an `isTextBox` helper for keeping text legible with shader effects

canvas replacement textbox mask.js

import bitsy from 'bitsy';
import { inject } from '@bitsy/hecks/src/helpers/kitsy-script-toolkit';
import {
  hackOptions as canvasReplacement
} from '@bitsy/hecks/src/canvas replacement';

canvasReplacement.glazyOptions.fragment = `
precision mediump float;
uniform sampler2D tex0;
uniform sampler2D tex1;
uniform float time;
uniform vec2 resolution;
uniform vec4 textboxInfo;

float inside(float v, float start, float end) {
  return step(start,v) * step(v,end);
}

float isTextBox(vec2 uv) {
  return 1.0
    * inside(uv.x, textboxInfo.x, textboxInfo.x + textboxInfo.z)
    * inside(uv.y, textboxInfo.y, textboxInfo.y + textboxInfo.w);
}

void main(){
	vec2 coord = gl_FragCoord.xy;
	vec2 uv = coord.xy / resolution.xy;
  vec3 col = texture2D(tex0,uv).rgb;
  vec3 org = col;

  // real shader stuff goes here
  col.rg = uv.xy;

  col = mix(col, org, isTextBox(uv));
	gl_FragColor = vec4(col, 1.0);
}
`;
canvasReplacement.init = function (glazy) {
  glazy.glLocations.textboxInfo = glazy.gl.getUniformLocation(glazy.shader.program, 'textboxInfo');
};

canvasReplacement.update = function (glazy) {
  // update textbox info
  if (!dialogBuffer.IsActive()) {
    glazy.gl.uniform4f(glazy.glLocations.textboxInfo, 0, 0, 0, 0);
    return;
  }
  var textboxInfo = bitsy.dialogRenderer.textboxInfo;
  var y;
  if (bitsy.dialogRenderer.getCentered()) {
    y = bitsy.height/2 - textboxInfo.height/2;
  } else if(player.y < bitsy.mapsize/2) {
    y = textboxInfo.bottom;
  } else {
    y = bitsy.height - textboxInfo.top - textboxInfo.height;
  }
  glazy.gl.uniform4f(
    glazy.glLocations.textboxInfo,
    textboxInfo.left / 128,
    y / 128,
    textboxInfo.width / 128,
    textboxInfo.height / 128,
  );
};

// expose textboxInfo
inject(/(this\.SetCentered = function\(centered\) {)/, 'this.getCentered = function(){ return isCentered; };$1');
inject(/(var textboxInfo = ){/, '$1 this.textboxInfo = {');