7
\$\begingroup\$

I'm currently working on a LibGDX game. When a user does something wrong, I would like all the graphics on the screen to jitter very similar to the glitch/distort effect seen in the game Watch Dogs (See Below).

My question is this: can this effect be achieved in real time by writing a shader? If so are there any references online on how to do this? (I've had a quick Google but all I could find is how to achieve this effect in Photoshop/After Effects).

Thank you for your help.

Screen jitter: https://www.youtube.com/watch?v=EYkqC9uI8Nc

Text glitch effect: https://www.youtube.com/watch?v=Wj26Wp2AH-U

enter image description here

\$\endgroup\$
11
  • \$\begingroup\$ It most probably can be achieved by rendering the image to a texture and then bending your brain to come up with the shader processing pipeline to achieve it. The real question is: what would you use it for? It looks more in the lines of a demo-scene project than a skill a game programmer should have. Of course, doesn't hurt to try it. An educated guess tells me that WD achieved that by playing Flash movies instead of using sophisticated shaders as you intend to. So, if a AAA doesn't do it, why would you? \$\endgroup\$
    – teodron
    Commented Dec 23, 2014 at 15:02
  • 1
    \$\begingroup\$ @teodron "The real question is: what would you use it for?" I think the answer to this "real" question can be found in the original question. "a skill a game programmer should have" not everyone limits themselves to skills they "should" have. "So, if a AAA doesn't do it, why would you?" In many ways, this way of thinking slows down progress. In conclusion, the only relevant information your comment brings is "bending your brain to come up with the shader processing pipeline to achieve it" which is no information at all. \$\endgroup\$
    – rootlocus
    Commented Dec 23, 2014 at 16:01
  • 1
    \$\begingroup\$ Of course the effect can be achieved in realtime. Texture offset maps + overlays, possibly in multiple layers and/or animated. It's all quite trivial, apart from the art asset creation process, which might take some time. \$\endgroup\$
    – snake5
    Commented Dec 23, 2014 at 17:07
  • 3
    \$\begingroup\$ It seems the "effect" they used in this specific image is randomly pick thin vertical rectangles and flip (invert) the colors in this rectangles which should be rather simple to accomplish. \$\endgroup\$
    – AturSams
    Commented Dec 23, 2014 at 22:14
  • 1
    \$\begingroup\$ I think the question is too broad at this point. There are many examples for a "glitch" effect, two of which in the links the asker provides and each implemented completely differently. What are your precise requirements? You need to know what you wish to do before you set out to do it or the answers you'll get in this case are write a shader. \$\endgroup\$
    – AturSams
    Commented Dec 23, 2014 at 22:19

1 Answer 1

Reset to default
6
\$\begingroup\$

Creating the glitchy look can be accomplished in a broad spectrum of ways. In essence, what we have been culturally accustomed to accept as a glitch is everything that is a sudden distortion of what would otherwise be coherent content. Some glitches fit well with analogue transmission (i.e white noise) and others fit well with digital displays, random ascii symbols, flickering text, artifacts (like the negative rectangles). Throwing the three layers of color out of focus (is called bleeding and) is more reminiscent of CRT displays. You can also add some high amplitude vertical waves temporarily.

To make random ascii characters appear:

  1. You can copy the original text string and rapidly randomly modify some of the characters.
  2. You can use a spritesheet like this and simply use randomly place sprites of characters, removing them shortly after that to make them flicker on the screen in an unpredictable manner.
  3. To do the negative image thing, what you suggested would work. It is essentially a XOR between the text and the noise rectangles (if white is true and black is false).
\$\endgroup\$
1
  • 2
    \$\begingroup\$ Like you said tweaking is key here because it is an artistic effect and does not fall in a "working" / "not working" category. \$\endgroup\$
    – AturSams
    Commented Dec 25, 2014 at 21:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .