RetroPad Editor - create and edit onscreen gamepads

RetroPad Editor

Online tool to create and edit onscreen gamepads for RetroArch.

LINK: https://valent-in.github.io/retropad-editor/

  1. Import suitable .cfg file (or use default config).

  2. Delete unused overlays.

  3. Add/remove buttons.

  4. Change picture/position.

  5. Save config.

… test, make fixes, test again …

N. Play!

Features

  • Create, move, resize buttons of virtual gamepad.
  • Multiple layers; auto switch orientation for portrait overlays.
  • Generate overlay name (it’s NOT obvious that autorotation works only if overlay names contain ‘landscape’ or ‘portrait’ keyword)
  • Fix overlay aspect ratio (use aspect_ratio parameter).
  • Import image resources in addition to ‘flat’ image set.
  • Scale viewport for comfortable editing on small screens.
  • Display sensitivity range for analog sticks.
  • Duplicate overlay.
  • Raw editor for additional overlay parameters.
  • Support old format (auto normalize integer overlays. does anybody need it?).
  • Support non-fullscreen overlays and ovelayX_rect parameter (also useless things).

Some small help and tips

Bottom sliders for adjusting position and size look a bit awkward but work well. So I decided do not switch to touch-and-drag editing mode as it is not accurate.

“Import-Export” dialog allows to load existing config, additional images (multiple selection available), screenshot sample, and save your work.

“Set screen size” - set display parameters of target device and game viewport size. Actual size in pixels does not matters, only aspect ratio does. Notice that “Rescale to fit editor window” option designed to fit whole editor interface, not just gamepad view.

Config file may contain multiple overlays.

“Create/edit overlay” dialog combines both these functions (do not overload main screen with UI elements)

“Fix aspect ratio” by default shifts buttons to sides (same as RetroArch Auto-Scale Overlay option). And also writes aspect_ratio config parameter, so RetroArch can use it.

"Edit button" dialog

Command, Image, Shape - pretty obvious things but not so simple… Values can be entered manually or selected from list.

Command - contains comprehensive list of commands except keyboard keys (retrok_shift, retrok_q…) and digital-to-right-analog buttons (r_x_minus, r_x_plus, r_y_minus, r_y_plus). Commands can be combined like up|left.

Image - image filename. Additional images can be loaded via Import-Export dialog.

Shape - hitbox shape. Does not affects image. Analog sticks can not have rectangular shape.

Every some_param section is shorthand for overlayX_descY_some_param

next_target - overlay that be selected with overlay_next command. Does nothing with other commands.

range_mod - button hitbox size change on press. This will override same overlay parameter.

alpha_mod - button opacity change on press.

saturate_pct - analog sensitivity. Notice blue circle on screenshot - touch outside it (but inside hitbox) cause 100% tilt of analog. Smaller value - more sharp input.

movable - button can be dragged with finger slide. Applicable only to analog sticks. Regular buttons can not be movable.

Aaaand with some patience you can get an interesting results

Skeuomorphic design. I have no skills in this (assets from Retroarch builtin gamepads).

Weird thing. This is one of few rhythm games playable on touchscreen.

This is not a game. but still…

P.S.: This is just a sligthly edited repost. Only one small fix added to program.

Hope this will be useful

6 Likes

I needed this so much! just finished with one with lots of buttons + 8 layers, dealing with the overlay editor + editing manually on notepad + the windows screen magnifier, is such a mess… your tool is very helpful!

There is any chance to make this offline in case i dont have internet access?

Using this in future overlays, with propper credits to you, thanks so much!

Hi. For offline work you can download repository from github.

Click “code” button then “download zip”. Unpack archive then open index.html in your browser.

4 Likes

Thank you !!!