Thursday, September 13, 2012

Background Shader for RetroArch

UPDATE (9/18/2012): It turns out the Themaister already wrote a waaay better version of this shader that can do some cool things like move the location of the game window and scale to arbitrary scale factors (i.e., not just even integers). I also made another old TV background:
If you'd like to try Themaister's version of the shader--which I've provided as-is, as well as combined with flat and curved CRT shaders--you can download it and the above TV background here:

UPDATE (9/26/2012): Another one by request, using Super Metroid's Japanese artwork:

Original Post:

I've been working on a fun little pixel shader for use with RetroArch that functions similarly to the Cg border shader but using GLSL and the XML shader format. The way it works is that it combines the functionality of the existing integer scale shader with a lookup texture (LUT) that loads an external texture and then combines that image with the rendered game image. The LUT then has a transparent window in the middle where you can see the game peeking through.

In the simplest application, you can put whatever fancy stuff you want around the game window, like this awesome pixel-art border created by FirebrandX (NOTE: all of these look better in actual use; the way I took the screenshots caused the game's vertical resolution to get cut off by the border a bit):

By using RetroArch's awesome multipass shader support, you can also tack on some fun effects, like cgwg's CRT shader and some high-resolution artwork:

We can also do fun stuff like this TV border:

And we can use the transparency of the background image to overlay things across the game, like this Super Mario Bros 2 border, which has the characters overlapping a bit:

You can download these and others here:

To use the shader, you'll need to uncheck the 'Lock Aspect Ratio' option in RetroArch, under 'Video' and put the desired background image in the same folder as the shader with filename 'background.png.' The backgrounds only work with specific monitor resolutions, so I've included 1080p versions of the ones pictured above, while FirebrandX was kind enough to make several iterations of his sweet pixel-art backgrounds that work at their specified resolutions. I've also included several background-compatible shaders, including the raw shader, ones with cgwg's CRT+NTSC-RGB (both flat and curved varieties) and some with cgwg's CRT+NTSC-RF (both flat and curved varieties).

In case you'd like to make your own, I've also included a simple template (in PSD format) for 1080p resolutions.


Fleedar said...

This looks fantastic! I must be behind the curve, but have cgwg's CRT shaders always added NTSC blurring?

Hunter K. said...

No, as a matter of fact, I just got that hooked in the other day. :)

Unknown said...

Hey there! I’m the developer of Boxer, a DOSBox fork for the Mac.

I've been following BSNES shader development for a while from your blog, and you may be interested to know that the upcoming Boxer 1.4 has adopted BSNES GLSL shader support. (1.4 isn't released yet, but can be built from source.) There's currently no UI for adding arbitrary shaders, but it comes with Hyllian's 5xBR shader and cgwg's crt-geom-interlaced shader (the latest versions I could get my hands on.)

This is particularly relevant because have just released a slew of DOS games for the Mac, using a custom fork of Boxer 1.4pre which includes these shaders: so they can be seen in action right now. There’s a writeup of the releases on my blog.

I wanted to put in a word of thanks here for showcasing these shaders, and also to ask if you could put me in touch directly with cgwg and Hyllian so I could give them my personal thanks (and my apologies for not notifying them ahead of time that Boxer includes their shaders.)

Hunter K. said...

Wow, that's really great! I'm glad to see these shaders getting some wider adoption :D

Probably the best/easiest way to get in touch with them is by sending a PM from byuu's forum. I know Hyllian visits there pretty regularly and cgwg shows up sometimes, as well.

If you don't have an account there, let me know and I can PM them for you. I think there's a delay or minimum number of posts or something before you get PM rights to prevent PM spam.

If you do have an account but don't get a response from cgwg right away, you might also try him over at Richard Bannister's forums where he's posted some MAME shader stuff. Hyllian also frequents the #ssnes and #retroarch channels on Freenode IRC.

I'm sure neither will mind the lack of prior notice. AFAIK, all of the shaders I've covered are licensed GPL or public domain, so no notice/permission is required. We've seen them pop up in other projects before and no one took any offense.

