How to achieve a "retro", pixelated visual effect

Help and Feedback Creations Feedback
#1

When playing EgoMoose’s Teleportation portal demo, I noticed that if your camera is really close to the portal, it looks as if you were playing an old, pixelated game, and so was born the idea for RFOTH.

To achieve this, I used a brick that was stuck to the player’s camera, covering the whole screen, using the Camera:ScreenPointToRay function to get the corners of the player’s screen and determine the exact size the brick should be. On this brick, I attached a SurfaceGui with a ViewportFrame inside that had as CurrentCamera the Player’s camera. From that point on, everything I needed to do was replicate the workspace inside the ViewportFrame, by copying everything and pasting it inside and making sure their properties update, such as position, size or color. Adjusting the “resolution” from that point on was simple, just by using the SurfaceGui’s CanvasSize property.

After that, I only added Cintlex’s old GUI and Shedletsky’s SFOTH with a couple of modifications to make it work.

Here’s an image of the effect! You can notice the GUI elements are the proper resolution, while the environment is pixelated.

rfoth
rfoth1914×965 329 KB

72 Likes
How do i create a 3D "pixel" effect?
How do I achieve a pixelated look?
#4

This is amazing! Thanks for sharing!

4 Likes
#5

Yes, very impressive, too bad viewports have so many limitations…

3 Likes
#6

It’s true, I had to create my own workarounds for some of the missing functionality, such as ForceFields, and as you can tell, there is no Skybox. Instead, I used the BackgroundColor3 property of the ViewportFrame

1 Like
#7

Oldie but a goodie, large inverted sphere with a texture. Super old-school. Lots of the older space-themed games used this to pretend to be planet.

5 Likes
#8

I was about to suggest that! Man, just thinking about that is nostalgic.

1 Like
#9

How did you exactly workaround forcefields? I would assume It’s simulated using a decal that adapts to the camera’s position as gui elements like billboard guis are not visible from viewportframes.

#10

I actually just made the Torso change colors from red to blue quickly :sweat_smile:
But yeah, that could work pretty well!

1 Like
#11

Could you share the source code for the viewport script(s)?

1 Like
#12

also your game appears to be a bit broken too
like the music would sometimes stop.

Also keep up the good work!

#13

I’d rather not, since it was all wrote in a hurry and a bit of a mess :sweat_smile: But I’d be happy to help with any obstacle you can’t get past while following my initial post!

Thanks for pointing that out about the music, I fixed it :slightly_smiling_face:

Edit: The game is uncopylocked and you can check out the code there

2 Likes
#14

ah, i see. I’ve managed to create my own version anyways. Also are you planning on making any other retro games? like maybe you could remake some 3D games from the early 90s or something along those lines.

2 Likes
#15

Not really, this place was only created as a proof of concept. I wouldn’t mind if people used this technique in their own retro games, though! :slightly_smiling_face:

1 Like
#16

It’s pretty neat ngl, the only thing that feels disorienting is this kind of uncanny-valley effect of having a high resolution UI with the fuzzy background. I love the concept though, and I can’t wait to see it used for atmosphere in different games!

#17

The focus of the post was the 3D world effect. The GUI can be changed to fit whatever purpose the developer sees fit, and it can be switched for something more “retro”. You could even create the UI in the 3D environment and render it the same way!

#18

Could you share the source? I’m struggling to figure it out. :sweat_smile:

#19

Wow! This was the exact same idea I had in this post, but it was too blurry for me, how did you make your not blurry?

EDIT:
Oh I see you didn’t solve this issue, your resolution is just so high it hardly matters. Interesting.

#20

This is going to be very useful for my 2007 styled horror game! Here’s a preview before I add this in! I just hope it works with my grain effect…

image
image740×500 69.5 KB

8 Likes
#21

Holy cow! This is revolutionary! I’m sure a lot of developers are gonna use this mechanic to replicate pixelated games!

#22

Sadly, Roblox might fix this in the future. :sob: :-1:

1 Like