I'm making Animated Overlays for RetroArch

[Old_Skull_93]

Hello. Second thread here.

Couple months ago, I accidentally found an Overlay that would actually “react” to my Controller’s Inputs, and I was impressed because never thought something like this could be achieved in RetroArch. I began to investigate how to make my own, and when I found the answer, I decided to make Animated Overlays for all my Retro Games. The main reason for this project is because I wanted to record gameplay footage, and found that Old Games doesn’t upscale nicely in a 21:9 screen, and old aspect ratios left a lot of empty space on each side… so I thought that maybe, I could fill up those black spaces with an Animated Overlay. Now, it’s been a whole month of me working on these, and I’m requiring input and criticism before I release them to the wild.

I won’t waste your time with details… but I’ll say the following:

• These are not currently available for download.
• I need input/criticism. All the places I’ve asked thus far doesn’t go past “Where download” or “Looks nice”. Doesn’t actually help me in any way.
• This is all my personal work. I’m not stealing anything, and I’m using Inkscape to design these Overlays by hand.
• These Overlays are designed around my own limitations, that is, a 1600 x 720 resolution and only designing for the cores I’m using…
• These Overlays are designed with a 3:2 aspect ratio game view. But I also have Overlays with 4:3 aspect ratio game views. That way I can suit “Widescreen games” with 3:2 and all the classic consoles from 80’s, 90’s and early 2000’s with 4:3.

NES: I’ve designed two versions. One for a US Controller, and the other as a JAP Controller.

SNES: By far the most overworked ones. I have “Version 0, 1, 2, 3, 4, 5, 6, Stick 1, Stick 2, and Super Gameboy” but for now I’ll skip most versions and only show the first and latest versions. For every single version of a SNES Overlay I’ve designed, I’ve also recreated the US Controller counterpart, that is, with purple buttons, darker D-PAD and a lighter shell.

I’m currently experimenting with 1920 x 1080 Overlays, but they look extremely small in my Phone, but looks nice in my Laptop. So I’m unsure about these…

N64: Inspired around the GCN Controller, by far the hardest one I’ve designed because I had to figure out why the mappings wouldn’t work at all. That’s been solved, and this overlay has been designed around the Core’s behaviour.

PSX: This is by far my least favourite (probably will redo it today!) it’s so boring. Alongside this grey variant, I’ve made a black, red, blue and white versions.

ARCADE: One of my faves. It’s inspired in the old CPS1 cabinet, and my designs revolves around it. What’s more… the “Stick” uses both D-PAD and Analog Stick. So, if you use your D-PAD the Stick Animation will only move in 8 directions, and if you use your Stick, it’ll have full 360° Analog Movement. Actually, all the Overlays with Analog Stick has full 360° Analog support.

GBA: This was my secondd Overlay, and it’s somewhat abandoned. I’m trying to aim for a “Nintendo 3DS meets GBA” kind of design. Will work on it in the future. Forgot to mention that the size of the game’s view in this overlay equals to x4 the original GBA resolution.

Thus far this is nearly all the work I have (have more variants, different colors, different button positions, scrapped ideas and what not) and I’m needing input/criticism from other people. I’ve tried asking other places but all I get is “Nice” or “Download When” or “Do you have X-Y console” and I’m looking for criticism in order to improve these designs and get them ready for a proper “official release”. Please, be aware of inconsistencies in Colors, Arrangement, Symbols, etc. This is still a Work in Progress and I’m desperately needy of destructive and constructive criticism/input.

I can’t release a product that’s still unfinished! So please bear with me, and I’d like to thank you beforehand for taking the time to read through all of this.

[thingsiplay]

Giving critique to a functional “software” by just judging static images is a bit hard to do. That’s probably why you didn’t got much of “interesting discussion”.

I also looked around for some reactive layouts too before. There is something and I only played around a few times. Like you, it was for video capture. One problem I have with the existing ones are, that they overlay over the game view, instead being on the sides like your images shows. I like your approach so far and that you have special overviews for each system. Overall they do look good so far, but other than that, I am not sure what to say else. Maybe can you show a video recording?

As for the size, RetroArch has some automatic and manual resize functionality. So you might not need to do for each size. And even if you want to, you should be able to output and generate multiple sizes from one file with Inkscape. BTW lovely that you use Inkscape.

[Old_Skull_93]

Certainly! Forgot to include videos. EDIT: I’m replying with my phone, I can’t see any option to embed video to make urls appear as videos, sorry.

Here’s a “SNES USA” (don’t remember which version but I think it’s version 4) https://www.facebook.com/100084500539759/videos/1634994943853506/?mibextid=rS40aB7S9Ucbxw6v

Here’s a “SNES JAP” (same, can’t remember which version) https://www.facebook.com/100084500539759/videos/1935380020536374/?mibextid=rS40aB7S9Ucbxw6v

Here’s the GCN inspired N64: https://www.reddit.com/r/RetroArch/comments/1l33356/gcn_inspired_n64_overlay_not_using_touch_controls/?utm_source=share&utm_medium=mweb3x&utm_name=mweb3xcss&utm_term=1&utm_content=share_button

And here’s a version of SNES aimed at 4:3 aspect ratio: https://www.reddit.com/r/RetroArch/comments/1l6h3cv/snes_animated_overlay_version_2_for_43_scaling/?utm_source=share&utm_medium=mweb3x&utm_name=mweb3xcss&utm_term=1&utm_content=share_button

[thingsiplay]

Nice work. I have a Facebook allergy, so cannot comment on those. Here my immadiate thoughts on watching the video snippets:

GCN inpsired N64: Interesting idea. Maybe the L button should be on the same height as R button. The pressed state of yellow buttons are barely visible. The dpad also, the state is not very clear and good looking when pressed to me. Its hard to see which of the directions were pressed.