If I talk to either of them before you get a chance, I'll let them know you're looking for them. :)

eadmaster said...

is it possible to write a shader that compute the average background color of the current scene and changes the border color accordingly?
(i'm interested in this for LCD screensaving purposes)

Hunter K. said...

Something like that would be possible, I think, but it might be faster/easier to just have a cycling color palette so it doesn't have to calculate across a huge number of pixels.

Julian said...

Hi. Great post. But i have a question, i cant use the background shader with the cpu-filters (the RF IS AWESOME) If i use only the shaders of Retroarch, works great (4:3 correct ratio) but the cpu filters instantly stretch to fullscreen (1920x1080).

How can i use the bnes filters in 4:3? so it can adjust the correct ratio of the border shader?


Hunter K. said...

Hi Julian,
Your best bet is probably to skip the border shader part and use the android overlay functionality to load the border instead, then you can have the filter and any other shaders running independently.

The process for doing that is kinda hacky, so I should probably do an entire post on it, but the short version is: open your retroarch.cfg and add a line:
input_overlay = "path/to/overlay.cfg"
That overlay cfg can point to a border file instead of the normal button overlay that it uses for touchscreen inputs.

Using this info, you're welcome to try and muddle through it. Otherwise, keep an eye on my blog and I'll get a new post up explaining the process in the next couple of days.

Julian said...

Thanks!! But i'm running retroarch on my Win7, not on android!

I'll wait for your post!

Hunter K. said...

That's the beauty of RetroArch: if you can use a feature on android, you can use it on PC, as well :D

In fact, it appears that you can already select overlays from RGUI (the menu that comes up when you hit F1), under 'Input Options.'

So, just make a blank text file named border.cfg and put these lines into it:
overlays = 1

overlay0_overlay = border.png

overlay0_full_screen = true

overlay0_descs = 0

Then, you can drop a png image named 'border.png' into the same directory as your cfg file and navigate to it from the overlay setting in RGUI.

The existing borders I've posted are designed to work with non-4:3 scaling, so they'll need a little tweaking, but this should get you setup. Also, you'll want to check the box to lock aspect ratio.

I'll still try to make a new post that goes into more detail soon. :)

Julian said...

Maybe i'm a noob haha, but when i use the shaders from retroarch it looks correctly like this:

When i use the cpu filter (and your .cfg...THANKS FOR THAT ANYWAY!!!) it looks like this:

Hunter K. said...

It looks like you didn't check the box to lock the aspect ratio and/or that you didn't set the aspect to auto/4:3/whatever.

If you're trying to use a border that has things at the top/bottom (like the old TV from your screenshots), you'll also need to check the box in RetroArch-Phoenix's 'video settings' to force integer scaling. The aspect and integer scaling are traditionally taken care of by the border shader, but since it's out of the picture in this case, we have to handle it in RetroArch itself.

I'll get that post written this weekend if you still have problems.

Julian said...

Well, the problem is still there. With lock aspect ratio and integer scale, the border (the .png) is cropped to 4:3. But the game is streched.

In the other hand, i use OpenGL as the renderer, but if i use direct3d, the game is locked correctly (i suppose because your tv border doesn't seems to be 4:3) but in direct3d there is NO BORDER!! opengl, let's forget about the border, it works GREAT. The issue is with the cpufilter NTSC-RF.filter. without it, everything works great. But i really like that CRAP effect!!!


Hunter K. said...

Hmm. I'm not sure what's up, then. It's working fine here with opengl, integer scale and lock aspect checked. With and without NTSC-RF look identical (minus the effect, of course).

Mischa Watchel said...

Hey, I was hoping you could help me as I cant find any info anywhere. Is it possible to change the background image and filter in RetroArch for Wii? Id like to make some of my own and share them, any help you could give me would be appreciated. Thanks :)

NewYears1978 said...

Looking god :) Did you happen to do any for PSX?

Also can anyone tell me how once you select a shader in retroarch you can select NO shade..there seems to be no option for that.

Analytics Tracking Footer