Right now, any game that wishes to add darkening at the edge of your view will need to display a fullscreen image of a vignette. This has gotten more difficult to do over time.
The new UI insets applied on notched displays mean you have to be careful if you’re trying to add this with an ImageLabel - you could end up with a gap around your vignette if done naively.
If you’re trying to support VR, then you’ll have no good solution for this other than to try and place a Decal in front of the camera at all times. As proof that this is fragile, Roblox’s own core UIs have to do this, and at launch, it wasn’t properly sized for VR headsets with larger FOVs such as the Valve Index.
In retrospect, it seems obvious to add this sort of effect as a post process instead. It’s trivially simple to compute - nothing more than taking the distance from the centre of the screen for each pixel, and alpha blending to another colour.
The customisation axes that I would care about as a developer are:
- Colour
- Opacity
- Tightness:
- Whether it meets at the edge, or meets at the corners (ideally you can blend these for animation purposes)
- The ability to scale the vignette (again, particularly useful for animations)
- The ability to translate the vignette (good for drawing attention to a part of the scene without taking over camera control)
Beyond aesthetic use cases, or VR use cases for reducing motion sickness, this would find broad appeal in many other types of game. For example, this would be incredibly useful as an out-of-the-box solution for FPS games when creating scopes for weapons, or perhaps for similar systems in casual games, for example telescopes. Another example would be scene transitions - as alluded to earlier, vignettes or circular cutouts are often used as more interesting crossfades between two environments, for example during a teleportation sequence. (There could be a related feature request for luma wipes to a solid colour, but that’s distinct from this feature request)
Having a parametric definition of a vignette like this also opens the door to more creative use cases that wouldn’t be possible with a simple scaling image label or similar. For example, you could adjust the tightness of the vignette bounds to simulate a ‘focusing’ effect for an optics system. Alternatively, you could make the vignette infinitely tight for a circular edge, centre it on a point of interest in the scene, then shrink it down for a creative transition that lets you creatively focus on one object as you leave the scene. This can be done to some extent with UI elements today, but it’s difficult to make it look good.