Derezzing effect for sprites?

Phaser 3
1

Is there an easy way to “derezz” a sprite for a retro style arcade game? Or should I just hand make those animations into my sprite sheet?

2

You could use a WebGL filter. PIXI has one, and they can be adapted to Phaser, but idk how exactly.

3

Phaser 3’s renderer uses outTexCoord instead of vTextureCoord and uMainSampler instead of uSampler. I’m not sure about filterArea, but it looks like it should be a vec4 with the frame’s size in the first two components (xy) and the frame’s position in the other two (zw). As for the size uniform, it’s controlled by the PixelateFilter class, which would have to be adapted to use the pipelines’ API in Phaser 3.

It’s a bit late right now, but I’ll try to port the shader tomorrow, as it doesn’t look too hard.

1 Like
4

Turns out that filterArea needed the whole texture’s size, not the frame’s size. I’ve also modified the main function so that it works with alpha and tint. If you want to use this, you only need pixelateShader and PixelatePipeline.

1 Like