1.0 Overview
Retro Screen FX is a highly customizable post-processing effect for Unity that emulates the look and feel of vintage CRT and LCD screens. It provides a wide range of effects, from screen curvature and scanlines to pixelation, color quantization, and LCD subpixel patterns. The system is built around a modular set of components that allow for easy customization, preset creation, and dynamic transitions.
2.0 Core Components
RetroScreenPostProcess.cs
The main script that applies the post-processing effect to the camera. Must be attached to a Camera GameObject.
Properties
@property{Shader} retroScreenShader - A reference to the RetroScreen.shader file. This is assigned automatically.
@property{RetroScreenSettings} settings - An instance of RetroScreenSettings that holds the current effect parameters. You can modify these values in the Inspector to see real-time changes.
@property{RetroScreenPreset} activePreset - A RetroScreenPreset ScriptableObject. If assigned, the component will load its settings from this preset. This is the recommended way to manage different looks.
@property{float} blendDuration - The time in seconds it takes to smoothly transition from the current settings to a new preset's settings at runtime.
How it Works
- It creates a
Material using the assigned shader. - In
OnRenderImage , it takes the camera's rendered image, processes it with the material, and outputs the final, stylized image to the screen. - It can be driven by the
RetroScreenAnimator for dynamic transitions or can be used standalone for a static effect.
RetroScreenSettings.cs
A
Key Features
- Contains all the public variables (e.g.,
curvature ,scanlineIntensity ,lcdMode ) that control the shader. - Includes a
Lerp function that allows for smooth interpolation between two different RetroScreenSettings objects, which is crucial for the transition animations. - Includes an
Equals method to compare two settings objects.
RetroScreenPreset.cs
A ScriptableObject that stores a
@creation In the Project window, right-click and go to
Benefits
- Reusable Styles: Define a look once (e.g., "Arcade Machine," "Handheld Console," "80s TV") and apply it to any camera.
- Animator Integration: Presets are the building blocks for the RetroScreenAnimator, allowing you to create sequences and transitions between different visual styles.
- Live Updates: Modifying a preset in the Inspector will update any RetroScreenPostProcess component that is currently using it, even in Edit Mode.
3.0 Animation & Triggers
RetroScreenAnimator.cs
Animates the effect by transitioning between presets. Place on the same GameObject as
Properties
@property{RetroScreenPostProcess} targetEffect - A reference to the component to be animated.
@property{RetroScreenPreset[]} presets - An array of presets to cycle or transition between.
@property{float} transitionDuration - The default time in seconds for a transition.
@property{AnimationCurve} transitionCurve - Defines the easing of the transition.
@property{bool} playOnStart - If checked, transitions to the first preset on start.
@property{bool} autoCycle - If checked, automatically cycles through the presets array.
@property{float} cycleDelay - The time to wait before transitioning when autoCycle is enabled.
Public Methods
These methods can be called from other scripts to trigger transitions dynamically.
@method{void} TransitionToNextPreset()
@method{void} TransitionToPreviousPreset()
@method{void} TransitionToPreset({RetroScreenPreset} preset)
@method{void} TransitionToPreset({int} presetIndex)
RetroScreenTrigger.cs
Triggers preset transitions based on physics events. Requires a
Properties
@property{RetroScreenAnimator} targetAnimator - A reference to the animator this trigger controls.
@property{bool} toggleMode - If true, cycles through `toggleSequencePresets`.
@property{AdvanceTriggerEvents} advanceMode - Defines when the sequence advances (OnEnter, OnExit, etc).
@property{List<RetroScreenPreset>} toggleSequencePresets - List of presets to cycle through in toggle mode.
@property{RetroScreenPreset} presetOnEnter - Preset to apply when an object enters.
@property{RetroScreenPreset} presetOnExit - Preset to apply when the last object exits.
@property{List<string>} triggerTags - Filters trigger activation by tag.
@property{LayerMask} triggerLayers - Filters trigger activation by layer.
4.0 Shader: RetroScreen.shader
Shader Properties
The heart of the visual effect. These properties are controlled via the
CRT Effects
_Curvature: Controls the amount of barrel or pincushion distortion.
_FillScreenAmount: Scales the image to hide black borders from curvature.
_ScanlineIntensity: The visibility of dark horizontal lines.
_ScanlineSpeed / _ScanlineThickness: Controls the movement and size of scanlines.
_NoiseIntensity: Adds random, static-like noise.
_RGBShift: Creates a chromatic aberration effect.
_VignetteIntensity: Darkens the corners of the screen.
Pixelation
_VirtualPixelScreenSize: The size of "virtual pixels," controlling the pixelation resolution.
_GapWidthScreenPixels: The size of the grid between virtual pixels.
_PixelGapColor: The color of the grid between pixels.
LCD Emulation
_LCDMode: Enables or disables the LCD subpixel effect.
_SubpixelStripeWidth / _SubpixelGapWidth: Controls the size of the vertical R, G, B stripes.
_MonochromeLCD: Simulates a monochrome LCD screen.
Color Modes & Palettes
_BaseColorMode: Selects the primary color processing method (FullColor, Grayscale, Monochrome, CustomPalette).
_PaletteColorSteps: Reduces the number of colors per channel for a "posterized" look.
_EnableDithering: Applies ordered dithering to smooth gradients in limited palettes.
_PaletteColor0 - _PaletteColor3: The four colors for CustomPalette mode.
_EnableTint: Applies a final color tint over the entire image.
Overlays (Dirt & Mask)
_CRTMaskMap: A texture to simulate a CRT shadow mask or aperture grille.
_DirtMap: A texture to overlay smudges, scratches, or dirt onto the screen.
5.0 Getting Started
- Attach
RetroScreenPostProcess to your main camera. - Create a
RetroScreenPreset in your project assets via theCreate > Retro Screen Post Process > RetroScreen Preset menu. - Assign the new preset to the
activePreset field on the `RetroScreenPostProcess` component. - Select the preset asset in the Project window and adjust its values in the Inspector to achieve your desired look. The changes will appear instantly in the Game view.
- (Optional) For animations, add the
RetroScreenAnimator component to the same camera, create multiple presets, and add them to the animator's `presets` array.