Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
Pixelation Shader? — Gideros Forum

Pixelation Shader?

Hi, in one of my games I would like to be able to toggle "old school" mode which would simulate large pixels. So I would like to, essentially, pixelate the entire screen/stage with pixels of specific size.

I thought a shader might be a good way to go about this so I tried messing with the blur samples, but alas, shaders are still a bit over my head.

Simple example of what I mean:

https://www.photofunny.net/efectos/grandes/pixelate_images.jpg

Any ideas on how to best accomplish this?

Thanks,
Eric

Comments

  • hgy29hgy29 Maintainer
    Hi @EricCarr,
    Similarly to the blur effect you would need to render your scene to a rendertarget, then render this rendertarget to screen with a shader.

    The shader would align texture coordinates to a grid and sample the texture at that point.

    Likes: EricCarr

    +1 -1 (+1 / -0 )Share on Facebook
  • keszeghkeszegh Member
    edited December 2017 Accepted Answer
    in the blur example change fShader.glsl to the following:
    uniform lowp vec4 fColor;
    uniform lowp sampler2D fTexture;
    uniform int fRad;
    uniform mediump vec4 fTexelSizeH;
    uniform mediump vec4 fTexelSizeW;
    varying mediump vec2 fTexCoord;
     
    void main() {
     lowp vec4 frag=vec4(0,0,0,0);
     mediump vec2 tc=fTexCoord-mod(fTexCoord,(fRad+1)/100.0);
     frag=texture2D(fTexture, tc);
     if (frag.a==0.0) discard;
     gl_FragColor = frag;
    }

    Likes: hgy29, EricCarr

    +1 -1 (+2 / -0 )Share on Facebook

  • this may give you an idea about how to do it. the only important line is
    mediump vec2 tc=fTexCoord-mod(fTexCoord,(fRad+1)/100.0);
    which rounds the coordinate depending on fRad and then
    frag=texture2D(fTexture, tc);
    returns the color at that rounded value.
  • Or just draw your entire scene to a render target that has smoothing turned off. Then have that be the only thing drawn to the stage - and scale it up. No need for a shader.

    A shader could be used to make it look like an old crt screen when scaled up maybe.
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
    +1 -1 (+5 / -0 )Share on Facebook
  • An advantage of doing it this way is that you will have less draw 'writes' - so you could actually get a lot more happening in the game, faster...
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • Thank you everyone for the tips! I now have some experimenting to do. :-)
Sign In or Register to comment.