Jump to content
LaunchBox Community Forums

Retroarch Draw overlay on top of Bezel

Recommended Posts

Hey ppl!

I know some of u probably had idea to draw additional or multiple layers of image on top of main bezel in retroarch, like MAME or some other console? In my case it was desire to show cartridges of game i am currently playing on top of bezel without photoshoping original bezel.


Heres how.

First you need CFG file of your desired core


it would consist of cfg files for each game, example:

Addams Family, The (USA).cfg

inside should be what u probably already know , path pointing to your actual bezel work. This is how RA works so this is required.

	input_overlay = ":/overlays/GameBezels/SNES/Addams Family, The (USA).cfg"


Now comes fun part :)

Inside retroarch we have our bezels.

example RetroArch\overlays\GameBezels\SNES\Addams Family Values (USA).cfg

which is accompanied by its png bezel Addams Family Values (USA).png

Basic stuff, just wanted to get it out of the way.

And now here is what we do to get multiple images drawn on top of our main bezel

In my case i will use one main bezel for every game accompanied by additional images (cartridges for each game)

So i write

overlays = 1
overlay0_full_screen = true
overlay0_normalized = true
overlay0_range_mod = 1.5
overlay0_alpha_mod = 0.0001
overlay0_overlay = SNES_PAL_MAIN_BEZEL.png
overlay0_descs = 1
overlay0_desc0 = "cart,0.839924,0.813324,rect,0.115484,0.0864266"
overlay0_desc0_overlay = "Addams Family Values (USA).png"

I did not get permission from author of bezel i did this for, so i cannot show u pictures , but i will help with cfg files and script to write them.

Let me explain cfg first.

overlay0_overlay = SNES_PAL_MAIN_BEZEL.png

This is MAIN Bezel , for screen.

overlay0_desc0_overlay = "Addams Family Values (USA).png"

This is actual layer image

overlay0_desc0 = "cart,0.839924,0.813324,rect,0.115484,0.0864266"

This is position of second layer image


Some my wonder how to get those numbers for position?

Go to Retroarch , Online update->content downloader->utilities->overlay editor.  download retroarch overlay editor.(Editor can then be found in download folder within retroarch

First click actions and set canvas size. Position elements where u want them and u get position

Doing this for zilion games is kinda crazy.. but if u like me just want basic one Bezel and cartridges on top, this will do quick work. (This can also be used for multiple layers on one overlay)

Result is very ugly mockup image. and for every game :)

What python script does? it writes info in your pre made cfg files for your games. Feel free to open it up and edit.

Put name of your main bezel inside and thats it. Py will write filename.png which will be your cartidges and rest of info.


I hope i was clear enough ..you'll have to forgive my English its not my main language..



Python script requires 2.7 Python installed on your PC



If you want to add more layers, this is how:

All you have to do is ..

overlay0_descs = X

X=update the ammount of layers

And then just add new button layers with their position and file name

overlay0_desc1 = "new_layer0,x.xxx,x.xxxx,rect,x.xxx,x.xx"
overlay0_desc1_overlay = some_layerX.png

overlay0_desc2 = "new_layer1,x.xxx,x.xxxx,rect,x.xxx,x.xx"
overlay0_desc2_overlay = some_layerY.png


@Thatman84 i saw u were asking for this on libretro forums




Edited by Undertherainbow
added info how to add more layers
Link to post
Share on other sites
1 hour ago, Thatman84 said:

Go to Retroarch , updates, MISC and download retroarch overlay editor.

where about sis this? In the app or a website?

In app, Online update->content downloader->utilities->overlay editor.

This actually worked before , that second overlay is treated as button, one can have as many buttons as they want

Editor can then be found in downloads folder in within retroarch

Edited by Undertherainbow
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...