How to create a PS1 rendering style shader in UE4

Introduction

Back in the old days PSX games had a shaky and wobbly effect of vertices, this unwanted effect is caused by the lack of floating point precision.

psx_shaky_vertices_example

The PSX’s hardware only allow fixed point calculation so when the camera is moving or an object is moving, any given vertex stays in its position until it’s close to the next position and suddenly snap to it, nowadays graphics hardware can interpolate vertices between two position smoothly thanks to more floating point precision that is available.

We assume you have already created a project ready to test the shader or you already have a project that you want to apply the effect in it. The minimum you must have is a mesh with material applied to it.

Preview

You can download the complete project at the end of this tutorial so you can check it at your own pace, you will find everything documented.


Casual Game Lighting is a material function with a collection of lighting features like fog, diffuse, ambient lighting, and specular lighting. It’s made for anyone who wants to make a beautiful and appealing casual (or hyper casual) mobile games. It will make your game looks on mobile devices exactly the same way it looks in the editor.
Marketplace Link: Click Here
Documentation and how to use it: Link



Step 1: Create a material parameter collections

Material parameter collections is an asset that store global parameters (a set of scalar and vector parameters) that you can reference in any material. For example wind direction and strength can be referenced by all foliage’s materials. To read more, check this link.

To create a new material parameter collections assets, in content browser right click and go to Materials & Textures > Material Parameter Collection.

Next add two scalar parameters, Global_PSXEffect_3dGridCellSize & Global_PSXEffect_PixelizationAmount

Hit save and close the window.


Step 2: Create material function

The function PSXEffect_Function return a vertex offset data, we use it to offset vertices for the shaky effect. The function also pixelate UV data, we plug the return value in Texture Sample node to have a pixelated texture.

PSXEffect_Function

Notice that we used the parameters we created previously in material parameter collections.

To understand how we shake the vertices, imagine a 3D grid around your mesh, and vertices snaps the the closest points in that grid.

Changing the imaginary cell size


Step 3: Add PSXEffect_Function to you materials

It’s easy to add a function to a material. You can add it by left click in the material editor and type the name of the function.

Source File

That’s all folks ! Thanks for reading. If you have any questions drop a comment here or join me on Discord.

Mourad

Passionate game developer with +7 years of experience. Fluent in Unity3D & Unreal Engine 4. Worked as main programmer on The Dark Occult game (UE4). Currently helping the #gamedev community by making tools and writing tutorials at GAMEDEVWORKS.

You may also like...

21 Responses

  1. Davers says:

    I always thought the vertex snapping gave more personality and life to models on the PS1. 🙂 Except if they were cars in Destruction Derby 1 and 2.

  2. Can says:

    I have a problem with the function amount output is it possible to create a video tutorial for this?

  3. Can Sandikci says:

    okay i just typed in a wrong number it´s working now thx

  4. Zia Holt says:

    should i be using a certain version of Unreal? A lot of the boxes in material function when setting it up don’t exist or wont come up as a type it

  5. Lo says:

    Me and my friend are using this rendering style for our nonprofit game. How can we credit you for the scripts (:

    -Logan

  6. Rykane says:

    Hey, awesome work with the shader! I’m just wondering if there is a way to apply this to the whole screen using post-process instead of specific materials/meshes? I have the pixelization working on the screen by using a post-process however I’m trying to add the shakiness but I get float value errors. Any ideas?

    • Mourad says:

      Hi Rykane,
      Thanks for passing by.
      I don’t think you can achieve the same effect using just post-process effects, you have to manipulate vertices !

  7. jean-gabriel lapointe says:

    I must have missed something but I cant find the camera relative world position node, any help with that ?

    • Mourad says:

      Hi Jean. Choose “World Position” node and set “Camera relative world position” in the parameters of the node. Hope this helped you.
      Thanks Argemon for correcting me.

  8. Ismael says:

    Hi, im having some problems. Im currently on 4.25 and im very newbie at the engine.
    First of all, in the Material Function i cant find “Camera Relative World Position” node, only the “Camera Position”
    Also the effects doesnt work and the texture of my character material dissapears and it becomes white
    Thank you for the tutorial anyways!

  9. antonio says:

    do I have to manually add this to each material? Is there a way to do it via post process or something that applies to everything

    • Mourad says:

      Hi Antonio, as far as I know there is no way to change vertex position in a postprocess material. You have to place the function that manipulate vertex positions in each material.

  10. Argemon says:

    Good guide, but 1 thing to change is that you don’t use “Camera Position” node (which doesn’t have any parameters), but rather “WorldPosition” node and choose third option in the details (Camera Relative Position Inlcuding Shader Offset).

  11. Argemon says:

    It’s actually “World Position”, not “Camera Position”

  1. June 21, 2020

    […] Source: How to create a PS1 rendering style shader in UE4 – GamedevWorks […]

  2. September 24, 2021

    […] 解説ページ:How to create a PS1 rendering style shader in UE4 – GamedevWorks […]

Leave a Reply

Your email address will not be published. Required fields are marked *