[GUIDE] Overlays & Arcade Bezels in RetroArch

[Anonymous]

I love getting the bezel artwork just right on my arcade games, and with the RetroArch versions of MAME and FBA it’s very customisable. For an example, let’s say we’re making artwork for the Simpsons arcade game, which is simpsons.zip in your roms folder.

You will need:

– an Overlays folder somewhere on your Pi. This will contain an image for each game with that game’s bezel artwork, and a .cfg file for each to tell Retroarch what to do with the image. For our example we’ll use /home/pi/mame-overlays.

– a custom .cfg file in the rom folder for each game, which tells Retroarch which overlay to use and where to draw the screen.

TO MAKE THE OVERLAY ITSELF

– Go into Photoshop/GIMP/image editor of your choice and make a new transparent file of whatever size your screen resolution is. In a new layer, make a rectangle to represent the screen of the emulator. The size isn’t crucial, but particularly if you’re using shaders you might want to make it a whole multiple of the game’s original resolution. Colour the rectangle in whatever bright colour you want – it’s just there as a guide.

– Paste in the images you want for the bezels etc, and move the images and the screen placeholder you just made into whatever arrangement you like. Here’s what your image should look like:

The green is where you want the emulator’s screen to be, and the red is the instructions, bezel images and so on. The white areas are transparent.

– Measure the pixel dimensions of the emulator screen, which are A and B on the diagram, and note them down somewhere. Then do the same with the distances of the emulator screen from the left and the top of the image – distances C and D in the diagram.

– Now delete the emulator screen placeholder so you’ve just got a transparent image with the bezel images in the right places. Save the image as a transparent PNG and put it in the overlays folder on your Pi. For our example, let’s call it /home/pi/mame-overlays/simpsons.png.

CREATING THE OVERLAY CONFIG FILE

RetroArch has pretty powerful tools for creating overlays, as you can make fancy ones with working controls overlaid for touchscreen devices. We don’t need to worry about that here, though, our overlay is just a single image.

Create a new text file, and paste in the following:

overlays = 1
overlay0_overlay = (path to your overlay image)
overlay0_descs = 0
overlay0_fullscreen = true

That’s it. All we’re doing is telling Retroarch to use a particular image and to display it fullscreen. So, our example would look like this:

overlays = 1
overlay0_overlay = /home/pi/mame-overlays/simpsons.png
overlay0_descs = 0
overlay0_fullscreen = true

Save your file in the overlays folder with the same name as the image file – in our example it would be saved as /home/pi/mame-overlays/simpsons.cfg.

CREATING THE RETROARCH CFG FILE

Now you need to create a .cfg file for each game you’ve made a bezel for. This contains settings which override the ones in the main retroarch.cfg, but just for one particular ROM file.

Open a new text file and paste in the following – don’t paste the bits in brackets, they just explain what the different lines do:

input_overlay_enable = true (Tells RetroArch to use an overlay.)
input_overlay = [path to your overlay cfg file] (Tells RetroArch which overlay to use.)
input_overlay_opacity = 1.0 (Tells RetroArch to display the overlay completely opaque.)
input_overlay_scale = 1.0 (Tells RetroArch to scale the overlay to fullscreen.)

Now, we need the values you noted down earlier when you made the overlay image. This bit tells RetroArch to display the emulator screen at a specific size and location on your monitor / TV.

Paste in the following lines (again, not the bits in brackets):

aspect_ratio_index = “22” (Tells RetroArch to use a custom “viewport”)
custom_viewport_width = “A” (Tells RetroArch the width of the emulator screen)
custom_viewport_height = “B” (Tells RetroArch the height of the emulator screen)
custom_viewport_x = “C” (Tells Retroarch how far from the left of the monitor to draw the emulator screen)
custom_viewport_y = “D” (Tells Retroarch how far from the left of the monitor to draw the emulator screen)

In place of A, B, C and D put in your own values that you measured when making the overlay image. Here’s our example:

input_overlay_enable = true
input_overlay = /home/pi/mame-overlays/simpsons.cfg
input_overlay_opacity = 1.0
input_overlay_scale = 1.0

aspect_ratio_index = “22”
custom_viewport_width = “1152”
custom_viewport_height = “864”
custom_viewport_x = “384”
custom_viewport_y = “108”

Now we just need to save the .cfg file. It needs to be saved in your ROMs folder, named the same as your ROM file with .cfg on the end INCLUDING THE ORIGINAL EXTENSION – so in our example where we use simpsons.zip, we’d save the file as simpsons.zip.cfg.

