Intro / background
After deciding on my first portfolio piece (Asset.org Tool), I wanted something more visual and artistically creative. I wanted to create something in Unreal and learn more about the cool visual effects I have seen made with VFX and postprocessing. After watching a YouTube animated episode, I got inspired. They used some cool glitching effects, and it made me curious about how it worked and if I could make something of my own.
I started looking for inspiration, and of course I found the cool style from The Spiderverse and also an interesting game I had never heard of before called Observer. I actually bought and played through the whole game. I loved all the cool glitch effects I found and decided that this is what I want my next portfolio piece to be.
The level that is used is made by Anton Johansson.
I started looking for inspiration, and of course I found the cool style from The Spiderverse and also an interesting game I had never heard of before called Observer. I actually bought and played through the whole game. I loved all the cool glitch effects I found and decided that this is what I want my next portfolio piece to be.
The level that is used is made by Anton Johansson.
Glitching demo
How it works
The Glitching Effect is built up of three main parts. The glitching camera view, glitching UI, and glitching props Combinations are what created the demo. With different variables and customization. All parts of the glitching effect are controlled by a GlitchHandler blueprint.
Glitch Handler Blueprint
The blueprint has a trigger sphere for when to activate the effects. The blueprints have a lot of different variables to customize. All from turning on/off player view glitching, props glitch movement, props glitch effect, UI glitching. All parts have their own customizable variables as well; this will be more explained later.
Glitching Player View 
Glitching UI 
Glitching Props Glitching Player view
Post Process Materials
The glitching camera view effect was created with two post-process materials. One of these materials introduces a pixelation effect across the entire camera view, while the other, which I refer to as the main glitching material, has the glitching of "squares" blinking in and out randomly on screen with chromatic aberration. Despite the pixelation effect being present in the main glitch matrix, which only affects parts of the screen most of the time,. I decided to add the pixelation material to achieve a more balanced visual impact.
MAIN GLITCH MATERIAL
The main glitch material takes inspiration from UIMaterialLab's random material function. I took the random result and lerped it with the "Lerp Multiple Float2" node, multiplied it with time, and put it into a sin node. This created something like a flicker effect. Some squares fade in and out.
It's very repetitive, and there are always the same squares. To create more variation, the vectors of the random function part are randomly genreted with the Glitch handler blueprint.
To control the amount of squared covering the screen, another lerp is used, where the B value represents the player-to-camera distance from the blueprint (with a material collection parameter).
It's very repetitive, and there are always the same squares. To create more variation, the vectors of the random function part are randomly genreted with the Glitch handler blueprint.
To control the amount of squared covering the screen, another lerp is used, where the B value represents the player-to-camera distance from the blueprint (with a material collection parameter).
chromatic aberration
What really make something look like its glitching is the usage of chromatic aberration. This is used in the main glitch material. This is a quite easy effect with offseting the colors with the UV in each color channel and then combining them. This is also used with the prop glitching effect combined with a curve.
Glitching UI
The UI works by chaning the offset location of the UI elements. I also experimented with Materials that I in the end didint have time to use. The UI glitch is jitter movement similar to the props. I was planing from the to have some distorting of the UI. Example test down below GIF to the right.
Glitching props
The glitching props are built up with two components: changing the props transform with rotations, setting the location offset, and moving to another props location. All these were controlled independently with a timer by function nodes. The props also have two materials, creating the distortion glitch effect. The glitch handler knows which props to glitch based on a group name that the glitch handler holds. The name is what the user received. I used g1, g2, ect.
The glitch handler then searches for all static meshes that have an actor glitch component. The component only holds a group name. This is so the handler can find all the props that are under their responsibility. With this, the handler can apply the glitching movement and add the custom depth stencil value that is needed for the glitch material to function.
The glitch handler then searches for all static meshes that have an actor glitch component. The component only holds a group name. This is so the handler can find all the props that are under their responsibility. With this, the handler can apply the glitching movement and add the custom depth stencil value that is needed for the glitch material to function.
Material and Blueprint
To be able to control how often the props should rotate, e.g., public variables were used that were updated in the tick event to be able to adjust during play to find the sweet spot. To create more variation without having a static timer, I changed the variable to a Vector2D to randomize floats in range.
Camera view effect also have similar variables as the Props effect. Except the blend weight change that randomises the blend weight for each glitching prop.
Camera view effect also have similar variables as the Props effect. Except the blend weight change that randomises the blend weight for each glitching prop.
Editor view of Glitch Handler, Prop specific
Glitching prop material
The prop glitch effect is a post-process material that works by distorting the UV in the camera view. A custom depth stencil is used to determine where to apply the glitch material. The UV distort is created with two noise textures and two glitching curves with different offsets based on screenspace to have varied distortion between several props.
Glitching Screen materials
I took the same principle from the glitching prop material and applied to a surface material to create some instances of screen glitching to labs and end of the level.
IF i had more time
If I had more time, I would continue to work on my UI distortion effect.
Otherwise, I would like to have the functionality of camera effects stacking. For example, in the round flower room, it would be possible to have a glitch handler on the side carts to make the camera effect stronger when approaching the flowers on the carts. It would also be fun to play around with particles to enhance the glitch feeling.
The glitch handler blueprint right now is quite big with many variables. If I had more time, I would like to look into how to have all the functionality without all the variables becoming overwhelming. For example, the camera view effect makes all the variables that have to do with that effect private, making it not take place in the editor. I do not know if this is something that could be achieved with an unrealistic engine, but I would like to look into it.
Otherwise, I would like to have the functionality of camera effects stacking. For example, in the round flower room, it would be possible to have a glitch handler on the side carts to make the camera effect stronger when approaching the flowers on the carts. It would also be fun to play around with particles to enhance the glitch feeling.
The glitch handler blueprint right now is quite big with many variables. If I had more time, I would like to look into how to have all the functionality without all the variables becoming overwhelming. For example, the camera view effect makes all the variables that have to do with that effect private, making it not take place in the editor. I do not know if this is something that could be achieved with an unrealistic engine, but I would like to look into it.