NINTENDO "NES" - Animated Overlay

RetroArch Additions Overlays
#1
UPDATE 1.1 READY!
  • FIXED FLASHING NON BUTTON AREAS
  • FIXED VISIBLE LINES AROUND THE ALTERNATIVE/AMERICAN NINTENDO FONT TEXT (NINTENDO LOGOS VERSION ONLY)
  • PORTRAIT AND LANDSCAPE MODES NOW COMES IN SEPARATED FILES (so the auto-rotation thing won´t work, also the upper switch was removed)

With this, the finished file will be smaller, and also it’s easier for me to create/edit/fix stuff inside, also adds flexibility, so no need to reuse/resize buttons in the future)

  • 1920X1080 FHD Resolution
  • Fully compatible with the overlay AUTO-SCALE option
  • Animated controller buttons
  • Optional In-screen tube borders (bezel)
  • Dark Theme
  • Animated Fast-Forward Button (only on portrait mode)
  • MEGA BEZEL PRESETS (Light and Dark)

DOWNLOAD LINKS

WITH NINTENDO LOGOS

LANDSCAPE MODE

PORTRAIT MODE

WITH RETROARCH LOGOS

LANDSCAPE MODE

PORTRAIT MODE

MEGA BEZEL PRESETS

DARK

LIGHT

l---dark-2
l---dark-21920×1920 211 KB
l---light-2
l---light-21920×1920 142 KB
p---ight-dark
p---ight-dark1920×1920 187 KB

RECOMMENDED LANDSCAPE MODE SETTINGS

OVERLAY SETTINGS:

  • Enable the AUTO SCALE OVERLAY option. As this overlay is made by elements that stick to the edges, no matter what resolution is used. With this, the overlay won’t look deformed if it’s not used on a 16:9 display.

  • On the overlay settings set the OVERLAY OPACITY TO 1.0

VIDEO SCALING FOR LANDSCAPE/HORIZONTAL MODE For an aspect ratio screen of 16:9 set the video scaling to 4:3 non integer. And go Full screen.

RECOMMENDED PORTRAIT MODE SETTINGS

VIDEO SCALING FOR PORTRAIT MODE For some reason, Auto scaling for portrait overlays is only functional in horizontal elements. Meaning that vertical elements, wont align or stick to the top and bottom of the display. With this in mind, i made the portrait overlay with only horizontal elements. I tested this overlay on phones with screens of an aspect ratio of 16:9, 18.5:9 and 20:9. With these results: *** On a screen ratio display of 16:9 set video scaling to 16:10** *** On a screen ratio of 18.5:9 and 20:9 set video scaling to 4:3**

NOTE ABOUT ANIMATED RESET AND FAST FORWARD BUTTONS RetroArch only allows to “animate” controller buttons, so to “cheat” this limitation, and create an animated non controller buttons, i used a combination of controller buttons. For example if you push in you controller the buttons R3+Y you’ll see the reset button animate, but the emulator won’t reset. (set a combination hotkey if you want it to).

For the FAST FORWARD button, i set it to the R2 button, as i use that button in general for that function.

10 Likes
Handheld Touch Overlays?
#2

Looking great to be honest, nothing to complain about. Now the collection is completed thanks to your amazing work.

God bless you for such an interesting and amazing feature for retro-experience!

1 Like
#3

Can you animate the Dpad as a whole object?

Normally when you press any side, the others should move accordingly. As it is now it looks a bit weird. Though not sure if you can do anything about it.

Looks great otherwise.

1 Like
#4

oh man, you managed to work around the auto-scaling! nice work :slight_smile:

Can you animate the Dpad as a whole object?

I haven’t figured out any way to do so, no. If you treat it as a whole object, you can only do one animation, since it’s not really animation, it’s just using conditional transparency to show something underneath when you press it.

1 Like
#5

I haven’t played with the overlay system too much so I’ll ask my noob questions ;).

Could it do layered transparencies? Like have a all 4 directions layered on top of each other with some parts semi transparent? So when you press right the left gets darker or something like that?

#6

dunno, maybe :man_shrugging: I’ve tried a few things like that with no luck (I’ve also tried using negative transparency values, which apparently doesn’t work), but someone else may come up with something clever

2 Likes
#7

Like @hunterk said. There is no way. As the images you see when the dpad is in not-pressed state. Are shown in screen. And when you press it, It gets transparent. Besides that, the other conflict to recreate that fully dpad, is that every button area cannot overlap with anyother button.

2 Likes
#8

Yeah… kinda… Though you gotta use a different video scaling. Maybe if the autoscaling was enabled for the vertical positioning, the same video scaling could be used. (The Viewport stays aligned to top edge anyways). Maybe that was disabled in a time where all phones/tablets where the same height i guess…

1 Like
#9

That woukd work. But unfortunately buttons can’t overlap with eachother. :pensive:

1 Like
#10

Yeah ! Negative values ! If only the alpha setting could hide instead of showing the image on the “press action”.

1 Like
#11

These animated Overlays are really excellent, great job! :slight_smile: I’ve been using the PS1 Overlay ever since I found it. I have made a GB Overlay but it isn’t animated but I would like it to be. If I were to upload it could you animate it for me please? I’ve looked at one of the animated cfg files but I can made heads or tails of it :stuck_out_tongue: It would only be the dpad, the A and B buttons and Start, Select.

#12

The animation works by having a static image in the background with everything “pressed”, and then you cover it with “un-pressed” images such that when you press them, the unpressed image becomes transparent, revealing the pressed image underneath.

1 Like
#13

Ok that makes sense but what about the cfg? how do you go fill that out? I assume its positions and such but where do you get the numbers from?

#14

those are normalized coordinates. You can find the input overlay documentation here: https://docs.libretro.com/development/retroarch/input/overlay/

3 Likes
#15

Thank You, looks like I got some reading to do :slight_smile:

1 Like
#16

Wow that was a pain :stuck_out_tongue: but I’ve done it :slight_smile: it took ages, I couldn’t figure out a good way of getting the png positions… I basically had to guess then check on pc then rinse and repeat until I got the Dpad/Buttons/Start/Select dialed in… I bet there’s an easy way of doing it but I couldn’t figure it out.

Never Again! lol

2 Likes
#17

heh, i don’t know of any better way, either. Every overlay I’ve made has been trial-and-error.

2 Likes
#18

hey! well you experienced what i was about to reply in your first post, it is really time consuming and you need a lot of patience to get the images on the right spot/size.

like @hunterk said, check the documentation in the link he pointed out, and also i suggest you to use a basic animated overlay to learn how it works, i used the default nes one.

also use this great tool by @Valent-in

3 Likes
#19

I did read the doc Hunter posted (thanks btw) it just didnt help with finding the right png positions. I did use the nes animated overlay as a base, it actually helped alot :slight_smile:
Thanks for the tool link, if I ever attempt another overlay I’ll check it out!

GB
GB1920×967 120 KB

It shows black bars when I load the overlay on my laptop, but on WiiU (TV and Gamepad) the bars are not there.

3 Likes
#20

looking good! and the tool is a SAVIOR!

2 Likes