I'm recreating the classic SPACE INVADERS game, and currently I'm working on writing a shader that will mimic the look of the screen overlay on the retro consoles. (They would put a massive sticker over the entire monitor to simulate color. Similar to what can be seen in this video)
I'm working on getting a very crude version of the shader working at the moment, and this is what I have so far when I noticed a very breaking issue:
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(){
if(texture2D(uSampler, vTextureCoord).r > 0.0)
if(vTextureCoord.y < 0.1)
gl_FragColor = vec4(1.0,0,0,1.0);
else
gl_FragColor = vec4(1.0,1.0,1.0,1.0);
else
gl_FragColor = texture2D(uSampler, vTextureCoord);
}
Notice that I'm determining the color of the pixels according to their position relative to their parent container, saying all pixels in the top 10% of the container should be red, and the rest should keep their original color. However, as the aliens move down the screen the container constantly re-positions and re-sizes to perfectly contain every alien, and this causes the top row of aliens to always be red because the top 10% of the container moves downwards with them. This can be seen especially clearly if I tell the shader to always output a single color (for example, white). The container becomes a massive white block moving back and forth and downward across the screen.
And, a related issue is that since I'm using nearest-neighbor scaling, the constant resizing of the parent container also causes the pixels to shift around constantly which looks horrible. If I don't apply any shaders at all this issue is not seen, but if I apply any shader, even one that always returns the input color, then suddenly the pixels start to shift around constantly.
How should I go about fixing this? My initial thought was to lock the parent container in place and allow the children to move around inside it without it moving with them, but after reading this thread it seems that the maintainers of PIXI are well aware that locking the position and bounds of a container is a big no-no and never going to be possible without manual overrides (which I'd be willing to do, but worried it would break a ton of other things)
Is there another way to fix this issue? How can I apply this shader (to every element in the game) while guaranteeing that its origin point will never move? Or should I be going about this from a totally different direction?