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

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

Ok, I made the proper adjustments to the coordinates, and I have made great success! Now all I need to do is add the curvature and scan lines from the shader file to the screen area, as well as the reflection effect that extends onto The rim of the TV where it meets the screen.

2 Likes

That is great news.

The sad news is that if you want the Mega Bezel reflection (I took your numbered list in order and started with an overlay tutorial.) the Mega Bezel is an entirely different process.

I will post a tutorial for that ASAP.

The short of it is that, except for special circumstances, you won’t use an overlay with the Mega Bezel.

Do not be disheartened, the info you learned so far is valuable, and the Mega Bezel is easier.

1 Like

Well, I am following your lead, so whatever you think is best is what I will do, just let me know what you think would be the best course of action going forward.

Can I still add that reflection/scan line/shader effect now that I have the overlay image all sorted out?

1 Like

Nope. The overlay will cover the reflection.

The shader has a background image layer it uses to display the graphic.

You can use a scanline shader, as I did, but no reflection.

Oooh I see. OK. I was Not aware that they were both two separate things. So are you telling me that the reflection effect from the game is 100% impossible with a custom-made overlay image like mine?

2 Likes

No, I am telling you it is not only possible, but easier than setting up[ an overlay. :grin:

I will set it up and post a tutorial in a few minutes.

2 Likes

Oh thank heavens, that’s a relief.

2 Likes

OK, here we go. This will be a long post. :grin:

Make sure you have the Mega Bezel installed, following the instructions on HSM’s thread, and that you can load a base preset.

Note I have my UI background set to 0% opacity to make this kind of thing easier.

Let’s start by loading some content.

Then load a base preset. (shaders_slang/bezel/Mega_Bezel/Presets/MBZ__3__STD.slangp in this example.)

Save the preset. (I am again using OldTV as a name.)

The shader will be saved at RetroArch\shaders\OldTV.slangp

Open that file in a text editor.

OldTV.slangp

#reference "shaders_slang/bezel/Mega_Bezel/Presets/MBZ__3__STD.slangp"

Copy your overlay to the “shaders” folder and edit the OldTV.slangp with the following.

OldTV.slangp

#reference "shaders_slang/bezel/Mega_Bezel/Presets/MBZ__3__STD.slangp"

BackgroundImage = "OldTV.png"

Paths can be manually changed later, we’ll keep it simple for now.

Next, open the OldTV.png in an image editor and use the color picker to pick a color near the bezel.

Write down the H, S & B numbers. (H, S , & V in some editors.)

Now load the content again, and the OldTV.slangp.

As you can see, we have the image as a background but we need to fit the bezel to it.

First go to the Bezel Color parameters and change them to the values we just wrote down.

Next let’s eliminate the frame. (By lowering it’s opacity to 0%.)

Then we’ll resize the bezel until it looks pretty close.

Now we use X & Y position to place it where we need it.

We are pretty close now.

We need to increase the bezel width.

And eliminate the inner frame edge.

While I was at it I increased the Bezel Outer Corner radius.

Here is where we end up.

Save the preset using the same name. (OldTV)

If you look at it in a text editor now you can see all the new parameters.

OldTV.slangp

#reference "shaders_slang/bezel/Mega_Bezel/Presets/MBZ__3__STD.slangp"
HSM_NON_INTEGER_SCALE = "54.970253"
HSM_SCREEN_POSITION_X = "-40.000000"
HSM_SCREEN_POSITION_Y = "15.000000"
HSM_BZL_WIDTH = "167.000000"
HSM_BZL_OUTER_CORNER_RADIUS_SCALE = "150.000000"
HSM_BZL_COLOR_HUE = "23.000000"
HSM_BZL_COLOR_SATURATION = "19.000000"
HSM_BZL_COLOR_VALUE = "15.999995"
HSM_FRM_OPACITY = "0.000000"
HSM_FRM_INNER_EDGE_THICKNESS = "0.000000"
BackgroundImage = "OldTV.png"

That is the easy way. :grin:

If you want to get more adventurous you can lower the opacity of the bezel to 0% (Leaving only the reflection) and adjust the width, height, inner corner radius, aspect ratio, and non-integer scale. This will let you use the bezel in the graphic and still have a reflection.

It gets easier with practice. :grin:

3 Likes

That looks amaaaazing. That’s exactly what I want. That last image with the opacity of the bezel set to 0% while still having a reflection on the overlay image is EXACTLY what I want the end result to be. I can’t wait to get to work on this.

2 Likes

Just take your time. You will need to adjust the long and short curvature as well as the other parameters I mentioned.

When using this method I also tend to raise the Global Reflection parameter so it shows a bit more.

Since you won’t need the transparent section you could also flatten the image. (Or a copy of it so you can still use the overlay.) This will create a white space in the middle that may make it easier to bullseye the parameters.

2 Likes

Ok that sounds a bit complicated. I will reread it as many times as I need to in order to get this done correctly.

1 Like

There are a lot of parameters, and I have had years of experience, learning new parameters as they were added to the old.

Just concentrate on the scale, aspect, and position first.

You can change the menu driver while you work on it if you are using one that makes seeing the changes difficult. I use glui.

I seem to be having trouble with this. I downloaded the files and extracted them from zip, but I dont know how to install them. I dont see any kind of primary “.exe” file anywhere. How do I do this?

1 Like