How are games made to fit in an Overlay?

RetroArch Additions Overlays
#1

Hi all, I was wondering if someone could help me with something I’ve confused with. How do I configure the screen of a game and/or the core so that it fits correctly in an Overlay? That pretty much explains everything but here’s a breakdown of what I’m doing wrong;

I go to Settings > Onscreen Overlay > Overlay Preset > nes-smb2-integer (for example). I then go run a game and it doesn’t fit, the game is bleeding over all the sides of the Overlay. As in, the game is being cut off by the non-transparent part of the overlay image. How do I move around and scale the game screen so that it fits? As a side question, can the Overlays detect anything that is running in any way? Such as the game and/or the core.

Any help would be great, thank you.

EDIT;
Here’s another example. Actually are they called Borders in RetroArch? I don’t know the difference between Borders and Overlays.

#2

For the one you’re showing you go to settings->video->integer scale ON.

But it’s up to anyone that made an overlay to adapt it to their favourite scaling, shader, fancy… you can do whatever you’re pleased with.

#3

Damn, that screenshot is actually from 2 weeks ago, I can’t find it in RetroArch anymore to switch it back on so that I can try switching interger scale ON. Oh right I see, so what you’re saying is that an overlay is only made for one games resolution? So for example, the NES SMB2 one only works with SMB2 because that game shows in a specific way in RetroArch? It can’t be changed. I mean, I guess it works with all NES games but the theme would of course not fit. So what does ‘integer scale ON’ actually do, does the emulator detect the border and fit the game screen in it accordingly?

Thanks for the reply.

EDIT; I just ran a Game Boy border with a Mega Drive core and it did infact change the size and ratio of the game screen (visible bit in the middle) so it is possible. As I’m sure the creator of the Game Boy border didn’t intend it to be ran with an MD game, so there must be some way to fit any game in any border.

#4

In addition to integer scaling, there’s also aspect ratio. IIRC, some of those border overlays were made assuming a 4:3 aspect ratio while others were intended for 1:1 PAR.

#5

Sorry, I don’t know what IIRC, integer scaling and PAR mean. Is there a manual or something for using borders and overlays? Besides; https://github.com/Themaister/RetroArch/wiki/Overlay-image-configuration. Or could any of you possibly tell me how to change the size of the game screen (on a 16:9 monitor) so that it fits with a border? Not a specific border, just how I can change them in general.

#6

IIRC = if I remember correctly; it’s a general internet abbreviation

PAR = pixel aspect ratio; you’ll notice one of the aspect ratio options in settings > video > aspect ratio says “X:Y (1:1 PAR)”. That means that it maps exactly 1 emulated pixel to exactly 1 monitor pixel, which sometimes looks weird. For example, NES/SNES are 8:7 with 1:1 PAR, which looks too skinny for some people who are used to 4:3 (the normal CRT aspect ratio). 1:1 PAR is the norm for many handhelds, though (with the Game Gear being a notable exception).

integer scale = most old consoles ran at a low resolution of approx. 240 lines (NES/SNES have 224 active lines and then 8 unused overscan lines on top and bottom). When you scale up to fit a 1080p screen, 1080 isn’t an even multiple of 240 (that is, 1080 / 240 = 4.5), so you end up with inconsistently sized pixels on the vertical axis, which causes CRT/scanline effects to look weird, Mega Man’s lifebars to look bad, etc. Integer scale rounds down to the highest whole integer scale factor (in the case of 1080p, that’s 4.0x) so none of that stuff happens. This has the side effect of leaving a bunch of unused black areas around the game and that’s what most of the overlay/borders you find online are trying to fill.

Basically, to get an overlay to fit, the first thing to try is turning on integer scale, then try fiddling with the aspect ratio. Most will either be designed around 4:3 or 1:1 PAR. The default “core-provided” aspect is a good place to start and then try the other options if that doesn’t fit. You can also try messing with the ‘custom viewport’ option but that’s probably not going to be necessary.

#7

You need to set the Aspect Ratio Index to custom and then adjust as so:

Custom Viewport X = Custom Viewport Y = Custom Viewport Width = Custom Viewport Height =

Integer Scale could be on or off depending.

This thread shows an example of an overlays viewport settings required to fit a 1080 screen.

#8

Thanks to the both of you, I will try this all out next time I have a day off from work. Might have some time on Monday.