Hello devs! Today I wish to discuss common lighting techniques used in games outside of Roblox that you can easily apply to your Roblox project. These techniques all use Billboard images to give light sources a more realistic look.
The image below shows a lamp from the game Penumbra: Overture. You see that glow that emits off the lamp? If you ever wondered about this, then you may already tell by this post that the glow that is being emitted from the lamp is actually just an image.
So how do they work on Roblox? The first thing to consider is creating the image of the light yourself which is quite simple and can be achieved with very little GFX knowledge. In this example shown below is a tutorial on how you can create this same sort of glow in the vanilla version of PaintDOTNet (PDN). You’re welcome to create your own lighting effects in any photo editing software of your choice.
GFX Tutorial
When you first open the PDN software, you should be prompted with this default view
Step 1:
On the top right-hand corner, select New
Step 2:
Set the resolution to 1024x1024 (This is the maximum resolution Roblox will allow). Afterwards, select “OK”.
Step 3:
In the Toolbox tab, select the Magic Wand tool. Select your entire canvas with it and hit the Delete key on your keyboard (Should be labeled “DEL” above your arrow keys).
If this task is accomplished successfully, your new canvas should look like this:
Step 4:
In the toolbox, select the Paintbrush tool.
Step 5:
If you haven’t messed with your horizontal and vertical scroll tabs, then both of the tabs will be aligned perfectly in the center. If any of your scroll tabs are offset, roughly center them to the best of your ability. In the bottom right-hand corner of your screen, there is a scroll tab for zooming in and out. Adjust this scroll tab so that you are scrolled in all the way (6400%). You should now be zoomed in to the very center of your canvas.
Step 6:
In the Colours tab, select the “More” button. We’re going to need to choose a colour that is roughly relatable to the colour of the source light. For this, I’m going to change my colour to this form of yellow. If you wish to use the same colour, my point of reference for the HEX code is #FFEE70 and my RGB values are set to (255, 238, 112).
Step 7:
After selecting the colour of your preference, go to the top of your screen and resize the Paintbrush tool to size 650 (Keep the hardness at 75). Afterwards, carefully aim your crosshair to the very center of your canvas and left click only once.
If my instructions have been followed correctly, you can now zoom out of the canvas. It should look like this:
Step 8:
We’re going to apply a heavy Gaussian Blur effect to this yellow circle that we have just created. To do this, go to the top of your screen and select Effects > Blurs > Gaussian Blur.
Step 9:
A new prompt should appear on the screen. In the scroll tab, scroll all the way to the right until the value reaches 120. Alternatively, you can also type “120” into the value panel. When you are done, select the “OK” button. If accomplished correctly, you should see your circle change significantly.
Step 10:
To finish up, we’re going to apply some transparency to our canvas. We’re going to do this so that the lighting appears much softer and looks more realistic. To do this, go to the top of your screen again and select Layers > Layer Properties. Alternatively, you can select the F4 key on your keyboard.
Step 11:
Just like the Gaussian Blur slider, we’re going to be dealing with the same thing here. For this example, I’m going to set the value of my Layer Transparency to 145. Afterwards, select the “OK” button.
When this is completed, you can now save your project
NOTE MUST BE SAVED AS A PNG OR EQUILIVANT. IF SAVED AS A .JPG OR ANYTHING ELSE OF THE SORT, YOUR IMAGE WILL LOSE TRANSPARANCY AND WILL HAVE A WHITE BACKGROUND
Now you obviously just can’t slap a decal on a transparent brick and call it good; there’s a lot more work that goes into lighting effects behave correctly and look efficient. There are three types of lighting effects: Static, Horizontal Follow, and Full Follow. I will go over the significance of each one and explain how they behave.
Static:
Static lighting effects are as the name implies: they are static. This means they are only intended to be looked at one direction, usually at a specific angle, since they do not move. Pictured below is an example of a static lighting effect in Roblox Studio.
Horizontal Follow:
Horizontal lighting effects only move on a horizontal anchor point. This essentially means that the image can only turn to face the player. Unlike all the other effects, this has to use a Beam instead of a Billboard. This type of effect is good for having a static light image always be facing the player without actually looking up or down at the player as well. If you are unsure as to how to create a billboard that behaves this way, I found this tutorial that can help guide you. Pictured below is an example of a horizontal lighting effect in Roblox Studio.
Full Follow:
Full follow lighting effects means that the lighting effect will always be facing the player no matter the angle. Unlike the Horizontal Follow effect, the Full Follow effect isn’t limited to a horizontal anchor point. Rather, its anchor point is at the direct center of the image. Pictured below is an example of a full follow lighting effect being used in Roblox Studio.
These are the three different types of lighting effects commonly used not only in some Roblox games, but in pretty much every single game outside of Roblox as well.
If billboard lighting effects are so important to realistic lighting, then why don’t we see more Roblox games use them? There are a few reasons I will quickly go over: First one being the fact that despite Roblox being about 16 years old, the addition of billboards is still a bit new in retrospective to Roblox’s age, so every single Roblox game before the update where billboards were added, you were severely limited on what lighting effects you could use. This has carried on with many of the devs just not really using these lighting effects since they haven’t much before. Another reason is performance: Having to load a .png of an image that’s 1200x1200 may not sound like it would take a while to load, but if you have a bunch of different lighting images, it will take a longer time for players to fully load your game the more variety of images you have (also to let alone that a .png is more harsh on performance than a .jpg image).
So it’s important to say here that, for a game to be good, adding in these lighting effects is not at all necessary but instead is an artistic attention to detail. If you want your game to be more immersive, aesthetically pleasing, or if you want to really push Roblox’s graphical limitations, then using these lighting effects will greatly aid you in achieving that.
What are your thoughts? Have you ever used billboard lighting effects in any of your projects before?
That is all I have for you guys today. If there’s anything you wish to say or if you have a question, feel free to comment down below. Thank you, and have a wonderful day.
