SOLVED Dynamic pixelated "blur" effect without shaders

ikonhero

Member
Hi,

I had this idea of a logo startup screen where the logo fades out in a pixelated blur effect. I managed to achieve the following:

YouTube video

What I did is altering the application surface size dynamically. This results in the logo appearing smaller in size, while still appearing stretched to the full window.

The effect starts with a wobble where the application size is dynamically changed between random values. After an alarm runs out the surface's size starts to decrease over time. There's also a fade-in and fade-out to black implemented.
The logo itself is simply an asset layer in the first room with the code being run from an object in the instance layer on top.

The downside of this method is that the black bars at the sides of the logo appear to wobble massively. I would prefer to draw a frame on top of the effect, but I understand that it's impossible to draw on top of the application surface?


My question is if you guys know if there's a better way of doing this without resizing the application surface as I'm not sure that this method is a legit way of doing things :).
 
Last edited:

NightFrost

Member
Do you mean you want to do it without shaders, or that your current solution is done, as you explained, without shaders? Because I would go about doing that effect with shaders. It would seem it'd be pretty straightforward shader, sampling the source image at (x div N) * N and (y div N) * N position, where N is the pixel width you want for current step. (A more advanced version would be to average the color in the area.)
 

rytan451

Member
Create a surface, draw to it, then draw that surface (scaled) to the application surface. Resize as needed. Then, draw the things you need to draw on top of the effect onto the application surface.
 

ikonhero

Member
Do you mean you want to do it without shaders, or that your current solution is done, as you explained, without shaders? Because I would go about doing that effect with shaders. It would seem it'd be pretty straightforward shader, sampling the source image at (x div N) * N and (y div N) * N position, where N is the pixel width you want for current step. (A more advanced version would be to average the color in the area.)
Yes I was thinking to go without shaders as I have absolutely zero understanding of them.

Create a surface, draw to it, then draw that surface (scaled) to the application surface. Resize as needed. Then, draw the things you need to draw on top of the effect onto the application surface.
I tried this and I can't get it to work right. My code is probably wrong. Basically the screen turns black until the scales stick at 0.5 (just implemented that as a test). After that the logo is displayed properly (scaled to 1/2 and stretched to fit screen).
I also tried to make the scale move down in steps to see what was going on, and I noticed that between each step the screen turns black (fade effect was removed for now).

Here's my code:



GML:
///create event

sWidthInit = 800;
sHeightInit = 600;
xScale = 1;
yScale = 1;


///draw event

if (alarm[3] == -1) { //init logo display
    //recalculate scale
    if (xScale > 0.5) {   
        xScale -= 0.01;
        yScale -= 0.01;
    } else {
        xScale = 0.5;
        yScale = 0.5;
    }
    
    //create surface and draw sprite stretched to fit
    if (!surface_exists(surf)) {
        surf = surface_create(sWidthInit*xScale,sHeightInit*yScale);
    } else {
        surface_set_target(surf);
        draw_sprite_ext(sLogo,0,0,0,xScale,yScale,0,c_white,1);   
        surface_reset_target();
    }   
    
    //resize and draw surface.
    surface_resize(surf,sWidthInit*xScale,sHeightInit*yScale);
    draw_surface_stretched(surf,0,0,sWidthInit,sHeightInit);

}
Any ideas?

Thanks!
 

ikonhero

Member
You can simply download a shader from the marketplace, it is super simple to implement and you will have much better performance. Don't be afraid to learn new things....
That's actually a really good free asset pack. Tried it and it indeed wasn't to hard to implement. Had to change some stuff but that was in GML so no problems. Guess I'll look into it a bit more. Thanks for the advice.

Anyway, the resizing of the application surface brought me to the idea of implementing this, but this shader seems a more solid method of achieving the effect after all.
 
Top