Now, when you start the game in RetroArch, it should come up with the overlay in just the right place.

This method also works for anything else that plays in RetroArch – I use an overlay for all of my consoles, to give a very slight TV curvature and to display the console’s logo and a guide to the controller hotkeys.

To apply an overlay to a whole console rather than an individual game, just follow the steps above but instead of saving a new .cfg file in the rom folder, just add or change those lines in the retroarch.cfg file in your console’s own folder in the configs directory.

TROUBLESHOOTING

There are a couple of things you can try if it’s not working, which actually apply to a lot of stuff on the Pi generally.

– Are your file permissions okay? Check you have full access to the all the configs and images by typing the following at the console:

sudo chmod -R 777 [path to your overlays folder]
sudo chmod -R 777 [path to your roms folder]

– Is the case on everything correct? Long time Linux users probably know this already, but to Linux, SIMPSONS.PNG is very different from simpsons.png. If you’re asking for one and the file’s called the other, it won’t find it.

– Are your line-endings correct in the config files? If you made your configs on a Windows system, they may well have Windows-style line endings. To change this, check them in a text editor that displays EOL (end of line) characters. I find Notepad++ really good, and it can automatically change Windows to Unix-style line endings.

Hope this is helpful to people! Any questions or issues, please feel free to reply or PM me.

[Floob]

That sounds really good! Would make a lot of the arcade games look great.
Do you apply scanlines to any of the game configs?

As a lot of games have different resolutions have you processed many in this way?

[Anonymous]

Yep, you can use any of the RetroArch cfg settings that you want to apply to just that game – all mine specify a shader I made up which gives a nice CRT effect with scanlines.

I actually made up a spreadsheet which works out the resolutions for you and automatically works out recommended dimensions to center the game window on the screen. It looks at the vertical resolution, and then works out what the horizontal resolution should be to make a 4:3 image – this means the image is slightly stretched or squashed, just as it was in the original arcade machine. There’s a column which tells you how much it’s stretched by. Using a whole number to scale vertically and then stretching or suqashing horizontally means that it automatically works well with shaders, particularly those which use scanlines.

The spreadsheet can be found here:

https://drive.google.com/open?id=0B8mrIC0c0RzqRVpaeVFRU0xsclU

Hope that’s useful.

I’ve made up a hundred or so – the ROMs I personally have in my list – and I’ve zipped them up in a file for y’all. As I said, in every game .cfg there’s also a line which tells it to use my modified shader, but that can be altered to whatever you want.

https://drive.google.com/open?id=0B8mrIC0c0RzqczdqS3o0YVdTSEU

[Floob]

Looks great – I’ll have to try them out.
Are you tempted to try a built in scanline on the overlay rather than utilising a shader?

Would you object to me wrapping your settings up in my overlay config tool?
Obviously I’d credit you in the documentation.

I presume that there is consideration needed to the actual resolution the user runs their setup in, for example it needs to be at least the size specified in the overlay config tools?

[Anonymous]

Hi Floob, sorry for the slow reply.

Please, feel free to use anything I post on these forums for anything you want – I’ve learned a lot building my RetroPie setup, ‘Lucky 13’ (finished today after about a year of work – yay!) and it’s really nice to give a bit back to the RetroPie community.

As for the issue of resolution, yeah, the resolution needs to be set when you’re working out your custom per-rom retroarch.cfg files. The overlay itself will scale to the screen size whatever resolution you’re at, but if you’ve set the pixel dimensions in the .cfg based on a different resolution to the one you’re using, you’ll find the emulator screen will be misplaced or larger or smaller than you want.

The spreadsheet I attached in my second post in this thread has a space for your screen resolution – just enter it in there and it gives appropriate values in all the different sections.

Scanlines in the overlay? Yeah, I guess you could – I’d not actually thought of that but I can’t see any reason why it wouldn’t work. If you were doing that, though, I think the image file would definitely need to be the same size as the screen resolution you’re using otherwise the scanlines would look like £$%&*.

[chainsmokertfk]

I have a quick question. Is it possible to setup either a single global bezel or single bezels for emulators (I.e. a standard GBA bezel for all GBA games, an NES bezel for NES games, etc.)?

[Floob]

Yes, you can apply an overlay (for retroarch) on a per system basis, you edit the /opt/retropie/configs/{systemname}/retroarch.cfg file.

You may find this useful

[shortbuskid]

