How to create a sub-pixel effect

[Z_0F4R (zfr)]

Introduction

Hello! I am Zf.
In this post I am going to show you how to simulate or create a subpixel effect.

What is a subpixel?

A subpixel is 3 components making up a singular pixel. A pixel on a screen is made up of three subpixels: one red, one green, and one blue. These subpixels can be controlled independently to create different colours and shades.

What can this be used for?

This effect can be used for simulating electronic screens, such as:

• Tv Screens
• Computer Screens
• Smartphone Displays
• Electronic Billboards

Now that you have knowledge to what subpixels are, Lets get started!

---

Step 1: Creating the subpixel

To start with this tutorial you need to have only 2 things!

1. A picture of a 1x1 or 3x3 sub-pixel
2. Your image of choice to overlay the pixels

I have provided the sub-pixel below, just in case you dont have one:
---------------------------

Now that you have this image, import it into the roblox editor, using the Asset Manager.

---

Step 2

Now that you have the sub-pixel imported you can now create a part in the workspace. For this demonstration i will be using the size 6, 6, 0.4 for my part.

Let’s add a SurfaceGui to the part

Make sure that you set the face to the way you would like.

Setting up the SurfaceGui
There are a couple of settings you will need to change before we continue on,

1. PixelsPerStud
   We will be changing this to the max option, or 200. The reason we do this is to reduce the amount of images to have on the part, this is to reduce the lag on start up.
   

2. LightInfluence
   We will be changing this to stop the brightness of the image from becoming darker under a roof or being in front of a part. We will be setting this value to 0
   

---

Step 3: Setting up the sub-pixel

Now with our SurfaceGui created and our sub-pixel imported, we can start to create our sub-pixels!

Firstly, We will add a ImageLabel under the SurfaceGui and rename it to “Pixel”. It should look a little something like this.

After you have the ImageLabel in, you need to change a couple of properties

1. BackgroundTransparency
   We will set this to 0 to stop the colour of the background overlapping to the actual image.

2. Size
   We will set this value to: 1, 0, 1, 0. The reason for this is so the image completely covers the part’s face, no matter what size the part is.

3. ZIndex
   We will change this value to 0. This is to stop the two images from overlapping each other.

4. Image
   Now, We will add our image to the label. To do this simply click on the value and select the image we imported earlier.
   

5. ScaleType
   We will be changing the scaletype for two reasons:
   1: To reduce the amount of images we need to have to complete a full part
   2: To have more than one sub-pixel in one imageLabel
   
   For this tutorial we will have the scale type set to Tile.
   

6. TileSize
   Since we have the ScaleType set to tile, we need to configure the TileSize, In our case we will be settings the size to: 0.005, 0, 0.005, 0
   If you are using the 1x1 pixel then set the size to: 0.002, 0, 0.002, 0

Boom!

Now we have the sub-pixel effect, You can now move your camera towards the part to see the sub-pixels up close! But wait, Now we can add our image of choice.

A question you may have:

Why is it purple? or Why is it green?
Sub-pixels appear purple from a distance because of a phenomenon, known as “sub-pixel dithering” or “colour fringing.” It occurs because of the way our eyes perceive colours and the arrangement of subpixels on certain types of displays, such as the RGB stripe display.

---

Step 4: Adding our final piece

For your image of choice, import it into the roblox editor, using the Asset Manager. For this tutorial i have chosen a sky and ground texture, If you would like to use it i have posted it below:

Add a new ImageLabel under the SurfaceGui. If you wish, rename the ImageLabel to Image

Now, Open the properties of the new ImageLabel and change these properties:

1. Size
   We will change the size to 1, 0, 1, 0, so it covers the entire part

2. Change the image to your image of choice
   

3. ImageTransparency
   Last but not least, the ImageTransparency. We will set this value to 0.2 to allow the sub-pixels to show through the image.

Voila! Now you have your very own sub-pixel simulation! Now if we move our camera close to the part you will see the effect.

---

Hey there! This is my first ever post on the dev forum. Please let me know if i need to fix anything or if there is a better way this can be done.

[VSCPlays]

This is a great start for a new devforum member, picking the right category and this is well formatted

also this is a great tutorial

[alpharetzy2 (alpharetzyfake2)]

But what about importing the assets?? I’ve got moderated several times and i don’t want my account to be termd

[alpharetzy2 (alpharetzyfake2)]

Is it safe to upload these assets?

[Z_0F4R (zfr)]

Yes! The assets should be safe to upload. I’ve just noticed when you download them the name changes, Please make sure to change them to the designated names.
The first images name is subpixel and the second ones name is grass-and-sky. If the issue still occurs please inform me further

[bluebxrrybot (blueberry)]

@Z_0F4R

Boom!

Isn’t this supposed to be white?

Also, pretty sure pixels are not spaced in groups of 9, might want to adjust the texture to be more seamless!

[sethsethisthebest (womanslayer609)]

To be fair, they quite literally explained the purple being due to subpixel dithering right after that image.

[Z_0F4R (zfr)]

Hey! So I have tried the 1x1 pixel and to correct you, the pixels appear green. Its totally normal to have the pixels be a different colour other than white. But I have added the 1x1 pixel, just for you!

On the end of the 3rd step you can see i have described why its purple! They can be black or a specific colour like green, purple, red, or white. So in theory, Yes you are correct.

[VSCPlays]

Just use an alt account to do this, Roblox won’t know that the account is yours

[sew_itas]

Im actually working on something similar, but instead of just simulating the pixel texture I made every pixel to actually work. It may look a little too off but it looks great in studio with brightness.

CRT Sub-pixel demonstration

[Z_0F4R (zfr)]

That is pretty cool dude! Also what do you mean by making ‘every pixel’ work? Like they have their own individual colour value?

[orangFest]

such a small, yet somewhat noticeable detail for such effect. good job!

@Z_0F4R

Like they have their own individual colour value?

yeah, he possibly meant that.

[sew_itas]

Yep, exactly, every pixel has its own color value