Absolutely lost: Adapting widescreen SGB border to mGBA per shader

[IngwiePhoenix]

For the good part of the last six hours, I have been trying to add a gameboy border to mGBA. TL;DR: When in SGB mode, colors are not accurate at all (although mGBA touts accurate emulation?...) and so I need to run in GBA mode and add my own border to it instead.

Since I can not seem to find any information on the new Video Layout files, let alone examples or generic versions I could edit to fit my needs, I decided to go down the shader route. However, as I am visually impaired, I very literally never invested into any type of graphical programming - CSS being very much the peak of my knowledge in this regard.

That said, this is as far as I got:

shaders = "1"
shader0 = "../shaders_slang/border/shaders/imgborder-sgb.slang"

scale_type_x0 = "absolute"
scale_x0 = "455"
scale_type_y0 = "absolute"
scale_y0 = "256"

parameters = "box_scale;location;in_res_x;in_res_y;scale_x0;scale_y0"
box_scale = "1.000000"
location = "0.500000"
in_res_x = "160.000000"
in_res_y = "144.000000"

textures = "BORDER"
BORDER = "./Pokemon Silver (Wide).png"

The "texture":

Originally found here: https://www.reddit.com/r/emulation/comments/8xhbvs/ive_made_expanded_borders_for_pokémon_games_for/

As mentioned in the comment, I also made a version having 1px borders on either side of the image:

But, no matter which one I chose, how much I fool around with the resolution, I can not get it right. It just looks garbage:

• About 2px on the left of the main image lap over
• The text looks absolutely bad

Now, I tried to find Slang documentation to see if there was a way to either move the texture or something...but then I noticed the text being all jank. So I have been trying to figure out the resolution mGBA renders at - but to no avail.

So. After all of this jibberjabber: Please, help, my head hurts... ^^"
What am I overlooking, what can I do to make this work? I am so lost...

Thank you in advance - both for helping, and for reading all this in the first place! Have a great day!

[IngwiePhoenix]

After poking just about every setting, I found it. In the thought that others might come across something similiar:

• Set the filter to "Linear". This was the big oof moment of my night. It immediately got rid of the weird text.
• Make sure you follow TotalTS's instructions properly and add exactly 1px of a color of your chosing to each side - left and right.

Here is a complete .slangp with what I ended up with. The next problem I had faced is that the umlaut dots (ä, ö, ü) became nothing but a straight bar.

shaders = "3"
shader0 = "shaders_slang/border/shaders/imgborder-sgb.slang"
filter_linear0 = "true"
wrap_mode0 = "clamp_to_border"
mipmap_input0 = "false"
alias0 = ""
float_framebuffer0 = "false"
srgb_framebuffer0 = "false"
scale_type_x0 = "absolute"
scale_x0 = "455"
scale_type_y0 = "absolute"
scale_y0 = "256"
shader1 = "shaders_slang/omniscale/shaders/omniscale.slang"
filter_linear1 = "true"
wrap_mode1 = "clamp_to_border"
mipmap_input1 = "false"
alias1 = ""
float_framebuffer1 = "false"
srgb_framebuffer1 = "false"
shader2 = "shaders_slang/sharpen/shaders/adaptive-sharpen.slang"
filter_linear2 = "true"
wrap_mode2 = "clamp_to_border"
mipmap_input2 = "false"
alias2 = ""
float_framebuffer2 = "false"
srgb_framebuffer2 = "false"
parameters = "box_scale;location_x;location_y;in_res_x;in_res_y;border_on_top;border_zoom_x;border_zoom_y;OS_MASK_TOP;OS_MASK_BOTTOM;OS_MASK_LEFT;OS_MASK_RIGHT;CURVE_HEIGHT"
box_scale = "1.000000"
location_x = "0.500000"
location_y = "0.500000"
in_res_x = "170.000000"
in_res_y = "154.000000"
border_on_top = "1.000000"
border_zoom_x = "0.940000"
border_zoom_y = "0.930000"
OS_MASK_TOP = "0.000000"
OS_MASK_BOTTOM = "0.000000"
OS_MASK_LEFT = "0.000000"
OS_MASK_RIGHT = "0.000000"
CURVE_HEIGHT = "0.800000"
textures = "BORDER"
BORDER = "custom_slang/Pokemon Silver (Wide)+2+g.png"
BORDER_wrap_mode = "clamp_to_border"
BORDER_mipmap = "false"

Within your shaders folder, create a custom_slang folder and place the following file into it with the exact filename Pokemon Silver (Wide)+2+g.png:

Folder structure should be:

.../shaders/
| custom_slang/
| | Pokemon Silver (Wide)+2+g.png
| Pokemon Silver.slangp

I used the latest mGBA obtainable through the Online Downloader and also a compatible gbc_bios.bin (curtesy of a friend who let me dump his using a Gameboy Flash Card).

This yields these images on my end:
(Title screen)
https://matrix.ingwie.io/_matrix/media/r0/download/ingwie.io/ncOopoMjYsFccLmytSJvGMlk
(Team menu)
https://matrix.ingwie.io/_matrix/media/r0/download/ingwie.io/HAwReeoxiNQUnKwCfxbilKlz

It is still pretty jank - increasing the zoom level and going +10px on the original gameboy resolution is...hacky, at best. But, it is something that works. I am open for suggestions though, especially from those guys that actually know what they're doing :) 'Cuz I am very honestly not. I tried to make the pixels smooth out with anti aliasing shaders and sharpen the result up as good as I could.

Anyway. Hopefuly someone finds this useful. I wish there was a more accessible method to make borders like that for games with a smaller aspect ratio that doesn't fit a 1080p (1980x1020 @60Hz) screen and would leave gigantic black borders. I don't mind them, but why not put something nice in there instead? ^^

I'd be thankful for any useful resources that you might have for this! Thank you and have a great day.

[HyperspaceMadness]

Have you checked the borders folder? There are a few different shaders with borders in there.

There's also the Mega Bezel shader which does stuff with scaling and does programmatic generation of bezels. https://forums.libretro.com/t/hsm-mega-bezel-reflection-shader-feedback-and-updates

Also in general to get feedback on shaders like this it would be better to post on the forum rather than open a Github issue :)

[pokemonfan6498]

it,s possible to make borders in 400x240 resolution?