Image behind game window

RetroArch Additions Overlays
#1

Hi guys, I have 2 questions. First, I was wondering if it would be possible to load an image in the back of the game window instead of the top like an overlay. I’ve made a lot of CRT TV overlays with alpha transparency to show some screen reflection, but I’m not really happy with the results. The transparency has to be very subtile for the visability of the game, though I want to see the screen itself instead of the default black background.

So in theory I would load the full tv image in the back of the game without cutting out the screen part and use the onscreen overlay for the reflection. That way if the game fades to black or has black parts, the tv background should show through.

To make this actually work the game window itself must have transparency on the black parts. And that brings me to my second question. Would it be possible with a shader?

#2

Not using overlays, no. You could do it with a border shader (you can specify whether the border should be on top or behind and then use the pixel’s luminance value to control the alpha), but that’s significantly more complicated than using the overlay system.

#3

Thanks, and how can I specify that a border shader should be behind the game? I’m not that familiar with coding, but if it is just a matter of changing or adding a line of code it shouldn’t be that hard :slight_smile:

#4

Unfortunately, it would take some significant modifications to the existing imgborder shader to make it do what you’re wanting.

First, you’ll need to go into shaders_cg/borders/resources and replace the imgborder.inc file with this:


/*
   Author: Themaister
   License: Public domain
*/

// Border shader :)

struct input
{
   float2 video_size;
   float2 texture_size;
   float2 output_size;
   float frame_count;
   float frame_direction;
   float frame_rotation;
};

void main_vertex
(
   float4 position : POSITION,
   out float4 oPosition : POSITION,
   uniform float4x4 modelViewProj,

   float4 color : COLOR,
   out float4 oColor : COLOR,

   float2 tex : TEXCOORD,
   out float2 oTex : TEXCOORD,

   float2 tex_border : TEXCOORD1,
   out float2 otex_border : TEXCOORD1,

   uniform input IN
)
{
   oPosition = mul(modelViewProj, position);
   oColor = color;

   float2 out_res = float2(out_res_x, out_res_y);   
   float2 corrected_size = float2(in_res_x, in_res_y);
   float2 scale = (IN.output_size / corrected_size) / box_scale;
   float2 middle = location * IN.video_size / IN.texture_size;
   float2 diff = tex.xy - middle;
   oTex = middle + diff * scale;

   middle = float2(0.5, 0.5);
   float2 dist = tex_border - middle;
   otex_border = middle + dist * IN.output_size / out_res;
}

float3 rgb2yiq(float3 col)
{
float y = 0.299 * col.r + 0.587 * col.g + 0.114 * col.b;
float u = 0.492 * (col.b - y);
float v = 0.877 * (col.r - y);
   return float3(y, u, v);
}

float4 conv_background(float4 back, float2 coord, float frame_count)
{
   return float4(back.rgb, back.a);
}

float4 main_fragment (
   float2 tex : TEXCOORD0, float2 tex_border : TEXCOORD1,
   uniform sampler2D s0 : TEXUNIT0,
   uniform sampler2D bg,
   uniform input IN) : COLOR
{
   float4 frame = tex2D(s0, tex);
   frame.a = rgb2yiq(frame.rgb).r;
   float2 fragcoord = tex.xy * (IN.texture_size.xy/IN.video_size.xy);
   float4 background = conv_background(tex2D(bg, tex_border), tex_border, IN.frame_count);
   return lerp(background, frame, frame.a);
}

Then you’ll need to go into shaders_cg/borders/[your resolution] and replace the border-[your resolution].png that’s there with your TV border image. You’ll also need to modify the shader preset cgp, but that’s going to depend on which CRT shader you’re wanting to use with it. If it’s a single-pass shader like crt-geom or crt-lottes, you can modify shaders_cg/borders/[your resolution]/imgborder.cgp to look like this (using 1080p as an example; modify it accordingly if you’re using a different res):

shaders = 2

shader0 = path/to/whatever.cg
shader1 = ../resources/imgborder-1080p.cg

textures = bg
bg = border-1080p.png

If it’s a multipass crt shader, like crt-royale, you’ll need to modify its cgp to have an additional pass that points to shaders_cg/borders/resources/imgborder-[your resolution].cg, add the path to the bg image in its available textures and set the last pass of the crt-shader (i.e., the one before the border shader) to the largest integer scale that will fit your screen. For simplicity’s sake, I recommend sticking with a single-pass CRT shader until you figure out if this is actually worth the trouble.