RetroPad Editor - create and edit onscreen gamepads

Valent-in · 14 October 2022 16:39

Those are relatively recent additions. Using if “Auto-Scale Overlay” option is enabled (fixes distortion on different screen aspect ratios). By default buttons are shifted to sides.

overlay0_block_x_separation = true

This will keep overall aspect ratio and add empty bars to sides in landscape orientation. I think this should be used with fullscreen background image to keep buttons aligned wit it.

overlay0_block_y_separation = true

This should be same but for portrait. And for me this option had no effect - RA always behaves like it set to true (quite outdated version though)

fercho · 14 October 2022 18:03

Perfect, so with this you can control the auto-scale overlay shifting of the elements. And thanks for confirming something that drove me crazy: i was trying to do a portrait overlay, making use of the auto-scale shifting, but (like you said), for some reason elements never shifted vertically. (does work in landscape mode) I hope this issue gets fixed sometime.

Btw i’m making good use of the editor, do you plan of adding features or updating it? cause i thought of a couple of things that could be useful. For example, when adding custom images, let them show at the top of the list/selection menu. And also adding the missing options for up|left / up|right / down|left / down|right to the selection menu/list.

Valent-in · 14 October 2022 18:30

Combo commands can be entered manually in field. I did not include them intentionally. Even some builtin overlays has strange combinations (like r2|y in nintendo64). Also more than 2 commands may be used. So list will be to long with all “common variants”

New images placed at the end of list if has new names. If name already in list it remains in place… But moving all new files to top is good idea.

hunterk · 14 October 2022 18:58

I did some digging and this appears to be intentional:

github.com

libretro/RetroArch/blob/076a1a398c77408eea7efb383ddd8ec54a380836/input/input_driver.c#L1581


{
   overlay_layout->y_scale = display_aspect_ratio /
         ol->aspect_ratio;

   if (overlay_layout->y_scale <= 0.0f)
   {
      overlay_layout->y_scale = 1.0f;
      return;
   }

   /* If Y separation is permitted and display has
    * a *landscape* orientation, move elements
    * vertically towards the edges of the screen
    * > Portrait overlays typically have all elements
    *   below the centre line, so Y separation
    *   provides no real benefit */
   if ((display_aspect_ratio > 1.0f) &&
       !ol->block_y_separation)
      overlay_layout->y_separation = ((1.0f / overlay_layout->y_scale) - 1.0f) * 0.5f;
}

If you guys are in a position to compile RA on your own, you might try removing that particular boolean check and see if it acts in a way that’s more sensible.

fercho · 9 January 2023 22:46

Thanks @hunterk for taking time to investigate this, so now we know it was intentional. My idea take benefit of the autoscale option, is to set 4 elements shifted to each corner,
When the screen resolution or RA windows changes, these elements always stay on the edges, while applying vertical and horizontal elements centered on the back, so those will fill the empty space when those border elements move from each other.

That worked great for a landscape overlay, but when i tried a portrait one, i see the elements shift to the sides or stay in the horizontal border, but stay always vertically centered. I made a 16:9 screen ratio portrait overlay @ 1080x1920, and when i tried that on a phone that has a taller screen ratio, (18,5:9) . I got a vertically centered overlay, with the screen or view port stick or shifted to the top edge. (like it does on landscape mode) just like this:

Anyways, I’m gonna put this here so maybe its useful for some one, or maybe i forget what i did:
Ended up, doing this: made the portrait overlay at the most common screen ratio used mobile phones nowadays ( 9:20 ) at a resolution of 1080x2400. On 9:20 and 9:18.5 aspect ratios screens, i set the video scaling to 4:3, and i get the game screen on place with the overlay. For a smaller aspect ratio (9:16) i set video scaling to CORE PROVIDED to fit in the overlay viewport space.

Valent-in · 4 December 2022 19:32

It did not build (dependency hell). I still have itch to do something with this… But instead of another attempt to fight it, I just created issue ticket.

Valent-in · 8 January 2023 11:04

Small update:

Color themes for easier editing dark overlays.
Show imported images at top of image list.
Auto-set screen size on overlay import/select - based on overlayXX_aspect_ratio parameter. This will NOT override manually set screen size.

MootPoint · 30 January 2023 13:33

Is there a way to add a background image in the editor itself, or do we have to add that to the overlay ourselves by editing the config file directly? Sorry if it’s a dumb question, I’m a complete novice at creating overlays.

Valent-in · 2 February 2023 10:59

Click “Create/Edit” under overlay section, then tick “Edit current overlay” checkbox. It automatically opens additional overlay parameters. Add new line with file name

overlay = your_image.png

File name should be in double quotes if contains spaces or path slashes. This is not much different from editing config - this is only shortcut for overlayXX_overlay = image.png in .cfg file

Katruk · 7 May 2023 00:11

How can I animate the controls? It’s possible?

hunterk · 7 May 2023 00:13

not exactly. You can do a sort of fake animation, though, by making a background with the pressed button state and then you cover it with an unpressed image and set it to go transparent on activation. This makes the unpressed image disappear and reveal the pressed state, which looks like animation.

Katruk · 7 May 2023 15:58

Thanks, so, I can configure which image I want to be displayed when the image is transparent according to which button I am pressing, and how that would be done?

hunterk · 7 May 2023 17:04

The existing “animated” overlays can explain it much better than I could in words

Valent-in · 8 May 2023 18:55

As has been said before - there is no straightforward way to set images for pressed/released states of button. Only thing you can do is changing image opacity on button press (alpha_mod under additional button options or overlayXX_descYY_alpha_mod parameter in .cfg file).

Common approach for animated overlays is to make background with “pressed state” button image and place real button on top of it. alpha_mod should be 0.001 or something, so button will literally disapear on press, revealing background. This method has strict limitations: overlay opacity should be 100%, can not animate whole d-pad tilt, does not work on top of game viewport…

Also after this question I’ve tested image with alpha value of 1 and button alpha_mod=255. And it works well - non-colored pixels remain transparent! This actually makes possible to show image on press instead of hide.

RakkaSei · 14 May 2023 03:06

Please excuse my poor English.

I see that by creating the image after the button is pressed with an alpha value of 1 in the image editor and setting “alpha_mod = 255” for the button in question in the configuration file, I can “compose a neutral background and a pressed button image”. It is easy for me to understand:) I think it would be possible to do something like a button that glows when pressed.

-original japanese-

つたない英語をお許しください。

ボタン押下後の画像をアルファ値にして１で画像エディタで作成し、構成ファイルの当該ボタンの"alpha_mod = 255"にすることで、「ニュートラルな背景と押されたボタン画像で構成する」ことが出来るますね。私にも理解しやすいです:) 押下時に光るボタンみたいなこともできるのではないでしょうか。

hunterk · 14 May 2023 04:27

I haven’t messed with them myself, but neil4 added some interesting new overlay components that you might be able to integrate with your tool that generate a dpad (and maybe a face button quad?) that act differently with transparency when you hit a single direction, IIRC. He also made an overlay that uses them so you can use it as a reference.

Valent-in · 15 May 2023 18:45

Yes. This method is actually suitable for outer glow effect. But using very big values for alpha_mod will cause aliasing around curved edges. So you need some workaround (dithering?).

Valent-in · 15 May 2023 18:48

abxy_area and dpad_area commands can be entered manually in editor, but maybe I’ll add those to command list later.

If I understand correctly *_area does nothing with animation - new overlays still use separate buttons for highlighting. But combining overlay0_desc0_range_mod_exclusive = true on area and overlay0_desc1_reach_x = 0 on underlaying button should exclude this button from input. And this makes possible to create fully animated d-pad: 8 images of tilted positions stacked in one place and dpad_area on top of it.

fercho · 10 July 2023 11:46

Interesting… do you know where can i read some documentation about the usage of these 2 commands? ( range_mod_exclusive and reach_x ) i’d like to play with those and see if i can make it work.

Valent-in · 12 July 2023 19:41

There was another question about this: Can anyone explain the new features dpad area? Did not find any additional docs.

Neo-retropad has dpad and abxy with those params. You may check it.

Idea is to use dpad_area for actual input and underlaying “layers” for fake animation. But I did not tested how it actualy works.