SNES aimed at 4:3: I like how clear the pressed state for the 4 face buttons look. But the dpad here is also not that clear.

In general, the dpads look a little bit odd. That is because only one side change, instead the entire dpad “moves”. Look at a real dpad, when you press one side down, the others go a bit up.

Maybe (in general for all buttons or currently active stick input), as long as they are pressed, a border could be added? Off course this would be configurable if possible. And if somehow possible, a letter or icon being shown as a “history line” on the bottom would be awesome. I know this is not part of your original vision, just in case it is easily possible.

[Old_Skull_93]

About D-Pads… I’m aware of that nature. The thing is that I haven’t found a way to design a D-Pad that “rocks in every direction” as it should in real life.

I’ve thought about making a 3-D Model, then export every single direction as a pre-rendered file, but even then, It’d look weirder having 8 D-Pads animate at the same time… and I don’t think this is possible… at least not with current tools and my experience with this is just of 1 month.

I’ve asked ChatGPT about possible fixes, and ChatGPT says there’s a command I could use which is called “next_target”, but for that I’d have to design a different overlay (one for each direction, including diagonals + face buttons + triggers) and basically tell RetroArch: “Hey, when I press Left, load everything again and go to this single entire overlay”. In the end it’s way too much work and if I ever do that, it won’t be for free. The “next_target” command can be used to switch between themes/colors on the go, and I don’t think “next_target” can be utilized as an actual input, at least not physically.

I’m having difficulties trying to understand what you mean in the last paragraph. You mean like, a physical border that “stops” the stick moving in a 360° fashion? Also, what you mean by “history line”?

[thingsiplay]

Hmm, I see. I have absolutely no idea how the Overlays are programmed and created (besides the images). So if its too much work, it maybe not worth it. There is already lot of work you are doing there. I mean if its functional for visualization, that’s good. Hmm about my last paragraph, there was two different ideas. I should have been more clear.

1. Because the different states for the button press (and maybe the dpad) are not very clear when pressed, my suggestion was to have a visual border over the button or dpad. That would indicate in a more clear way it is pressed. Here a little montage (not saying it has to be like this, its just an idea):

2. The second idea is a bit more involved and admittedly not related to your work. I should not have mentioned it. If its possible and only if its easy to do, I would like to see some kind of “history” of pressed buttons on the bottom, like

[Old_Skull_93]

Unfortunately the second idea is not possible.

These “animations” are very… uh… “primitive” to hadle these features, besides, the functionality of “animated” overlays are very limited within RetroArch.

I’ll try to explain clearly.

These “Animated Overlays” reacts to input, and that means, it’s limited to what RetroArch can handle as far as input goes, besides couple extra “features” like, Reset, Menu Toggle, Next Target (and this is too limited only to load other Overlays as far as I know) and probably other functions within the Core’s abilities.

In other words, if RetroArch doesn’t has a “history” feature (or other complex features) coded in itself, there’s no way to create such function with an overlay that only “reacts” to inputs. Because there’s no way to tell the Overlay to display something that’s non existent.

Your first idea of showing what’s being pressed with a frame is an easy fix, because that can be handled with the “graphics”… but it’s the first time I’ve got that requested Not saying that it’s impossible, just a bit weird for me because the least I wanted (and this is just me) is to have the overall graphics bombarded with borders/frames on every button.

Although, if that’s what you want or need, I could totally make a personal overlay just for “you” (you as in any person reading this). I can totally personalise your preferred overlay with graphic features, different positions, your Gamer Tag, your YouTube Channel logo, a preferred color scheme… so yes… those personalised overlays won’t be free because they’re going to be particular. Just something to have in mind.

[thingsiplay]

Haha, thank you for the offer of a personalized version. But that is not something I would desire, nor I think your efforts should go into. Maybe the border I showed looks blant and unpleasent. I don’t know maybe the pressed state should be a little bit more visible, a little bit more different. I do not want to push too hard into one direction, just brambling a bit some initial thoughts, seen through short videos. When I play with the Overlay, maybe its different feeling or looking after getting used to.

For the record, i am not someone who usually plays with Overlays. But especially now that I want to record some footage, such an animated overlay would be useful to have for demonstration purpose.

Is there some specific part you want to have an opinion on? If you ask specific questions, its much easier to know what you want to know. Or if you want to see reactions on their own, well you got one.^^

[Old_Skull_93]

Actually your input is very valuable.

Now I know that the D-Pad needs a bit more work, and for the record, I have at least 9 different D-Pads. But then again, there’s only so much I can do because the tools are limited. But yeah, I’m currently thinking about ways to “cheat” the animation of a real D-Pad, so I’ll focus my efforts towards that. Also now I know I need to improve my colors since it’s difficult to notice when a button is pressed (and this is when your suggestion to add a little border could come in handy).

To be honest your input is better than “Looks nice” as I’ve been having for the past weeks when I post in Reddit, so thanks for taking the time to give actual criticism

As for your last paragraph… I don’t know I’ve tried to aim for realism with my designs (which is why the SNES overlays are overworked and main reason why there’s too many)… so I guess… should I aim for better realism in textures, lightning, volume, colors… or should I keep everything simple/flat?

I’d go to improve realism, but I’ve got told in Reddit that it looks “too 3D” and it’s distracting.

[thingsiplay]

One thing for sure is, that you can’t please everyone. And I would personally not try to do everything too, and focus on one thing. I mean initial experimentation is fine, but then you should focus, just my opinion!

Well, realism with 3D effects or flat? I really can’t say one way is better than the other. It all comes down how its implemented. And I do not have a preference to one at the moment.

[Old_Skull_93]

Thanks for taking the time though!