Retroarch Draw overlay on top of Bezel

[Undertherainbow]

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

RetroArch\config\Snes9x\

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..

 

P.S

Python script requires 2.7 Python installed on your PC

 

P.P.S

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

write-in-all-text-files.zip

snes_files.zip

Edited October 20, 2019 by Undertherainbow
added info how to add more layers

[dragon57]

Very nice! I have been meaning to document this, so you saved me a lot of time and work.

What you have created is a bezel/overlay similar to what I create for my arcade cab. Here is a couple of samples.

 

[Thatman84]

Very cool. I didn’t realise they had an overlay editor. Thanks for writing and sharing 

[Thatman84]

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

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

[Undertherainbow]

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 October 20, 2019 by Undertherainbow

[Undertherainbow]

@dragon57

Yes thats it

U did more work on yours , adding front/back? covers, logo , cart? Cool.

 

[midorizou]

can u create a video tutorial of this ?