How to implement intentionally pixellated UI?

Hello! I am currently working with a team to make a PS2 style game, and one thing I want to implement is not only having a pixelated looking environment but also pixelated looking UI (with it still being readable of course). I have already implemented a pixellated environment by adding a material to the post process volume in the level:

Screenshot 2024-05-21 093540

However, I think that our UI currently looks too clean if that makes sense - see the hotbar below for an example. I think it would look better if it looked somewhat pixelated like the environment itself.

image

I am not sure how I could make the UI look pixelated though. Could I apply a material to the UI like I did with the environment to make it pixelated? I’m not sure what’s possible with Unreal Engine when it comes to this and I’m not really sure where to start with this so if anyone has any idea of what I could do, it would be great to know. Thank you!!

I don’t know exactly how your post-process shader works, but maybe you could try implementing it as an effect material for a retainer box.

image

The RetainerBox captures its children and does something similar to use the resulting texture as a parameter for some kind of user interface material. In my case, I used it several times to apply fancy effects like deformations to the interface.

All you need to know to create a valid RetainerBox effect material is that the material must be from the User Interface domain and that it must have a texture parameter. From there you can modify this material as you like.

image

2 Likes

This is really helpful, thank you!! =)

I’m glad it’s been of help!

I really like the retro aesthetic, I hope you manage to make an interesting game. Good luck!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.