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

RetroArch Additions Overlays
#33

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

1 Like
#34

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.

#35

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
#36

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
#37

Oh thank heavens, that’s a relief.

2 Likes
#38

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.

content
content3840×2160 419 KB

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

MB_preset
MB_preset3840×2160 887 KB

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

save1
save13840×2160 549 KB

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.

color_picker
color_picker3840×2160 1.33 MB

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

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

Load_Preset
Load_Preset3840×2160 669 KB

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.

hsv
hsv3840×2160 1.09 MB

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

frame_opacity
frame_opacity3840×2160 853 KB

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

non-integer_scale
non-integer_scale3840×2160 1.01 MB

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

position
position3840×2160 1020 KB

We are pretty close now.

almost_there
almost_there3840×2160 804 KB

We need to increase the bezel width.

bezel_width
bezel_width3840×2160 1 MB

And eliminate the inner frame edge.

frame_inner_edge
frame_inner_edge3840×2160 1010 KB

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

Here is where we end up.

final
final3840×2160 650 KB

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.

alternative
alternative3840×2160 657 KB

It gets easier with practice. :grin:

3 Likes
My Realistic Arcade Bezels
#39

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
#40

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
#41

IMG_3574
IMG_3574850×605 134 KB

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
#42

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.

#43

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
#44

Oh my. :astonished:

The fact that you had to ask means two things.

  1. You didn’t read the instructions on the shader thread.

  2. You aren’t at all familiar with shaders.

The shader thread is here.

The installation instruction are near the top of the first post.

That will take care of #1.

#2 is beyond the scope of this thread.

The Retroarch .com section on shaders has a lot of info.

2 Likes
#45

Yeah I actually said in that thread when I first created an account here that I didn’t understand it…

“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)…”

At which point I was directed to this thread.

2 Likes
#46

I am going to private message you.

1 Like
#47

Where can I find these Overlays for Xmen vs Street Fighter?

They are AWESOME!

#48

I think the are part of the Bezel Project overlays.

#49

this one is a personal creation https://www.mediafire.com/file/fhprr4zjvofg7cf/xmvsf.zip/file

2 Likes
#50

Following @Duimon advice, I post this here: I’ve seen several overlays posted as .jpg images in this forums. AFAIK, Retroarch needs a .png so I those images won’t work “as is”. So my question are: Why do they post them as .jpg instead of .png. And the second question would be: Is there any easy way to convert them to .png withou using pro tools like Photoshop and stuff?

#51

IrfanView or GIMP should have you covered or even Microsoft Paint.

#52

It is most likely the forum engine converting them due to size.

Simply converting them to PNG won’t get back any transparency that is lost in the conversion.

It is my assumption that they are posted only as a screenshot and need to be downloaded in their original form via a link. (If you are using them as a regular overlay.)

The Mega Bezel can draw the bezel and screen on top of either a PNG or JPG but for some intended uses, can be drawn behind. In this case a transparent PNG would still be needed.

Technically, there is a “cutout” feature in the Mega Bezel, so if only a simple rectangle is needed, it would still be possible with a JPG.

2 Likes