How to create a sub-pixel effect

Resources Community Tutorials
#1

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:
Subpixel-3x3 --------------------------- Subpixel-1x1

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

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
image
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.
    image

  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
    image

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.

image
image598×555 16.4 KB

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.
    image

  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.
    image

  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!

image
image1229×770 60.6 KB
image
image1080×687 31.9 KB

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:
sky-grass

Add a new ImageLabel under the SurfaceGui. If you wish, rename the ImageLabel to Image
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
    Demo2

  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.

image
image1121×792 71 KB

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.

51 Likes
#2

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

3 Likes
#3

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

#4

Is it safe to upload these assets?

#5

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

#6

Isn’t this supposed to be white? :face_with_raised_eyebrow:

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

#7

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

1 Like
#8

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!

image
image767×661 60.2 KB

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.

#9

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