I created this topic to keep this question from taking up space in other threads.
Please post your questions here and the community can chime in to help.
4 Likes
Hey everyone, Im new here. I have been reading and re-reading this whole thread over and over for DAYS, but I am just not comprehending it due to how complicated it is (from my perspective/skill level) so I have a question.
I use retroarch with launch box as my primary interface on my Windows PC and I recently learned about the whole overlay image thing with shader options and I am very excited about this, but it’s clear to me that after all the reading ive done here, this is beyond my abilities. So I need some help. I already have a custom-made overlay .png image that I created in photoshop (I created this using an actual photo of the TV that I grew up playing all these retro games on when I was a kid in the late 80s/early 90s, so it’s VERY important special to me.) So I just have 2 main goals, 1. I want to get this overlay image set up properly, and 2. I want to get a good shader/screen border reflection on there to simulate the old style glass screen/scan lines of the TVs of that era.
So, with those two goals in mind, can someone please help me streamline this process with a clear itemized shopping list of steps that I need to take in order to achieve this end result. I do really well with checklists. I would prefer to continue using launch box as my primary retro game interface as it is beautiful, but if I need to go back to just using retro arch only, I am willing to do that if this is not possible within LB. I am also willing to modify my custom overlay png image file in photoshop if needed to fit with the shader file.
Thank you to anyone who can help me. I really appreciate it.
1 Like
Hi, thanks for posting here.
My advice will greatly depend on the image you are using.
Could you post the image so I can take a look? (If the image isn’t too large you can just drag it into the post editor on a new line.)
OK. I am going to assume that it is a PNG that was converted to a JPG when it was posted.
I am also assuming you are on a 4K display.
The image is already a 16x9 ratio, but I would recommend resizing it to 3840x2160.
Then to use it as an overlay you will need to get the coordinates of the hole in the middle.
You will also need an accompanying CFG file. Assuming the name of the graphic is “OldTV1.png” the CFG file would be a text file containing this text.
OldTV1.cfg
overlays = 1
overlay0_overlay = OldTV1.png
overlay0_full_screen = true
overlay0_descs = 0
For the coordinates, I recommend using Paint. net.
Using the selection tool, select the transparent hole. The needed coordinates will be in the lower left corner.
After browsing for and selecting the CFG file as an overlay, enter the coordinates into the “Custom Aspect” settings in the Video>>>Scale Retroarch settings and save a core or game override.
You can use the override for different games or cores by renaming it and copying it where it is needed.
If this is all over your head I can walk you through it in more detail.
I can also walk you through using it as a Mega Bezel background and creating a custom preset.
3 Likes
Awesome. Thank you for all this info. I will read it in more detail as soon as I get back home. I uploaded my PNG file from my phone and somehow in the process it must’ve automatically converted to JPG.
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
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. 
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