Design Pixel Vignette Shader?

Discussion in 'Game Design, Development And Publishing' started by William Garrison, Jun 10, 2019.

  1. William Garrison

    William Garrison Member

    Joined:
    Apr 16, 2019
    Posts:
    30
    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?

    [​IMG]

    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.
     
    sitebender likes this.
  2. Rukiri

    Rukiri Member

    Joined:
    Sep 25, 2016
    Posts:
    137
    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?
     
  3. William Garrison

    William Garrison Member

    Joined:
    Apr 16, 2019
    Posts:
    30
    I dont know, thats why I ask. I am hoping someone can say "oh thats probably dont using... or check this tutorial..." Ill def look into dithering shaders
     
  4. Rukiri

    Rukiri Member

    Joined:
    Sep 25, 2016
    Posts:
    137
    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.
     
  5. muki

    muki Member

    Joined:
    Mar 5, 2017
    Posts:
    220
    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.

    [​IMG]


    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).

    [​IMG]

    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.

    [​IMG]

    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.

    [​IMG]

    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: Jun 13, 2019 at 12:58 PM
    sitebender and RujiK like this.
  6. NightFrost

    NightFrost Member

    Joined:
    Jun 24, 2016
    Posts:
    1,757
    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: Jun 13, 2019 at 1:37 PM

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice