RetroPad Editor - create and edit onscreen gamepads

RetroArch Additions Overlays
#35

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.

1 Like
#36

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"にすることで、「ニュートラルな背景と押されたボタン画像で構成する」ことが出来るますね。私にも理解しやすいです:) 押下時に光るボタンみたいなこともできるのではないでしょうか。

#37

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.

#38

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

#39

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.

2 Likes
#40

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.

1 Like
#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.

1 Like
#42

and sometimes reply button does not work

#43

Also i made some updates: now it is possible to manipulate multiple buttons. Mouse drag or two-finger tap to select area.

…but can not edit topic header to add this.

1 Like
#44

I have seen that post. And as you mentioned there, i couldn’t find (or understand) more use for those new functions, Than touchscreen usability. And not much related to overlay images. Maybe we need to ask the implementators, if this could be achieved or maybe give us a sample overlay config. (I’ll chek thioe two “neo” overlays mentioned there, but i doubt that they use custom images for dpad button presses. Also Thanks for keeping the overlay editor updated and adding new features!

#46

Hi everyone on this forum. I don’t know if this is the right place to ask this question. The question I want to ask has to do with the activation of the translation service in real time in a game through hotkeys or shortcuts; I am asking about this because on an Android device I have not been able to run the real-time translation because all hotkey settings are available for peripherals, ie input devices for desktops, laptops, etc; such as keyboards, mouse, joystick among others; but the touch screen option is not enabled to be able to configure a button or combinations of emulated controller buttons on the same touch screen (gamepad or emulated controller as an overlay) to be able to activate real-time translation in a given game. In a nutshell I have not been able to enable real-time translation in any game (eg NES games) in Retroarch 1.15.0. I have already enabled all the necessary configuration to run the IA Service through a zTranslate api. So I’m wondering: Does IA Service work on an Android smartphone? Thank you all in advance for your patience and understanding.

#47

if i want add button command let say ai_service and at the same time button pressed it changed the overlay…how to do that?

#48

Hi. This has been answered by muttsuenem already - button with ai_service command should toggle Ai Service.

Source file that may be used as command reference: https://github.com/libretro/RetroArch/blob/master/configuration.c#L281

#49

Create separate buttons for each command with same size and position. Linking with | does not work with overlay_next.

#50

No, there is nothing like that. But this is an example use of new features.

I did some small testing and it works as expected. When button placed within dpad_area hitbox it become unreachable - range_mod_exclusive just blocks other buttons. So it is possible to create button with image “dpad tilted to left” and with left command. It will not be clickable when stacked with dpad_area but will be highlighted when left side of area clicked.

reach_x looks redundant… added just for reliability I guess.

Cumbersome approach, I know. And also 8 dpad layers in all tilted positions with 1 opacity may cause “ghosting”… And also diagonal ones should be placed on top and should have non-transparent background.

1 Like
#51

@Valent-in Thank you for the RetroPad Editor, it became really easy for people like me, that does’t understand programimg so much to personalize the overlays.

But I’m struggling with fitting the overlay to the game display. Is there any code or something I can do to this became automatically? Like, if i change cellphones with different display or change the game aspect ratio the overlay fit perfectly?

What I did was, taking a screenshot from the game, both portrait and landscape, with core provided aspect ratio, and work with the image on the photoshop. But just fit perfectly on my old phone, the other with higher resolution became stretched and I had to spend a lot of time trying to fit manually on retroarch.

I want to share my overlays with the community but first I need to make this work, here’s an exemple (the art wasn’t made by me):

Screenshot (24 de out de 2023 15 52 13)
Screenshot (24 de out de 2023 15 52 13)1080×1920 374 KB

#53

Hi!

There is “auto scale overlay” in RA settings - check it to keep aspect ratio. This will add black bars if screen has another aspect ratio than overlay target. Also if background image set as overlay0_overlay=img.png in config it will not fit button positions. Solution is to create button with null command and assign background image to it.

You may use this “unfunctional button” hack to assemble background from different image parts so it will fill screen on different aspect ratios (look at neo-retropad - it’s dpad sticks to left side in landscape when autoscale enabled)

1 Like
#54

@Valent-in Nice, I hadn’t thought of that, I’ll try it, thanks Valent-in!

#55

God, I’ll have to do it all over again :cold_sweat:

#56

Valent-in, I sent you a private msg asking for more help, I don’t want to share the overlays here before finishing.