How to convert an image into an overlay or border shader background

I made this overlay, but I need to add a grare effect without lighting on the screen

1 Like

This is tough to do realistically with an overlay.

The most common method is to fill the hole with a semi-transparent layer. (Usually 15% opacity or so.) Here is an example image from the community.

Add an image of your choice or creation as a new layer below the main layer, and lower the opacity to 15%. (You may have to play with the opacity to get it just right.

The limitation with overlays is that they can only use opacity. The Mega Bezel can also use blending methods like additive or multiply.

This is what I use on my Vintage TV presets.

In the Mega Bezel I have access to blending methods, opacity, and black level.

The Mega Bezel also has a Diffuse (Phosphor) layer, a tube shadow, empty tube space or black line edge, reflection image scaling etc. All of which can make things look more realistic.

The Diffuse layer is even affected by ambient light.

2 Likes

thanks for the tutorial it looks really good

3 Likes

thank you for helping me

2 Likes

You are welcome. The only downside to my image is that I rendered it onto a spherical object. (Knowing what kind of tube I was using it on.)

Sometime I will have to do a cylindrical rendering.

It is my pleasure. Please don’t hesitate to ask if you have further questions. The answers will help the rest of the community.

2 Likes

I’m having trouble doing what you suggested from your post and I think I require more assistance to walk me through the process if possible. I used the paint.net software to locate the center coordinates as you suggested, and I tried going into the video settings of retro arch to make the appropriate adjustments. Maybe my con

figuration file is wrong? I’m not sure, I’ve never done a configuration file before. This is as far as I got, and I think something is off somewhere but I’m just not sure what.

Take a close look at the paint. net image I posted.

Where I circled it literally spells out what to put in those custom viewport settings, the first two numbers are, in order, x position and y position. The second two numbers are, in order, width and height.

You also need to load the cfg file in the overlay section. I recommend setting the overlay opacity to 30% or so while working on the coordinates, and temporarily setting overlays to stay visible when the UI is open. (At least until you get used to this process.)

1 Like

ok, i will recheck that.

I just noticed you don’t have any content running. You will need a game running to have an overlay.

Let’s run some content and try this again.

I will run Rayman on Beetle PSX HW.

Once the content is running, browse for the CFG file.

Set the opacity of the overlay to 40, and toggle the “Hide Overlay in Menu” Setting. You can also toggle the “Show Overlay Behind Menu” setting, otherwise, if you toggle the visibility of the overlay before you lower the opacity, it will cover the menu.

Note having the overlay visible, but partially transparent, will let you match the curvature of a shader later.

Next Go to the Video>>Scaling settings and enter the coordinates.

When you select custom it will look like this.

Then entering the coordinates gets you this.

Notice how it exactly fits the boundaries of the hole. This is the real advantage of using Paint.net to get the coordinates.

It is very quick using a keyboard, pressing enter at each setting, and typing the number in. I suggest you write the numbers down, or display them on a second screen if you have one.

While you are here you can load a shader. I used Guest ADV and added some curvature to match the overlay. Then I went back and toggled the overlay visibility and increased the overlay opacity to 1.00.

Now you can save a core or game override and a core or game preset.


For anyone reading this that is on Linux. You can get the coordinates with a python script.

coordinates.py

#!/usr/bin/env python
from gimpfu import *

def selectionMargins(image):
    selection,x1,y1,x2,y2=pdb.gimp_selection_bounds(image)
    if not selection:
        pdb.gimp_message("No selection")
    else:
        gimp.message('X_Position=%d\nY_Position=%d\nWidth=%d\nHeight=%d' % (x1,y1,(image.width-(image.width-x2))-x1,(image.height-(image.height-y2))-y1))

### Registration
desc='Show Overlay Coordinates'
register(
    'selection-margins',desc,desc,'','','2019',desc,'*',
    [(PF_IMAGE, "image", "Input image", None),],[],
    selectionMargins,menu="<Image>/Select"
)

main()

Copy the file to your plugins folder. (You can find your plugins folder path in “Edit>Preferences>Folder>Plugins”.)

Use the “Fuzzy Select Tool” (Magic Wand) to select the transparent section of the image. The menu entry is at the bottom of the Select menu when you right click in the image window.

Output is in an error dialog.

GIMP has some selection feathering by default and that radius will have to be set to 0.00 to get accurate coordinates. (Look closely in the upper right corner of the screenshot.)

Note it is absolutely mandatory that your image is the same size as your screen to get coordinates in an image editor, although once you get the coordinates the overlay can be any size.

So you can use a 4K overlay on a 1080 monitor. I usually resize a copy of my 4K overlay (Without worrying about quality) to get 1080 coordinates.


Edit: I modified and updated the python script to produce an even more Retroarch friendly output than Paint.net.

1 Like

I thought I’d chime in with a bit of higher level advice.

Once you get your head wrapped around the overlay method, you can manually create an override without starting Retroarch.

Here is an example for Rayman with the OldTV.png & cfg in the root overlays folder.

Create a text file named Rayman.cfg (Or whatever your rom name is) and put it in the config folder of the core you are using. In my case Beetle PSX HW.

RetroArch\config\Beetle PSX HW\Rayman.cfg

aspect_ratio_index = "23"
custom_viewport_height = "1226"
custom_viewport_width = "1646"
custom_viewport_x = "1005"
custom_viewport_y = "427"
input_overlay = ":\overlays\OldTV1.cfg"
input_overlay_enable = "true"
input_overlay_opacity = "1.000000"
input_overlay_hide_in_menu = "false"
input_overlay_behind_menu = "true"

aspect_ratio_index = “23” means “custom” the rest is self explanatory and, using this as a template, the file can be created by hand immediately after you get the coordinates.

Note the :\ syntax means “Root Retroarch Folder”. You can use an absolute path if you like. (e.g. “E:\Retroarch\overlays\OldTV1.cfg”)

You can name the file “Beetle PSX HW.cfg” for a core override or “Playstation.cfg” etc. for a content directory override.

You still need to set the shader up manually and save a core, game, or content directory preset.

Before you do this you can edit overlay opacity line. (input_overlay_opacity = “.400000”) Then edit it back to 1.000000 when you are done.

3 Likes

Just wanted to mention that I modified and updated the python script to produce an even more Retroarch friendly output than Paint.net.

The above post has been updated. :grin:

1 Like

I see a few more responses to help me with this, but I am on my phone with weak connection so as soon as I get back home from being out of town, I can’t wait to really sit down at my PC, take a look at all of this information in detail so that I can get this thing up and running. Thanks again for all the help. Wish me luck.

1 Like

OK I have reached the point where I’m starting to pull what little hair I have out of my head due to frustration. I entered all the coordinates for the X/Y position in the settings for the overlay, but now when I try to load the overlay, nothing displays from my overlay image and instead, the game image appears in the bottom right corner, all chopped off, I just don’t know. This is what I have so far. maybe the issue was with my configuration file, I have little to no experience with configuration files, so that’s very likely. Honestly, I have pretty good computer skills, but everything involved with what we are talking about in this thread to set this up is beyond anything I have ever learned. If anyone is willing and able, I would totally be OK with someone taking remote control of my PC who knows what they’re doing and just setting this all up for me, I believe Google Chrome has a remote access screen sharing feature built into the browser, I’ve done that before, and would totally be OK with setting something like that up.

1 Like

Looks like you are using a 4K coordinates on a 1080 monitor. While this shouldn’t affect the visibility of the overlay, it will move the screen like this.

As I said above, if you went the correct coordinates you will have to temporarily (Or permanently) resize your image to match your display. (1920x1080)

After you get the 1080 coordinates you can use the original image without issue.

If you rename your image to OldTV.png you can use the CFG file I posted.

You can also use the override I posted with the 1080 coordinates.

Snes9x.cfg

aspect_ratio_index = "23"
custom_viewport_height = "612"
custom_viewport_width = "823"
custom_viewport_x = "503"
custom_viewport_y = "214"
input_overlay = ":\config\Snes9x\OldTV1.cfg"
input_overlay_enable = "true"
input_overlay_opacity = "1.000000"
input_overlay_hide_in_menu = "false"
input_overlay_behind_menu = "true"

For your convenience I added everything you need to a folder in my Front-End-Assets repo here.

https://github.com/Duimon/Front-End-Assets/tree/main/SlickSyck

Just copy all of those files to your “config\Snes9x” folder and the next time you run Snes9x content it should just work.

I added an inner shadow to the overlay and set up the Guest Advance shader as a preset. Make sure you are using Vulkan or glcore as your RA video driver.

You can examine the files and compare them with this thread to get an idea how I set things up.

I will leave the files up in perpetuity so anyone else can also use them to learn from.

Do me a favor and, once you figure things out, let me know how I can make my directions more clear. I plan on creating a detailed guide that will hopefully be easier to follow.

2 Likes

I sincerely appreciate all the help with this. I will let you know as soon as I get it going, and I will let you know if I have any more questions. I think your directions are actually as clear as can be, I just have a problem with reading comprehension in general on my end. Especially with complex content. It’s kind of something I’ve struggled with my whole life.

1 Like

No worries. :grin:

You are actually the perfect target audience for my guides. (Which this was not.)

I usually lay out my guides with a lot more supportive images and narrow steps. This post was a little rushed.

If you don’t mind, I’d like you to read the guide when I get it done. No ETA but pretty soon.

2 Likes

Yeah that would be cool, for sure!

Ok so, i’m making progress. But I think something is still off somewhere. As you recommended, I resized my overlay image to 1920x1080, I redid all the text within the configuration file and I renamed all the files accordingly and that seems to have made my overlay image actually appear in retro arch so that’s good. But now this is what I’m stuck with when I try to run the game, despite the fact that I entered all the proper coordinates according to the paint.net numbers

1 Like

It is odd that your large image didn’t show in RA. Maybe the image format is broken. You can try to save it from your image editor with a different name. I use 4K images all the time in 1080.

In any case. . .

Did you try the files I added to my repo?

Your (X Position) coordinate is 1005. That is the left side position of the screen area. 1005 is more that half of 1980 so the left side is in the middle of the screen.

Maybe you didn’t load the 1920x1080 image in paint.net.

If you look at the config I posted (For 1920x1080)

custom_viewport_height = "612"
custom_viewport_width = "823"
custom_viewport_x = "503"
custom_viewport_y = "214"

You can see that the (X Position) value is 503.

You’ll also notice your width “1646” is greater than my “823”. . .

and your height of “1226” is greater than my “612”.

2 Likes

OK I will go back in and make those adjustments ASAP and see how it goes

1 Like