Good day, Billy. I have poured over this post for days, with no success. First I followed your steps to add my own bezels to MAME in RetroPie. I created all the .cfg files and tested it out with no luck. I researched the web some more for a different method, but I keep coming back here. I downloaded your kit and placed everything where it should go. Still, I never get a hint of a bezel overlay.

I’m running the current stable RetroPie image, and I’m using mame4all as my MAME emulator. I made sure that your file names mirror that of the rom I’m checking, and I made sure my permissions were correct.

I’m sure there is a setting in the main retroarch cfg file that I’m missing, but I can’t for the life of me figure it out.

Any help would be greatly appreciated!

Mike

[shootersf]

You need to make sure you are using a retroarch version of mame (the ones beginning with lr-) I also found I had to switch the render res to 960×720 to line up with the OP’s overlays. But then it is amazing and has me even thinking of switching more over to retroarch as currently I use my arcade stick in mame (my Pi is built into a dreamcast arcade stick) and my controller in retroarch so that took some tweaking.

[Anonymous]

[EDIT: Sorry, I misread your post initially and it looks like you’ve already tried some of the stuff I’ve suggested. Still, the rest should still be useful for narrowing down the problem.]

Hi there shortbuskid, you’ve got perfect timing – I’ve just started coming to these forums again after a while away. If any of the menu options I’m saying are wrong or not there or anything, let me know as I’m away from my Pi at the moment and doing this from memory.

First, I know it’s a hassle, but the most common cause of this not working is either file permissions or capitalisation, so double triple quadruple check those. Also, shootersf makes a very good point that I think I forgot to mention in the OP – this does only work on RetroArch based emulators.

I don’t think your problem lies in the main RetroArch cfg file. How it works is this: First Retroarch looks at its main cfg file to get its settings. Then it looks at the one for the core it’s using – this is the one that’s in the emulator’s individual folder in the configs directory. Any settings in there take priority over the ones in the main retroarch.cfg. Then when it’s done with that, it looks for a .cfg for the individual rom it’s loading. Again, any settings in that config take priority over the ones in the other two configs. What I reckon might be happening is that for some reason it either can’t find or can’t access the cfg files for the roms you’re loading.

Without the full details of what you’ve got running I can’t say exactly what your problem is, but there are a couple of things you might try to narrow it down. It could be because RetroPie has updated since I made this guide, and I’m not sure if its new way of working breaks something in my configs.

First, we’re going to check whether the overlays themselves are working properly in the first place. go into your configs folder, and go into the folder for a different RetroArch emulator that you’ve got some games for. Let’s say SNES, everyone loves SNES games. Back up the retroarch.cfg file in there, then try adding the overlay lines into that one – the lines beginning “input_overlay_enable” and so on. It doesn’t matter which of your bezel cfgs you specify here, just one that you know exists.

Save the file and try starting a SNES game. If it comes up with the overlay on it, then we know it’s not the overlays themselves. Doesn’t matter if it’s all in the wrong places or covers the game or whatever at the moment, we just need it to appear in the first place.

If that works, scroll down.

If it doesn’t, double check all the options you’ve got there – opacity, scale and so on. If it’s a big 1080p overlay which just has a bezel at the bottom and you’re running your emulator at a much lower resolution, the bezel could be working right but you can’t see it because it’s off the bottom of the screen. Remember, you need your retroarch render resolution to be set to “Use video output resolution” in the runcommand menu to get RetroArch to use the resolution you’ve set. You can test whether the bezel is going off the bottom of the screen by setting the scale to something like 0.25 – if that was your problem, you’ll see the bezel up in the top left corner.

So, if your overlay works when it’s in the console’s retroarch.cfg but not when it’s in the individual rom’s .cfg file, try this. Go into the runcommand menu, and open up the option for using a specific per-game config file. If the contents of that rom’s .cfg file appear there, then RetroArch will see it and you’ll have to come back to me to try something else. If they don’t appear, try entering in the contents of the .cfg file into that box, then running it and see what happens.

If none of this works, please feel free to come back on here and ask again. I’ve just wiped my Pi and started over and I’m just about to do the arcade games, so if I run into anything useful I’ll let you know. If you do need more help, it’d be really useful to know:

– What model of Pi you’re using.
– What version of RetroPie you’re using.
– Whether it’s from a clean install or whether it’s upgraded from an earlier RetroPie.
– Which rom and overlay you’re testing it with (assuming it’s one of the ones I made).
– What other emulators / games you have on the system.

The more I know, the better I can help – because knowing is half the battle ;-)

[Floob]

Just leaving a reference:
https://retropie.org.uk/forum/topic/739/advancemame-bezels

[Author]

Posts