Uborder shaders

I was trying to set up some vertical uborder presets but to make it work I have to turn on vertical mode in fbneo core’s options, is there another way, within the shader, to rotate the image?

2 Likes

In the next version I’ll change the method. For now, in fact, you need to turn Vertical Mode ON on core options. I’ll change that to read the uniform Rotation and auto rotate according to that.

5 Likes

Another showcase from Android. This time I didn’t use the “FULL” aspect ratio which messed up the view in portrait orientation. Instead here I use core provided aspect ratio with integer scaling, combined with bezel that seamlessly connects to the overlay. This way it works on landscape mode:

landscape-unicorn

And it works as well in portrait orientation:

3 Likes

New release: Uborder-v0.0.3

What’s new:

  • Reflections code rewritten to include new operations like corner, warp, screen stain alpha transparencies, etc;
  • Auto rotation for vertical games based on Rotation uniform.
  • Downsampling presets that uses @guest.r g-sharp2_resampler for games running at High Internal Resolution (2x, 3x and 4x included);
  • New Spooky TV textures/presets: Silent-Hill (with screen stain transparencies);
  • Spooky Tv presets now has reflections;
  • Borders and Contents packs updated.

Screens:

mspacman-241208-120958 mspacman-241208-120941 centiped-241208-120602 centiped-241208-120548 1943-241208-115626 1943-241208-115545 dkong-241208-115338 dkong-241208-115326 dkong-241208-115311 arkanoid-241208-115018 arkanoid-241208-114948

8 Likes

TUTORIAL UBORDER - Creating Your Own Preset: The Easy Method

With the latest release, it’s a great time to explain how to use some parameters to create your own custom preset featuring the background of your choice.

This tutorial is designed to be simple. We’ll start by using a pre-existing, well-aligned border created by Duimon. It’s already centered, with bezels and with frontal and symmetrical view. Our main task will be adjusting the frame and reflections to match the border. Let’s begin!

Steps

1. Choose Your Border

From the Duimon-Mega-Bezel-Potato pack, I’ve chosen a Neo Geo AES background as an example. Copy this border into the uborder_packs/Spooky TVs/border folder:

te01

te02

2. Duplicate and Rename the Preset

Inside the uborder_packs/Spooky TVs folder, copy the Spooky TVs.slangp preset and rename it appropriately for your new border:

te04 - preset renamed

3. Open the Preset

Open your newly renamed preset. You’ll see several parameters, set to work with the original spooky.jpg border:

4. Update the Border Parameter

Edit the BORDER parameter to point to your new Neo Geo border:

te05 - border image modified

5. Load and Test the Preset

Launch Retroarch, load a test screen (e.g., the 240p test pattern), and apply the preset. You’ll notice that the image and reflections are misaligned:

This is where many people struggle and give up. Let’s fix it!

6. Enable Reflection Adjustment View

Activate the Reflection Adjust View parameter. This will display the reflection bars, making them easier to align:

Here, you’ll see most of the reflection bars are hidden behind the frame.

7. Make Reflections Visible

Adjust the reflection parameters (e.g., width, height, center, and thickness) to make the bars visible. In this case, the bars end up centralized because we’re using a well-designed background from Duimon:

8. Adjust the Frame and Curvature

Next, tweak the FRAME and GEOM'S CURVATURE parameters to fit the frame within the border’s screen. The red-highlighted parameters in the image below are the ones to modify:

9. Align Reflection Bars with the Bezel

Now, adjust the reflection parameters (highlighted in red below) to position the reflection bars next to the frame:

10. Preview the Final Reflections

Disable Reflection Adjust View to see the final reflections. You can increase the reflection strength parameter to make them more prominent. The result should look like this:

11. Save and Update the Preset

Save your progress as a simple preset. Then, copy the updated parameters from the simple preset into your original preset. Be sure NOT to delete the original parameters—just update them with the new values:

12. Finalize Your Preset

Finally, round off any parameters as needed. Retroarch occasionally introduces rounding inconsistencies, so this step ensures a cleaner preset:

Conclusion

That’s it! When you load the original preset, the border and reflections should now align perfectly. This method works best with well-designed borders, such as those by Duimon. For random TV images or misaligned backgrounds, additional tweaks may be necessary.

Enjoy creating your custom presets! If you have questions, feel free to ask. :blush:

4 Likes

Just tried and I couldn’t make it work.

I did the update from online updater and copied over borders_pack-24-12-08 & content_shaders_pack-24-12-08

1 Like

Which game? Which preset? Core?

This is a feature that needs more tests. I made it work with some arcade games on FB Neo only.

1 Like

FBneo, I loaded FB-Neo_Vertical.slangp (from duimon’s potato presets)

Setting TATE -> 0

does rotate the game but not the background

1 Like

Sorry, I didn’t update RA repo yet. I just updated my repo.

Go to my repo and update your uborder to v0.0.3. You’re using 0.0.2 from RA repo.

I’ll update RA repo in the next days if I don’t find any bugs.

3 Likes

oh, ok! I thought that update was already live! I’ll check your repo!

EDIT:

copied over new version and it seems to work properly with tate=0 :+1:

3 Likes

You reminded me now that I had forgotten to unset that param. It should rotate automatically. I just updated the borders pack now. You don’t need to set that param, the game will rotate seamlessly. That param is just a last resort.

3 Likes

Nice, I will try later!

One question:

is it correct that changing Reflection_Center X/Y, it moves not just the reflection but also the games-screen as well?

1 Like

Yes. At first I thought it shouldn’t, but everything I tried to move without the frame resulted in wrong reflections, so I fixed it. The procedure you should follow now is: first move the frame (using frame centering params) into the center reflection bars, then use the reflection centering to move frame/bars to their final position. After that, use other params to zoom in/out the frame to desired size and reflection params to adjust the bars (size, thickness, warp, etc).

If I find a way to work without that constraint, I’ll update it.

2 Likes

I think I got it, and it’s working! :nerd_face:

Tate set to 0

Just mind that presets from uborders pack have tate set to 1 and switching to 0 rotate the image but not the reflection, I tried FB-Neo_Vertical.slangp (also I don’t think it cendered)

3 Likes

Not anymore. As I said earlier, I’ve updated the border’s pack with those vertical presets with rotate param set to 0.

1 Like

I’ve just downloaded borders_pack-24-12-08.zip

1 Like

Holy! I just saw I forgot one preset. Thanks. I’ll update now. CAB_Vertical is correct, though.

EDIT: Now it’s updated and fixed. Thanks for the tests!

2 Likes

Tate is now 0 but centering and reflection are not correct I think:

Try this settings for: Arcade_Vertical.slangp, FB-Neo_Vertical & MAME_Vertical.slangp

geom_center_y = "0.000000"
bezel_center_y = "0.000000"

reflection_scr_distance_x = "-0.023000"
reflection_scr_distance_y = "-0.032000"

frame_w = "0.812996"
frame_h = "0.338000"
bezel_w = "0.095000"
bezel_h = "0.066000"

reflection_strength = "0.070000"
1 Like

Ok, I’ve noticed that. Looks like I calibrated using a non-vertical game, LOL. I just fixed it and updated border’s pack one more time. Thanks.

3 Likes

Seems all good now! :nerd_face:

no prob!

1 Like