How to create the "ps1 look" in roblox, using 3 methods

Hi everyone. I have seen many indie games (especially horror ones) use a ps1 aesthetic, but I haven’t seen many people use this style inside of Roblox.

Example of “ps1 look”:

The reason it is difficult to create this look is due to Roblox’s engine limitations, with the shaders required for this look (eg. downsampling, affline mapping) not yet available to us. However, we can recreate this effect in certain ways on roblox. I have put together three methods that can achieve similar aesthetics to what other game engines can do.

This tutorial outlines the three methods for creating this look and also provides a game that you can look through as an example of how this can be used.

Method 1: Using textures

This method is the most straightforward of the three, but has some limitations, depending on how close to the “ps1 look” you want it to be.

You can use textures that are 256x256 or 128x128 pixels to create a ps1 style, but Roblox filters textures lower resolution than 1024x1024, which leads to blurry textures.
You can upload the textures as 1024x1024 but if there are a large amount of high-res textures in your game it impacts performance.

This blurriness can be bypassed by using the Pixelated resample mode on ImageLabels, but this will require you to use SurfaceGuis as a replacement for textures, which impacts performance.

Example of filtering modes: Left is default, right is Pixelated

The SurfaceGui images do not wrap around the surface of an object like Decals and Textures do, so you cannot use them on objects like spheres or cylinders.

This method is the simplest but least closest to the ps1 look of the three, because it is missing the warping effect caused by affline mapping, and is a higher resolution than the native ps1 resolution.

Method 2: Textures and Warping

This method still uses the pixelated textures from before, but also adds distortion in a way that looks similar to the affline mapping used for the ps1.

Most game engines use floating-point numbers to calculate how 3d models will look, but when you get further away from the origin (0,0,0) the numbers are less precise, which results in model distortion.

Examples:

50k studs away from origin


900k studs away from origin

2 million studs away from origin

This floating point precision error that usually affects games can be exploited to create the desired warping effect, with the intensity being how far from the origin you are.

This looks closer to the ps1 style, but if you really want the most convincing look there is an even better method.

Method 3: Textures, Warping and Glass

This method is the most limiting but also the most similar to the ps1 style.

This method also abuses the floating point error but with one difference: it creates a downsampled effect.

The glass material is critical to this method because of the unique distortion effect it has.

Like with models, this distortion effect is more pronounced and pixelated when further from the origin.

With glass:


Without glass:

This really sells the ps1 look with the low resolution effect, but also has drawbacks.

  • Everything that normally cannot be seen through glass will be invisible in your game (eg. glass, transparent objects, surface and billboard guis, decals, textures, etc.)
  • Performance is not good when using this method.

But it looks quite good.

Here is the script i used to attach the glass to the camera:

local Camera = workspace.CurrentCamera
local part = workspace.Glass
part.CanCollide = false
part.Anchored = true
part.Parent = workspace
local function update()
	part.CFrame = Camera.CFrame*CFrame.new(0,0,-0.41)*CFrame.Angles(math.pi/-2,math.pi/1,math.pi/1)
end
Camera:GetPropertyChangedSignal"CFrame":Connect(update)
update()

The glass distortion effect can also be changed by moving it closer or further away from the camera.
To get the best results, change the glass transparency to 0.99 and the glass color to medium stone grey.
Note that this effect is only visible on graphics settings 8 or higher.

Optional effects

In one of my old projects where I used this look, I additionally locked the framerate at 25fps, changed the aspect ratio to 4:3 and added lines across the screen to imitate an old monitor.

These effects are optional but can sell the look further depending on what kind of game you are making.

I hope you all found this tutorial helpful if you are looking to create this effect.

Examples of games I used these methods in:

Method 3:
(old horror project, uncopylocked)
https://www.roblox.com/games/5315543299/ps1

Method 2:
(current project)
https://www.roblox.com/games/7016581453/Killmode

59 Likes

how well does method 3 work without warping? because the farther from the origin you get, the harder it is to control your character.

If you still want the pixelation effect, some warping is required. You’ll have to find a balance between warping and control that suits your game. If you don’t want any warping then I suggest method 1.

You could also make use of the optional effects I mention to imitate the look more without warping.

The glass doesnt seem to be doing anything? what properties does the glass need to have, and how far out should I be to see the difference?

The glass should have a transparency of 0.99 and in the example project I was >900k studs away from the origin. You can download your own copy of the project to look at the techniques I used.

i set the transparency and moved everything 900k studs away and the glass doesnt seem to be doing anything. though i did notice i could see my spawn forcefield (which i dont think you can normally see through glass)

Are you attaching the glass to the camera using the script in method 3?

yeah, and i know its attached because when i pause and zoom out i can see the glass move with my camera.

Can you send me a screenshot of the properties of the glass?

heres the majority of it

Try using these properties to see if it fixes your problem.

1 Like

i can now see the glass on my screen, but still no distortion.

i also opened the “ps1” game in studio and the glass didnt seem to be doing anything there either. So im guessing its something to do with studio

it was, i had to raise my graphics level. which means that the glass method wont work unless the graphics level is higher (at least 8 in the roblox menu)

Yeah I forgot to mention that, i’ll add it now.

you should also mention that whenever you walk, the screen shakes like crazy

It kinda depends on your camera angle, so if you are facing perfectly straight forward there won’t be as much shaking.

1 Like

One question, what shape is the glass supposed to be?

I just used a very thin block as the glass part.