Design Pixel Vignette Shader?

Okay so I have been following this game for a while now "Into the Dim". Really neat design so kudos first of all to its developer. But what I want to figure out is how could I achieve something like this in GMS2? What I want to do is have a vignette sort of follow the player or camera and slowly make it appears as to dissolve the graphics as in the gif below. As close as I could get. Ideas?


I have one idea of how I could maybe achieve this. It would involve several layers of shaders than when they passover the background they would only show or mask a different version of the sprite below it. IDK, that seems more complicated.
 

Rukiri

Member
That looks pretty cool, but it seems you just want a color overlay maybe with some dithering?
Why not take a look at the gameboy shader?
 

Rukiri

Member
Don't let appearencesfool you, the game could have simply been made with those colors in mind to negate writing a shader which honestly would save time and the effect would essentially be the same.
Some things like complex lighting gets tricky because there's not many colors to use and your brightest is almost present.
 

muki

Member
I do this with a shader. It's fairly straightforward once you break it down into passes. To make it simpler, I also treat the entire view as a whole, I don't break it up into background/foreground, etc. And it's definitely an effect you *can't* do with just making the tiles use that palette.




I first got the idea when I looked at this tutorial for ordered dithering in photoshop:
http://danfessler.com/blog/hd-index-painting-in-photoshop

This article also helped a lot with the theory, and applying the concept to a shader:
http://kpulv.com/368/Index_Palette_Shader/

You have that exact effect. The complex lightring/translucency/gradient effects but then with a palette clamped to a few colors after the effect pass. This is very different from simply making your sprite/tile palette low to begin with, and then apply palette shifting or overlay glows with transparency. I repeated the example in photoshop and looked at the layers as render passes in gamemaker. Of course I needed a render control object. The render passes are roughly like this. (from memory since I don't have the project anymore, sorry)

1. After rendering my view to a surface, I apply this sprite to it with multiply/subtractive blending using GM's own routines. It has two purposes. To add the vignetting on the edges and corners, but also the subtle ordered dither pattern (if you look closely enough).



2. Then I take that result and, for lack of a better expression, "convert" pixel values to texture coordinates on the image below. This part is in the shader (I found this shader on these forums years ago, I cant remember what it's called unfortunately). Basically it goes through your surface, pixel by pixel. Where the brightness of the pixel gets turned into the y-coordinate of this image. The lower color index this image had (less colors bars, and wider), the lower-bit-depth the end result looked.



3. Overlay the shader's result with the original view so I got some average between the two. I had additive glow objects around the room for the glow effect. I could have just as easily had a glow or shadow follow the character around for something closer to your gif.



Although the art direction is pretty different from yours, the effect is the same. It's only different in the style of the pixel art, and the palette color amount. Render to shader, apply vignette/dither, index colors to image coordinate on a limited palette image.

Unfortunately because I did this so long ago, I dont have the project files anymore, just these gifs. You might have luck in tracking down the shader I used by looking for 'palette shader', gradient map', 'indexing', etc, and varants, on the forums.
 
Last edited:

NightFrost

Member
Studying a still image, it seems to me the shader is taking advantage of limited color palette and simply bumps every color up by one or more steps (that is, adds some constant to every color) and clamps to maximum color. There's three distance thresholds as you can see. The first bumps colors up by one step, the second by two, and the last by three which makes every color the brightest. The shader would calculate distance from screen center and based on that add to the pixel's color a constant multiplied by one, two, or three, but not letting the color go past the brightest color's values.

EDIT - and there's no dithering involved in the shader, all the dither you can see is already in the tiles resources.

EDIT2 - you don't need conditionals in the shader for this. Send it the minimum and maximum distance, calculate pixel distance, smoothstep that distance between min and max to get a value of 0-1, multiply by three (to 0-3) and floor to get an integer between 0 and 3. That will be the multiplier for the constant added to change color.
 
Last edited:
Top