Simple Ring Crosshair

typo
Topic Author

6 years 6 months ago - 6 years 6 months ago #1 by typo Simple Ring Crosshair was created by typo

Here's a simple crosshair shader. You can add a ring, a cross, or both to the center of the screen in the size, width, and color of your choice. I'm often frustrated by the crosshair options in games and wrote this so I could have a consistent crosshair across most games. Feel free to do whatever you like with the code: it's nothing you couldn't write in an afternoon of reading documentation.

My only formal training in programming is a high school C class taken over a decade ago. If you have feedback regarding the code I'd appreciate any comments.

#include "ReShade.fxh"

uniform float size <
	ui_type = "drag";
	ui_min = 2;
	ui_max = 16;
	ui_label = "Crosshair Size";
	ui_tooltip = "Size of the crosshair in pixels";
> = 3.5;

uniform float thick <
	ui_type = "drag";
	ui_min = 0.1;
	ui_max = 4;
	ui_label = "Crosshair Thickness";
	ui_tooltip = "Thickness of the crosshair in pixels";
> = 1.5;

uniform int crosshair_color_r <
	ui_type ="drag";
	ui_min = 0;
	ui_max = 255;
	ui_label = "Crosshair color red";
	ui_tooltip = "Color Red";
> = 255;

uniform int crosshair_color_g <
	ui_type ="drag";
	ui_min = 0;
	ui_max = 255;
	ui_label = "Crosshair color green";
	ui_tooltip = "Color Green";
> = 142;

uniform int crosshair_color_b <
	ui_type ="drag";
	ui_min = 0;
	ui_max = 255;
	ui_label = "Crosshair color blue";
	ui_tooltip = "Color Blue";
> = 255;

#define crosshair_color float3( crosshair_color_r/255, crosshair_color_g/255, crosshair_color_b/255)

float3 PS_crosshairRing(float4 pos : SV_Position, float2 texcoord : TexCoord) : SV_Target {
	float3 color = tex2D(ReShade::BackBuffer, texcoord).rgb;
	float2 center = float2( (BUFFER_WIDTH / 2)-1, (BUFFER_HEIGHT / 2)-1);

	float dist_fromCenter = distance(center, pos);
	float dist_fromIdeal = abs(dist_fromCenter - size);
	float mix = max(thick - dist_fromIdeal,0) / thick;
	color = lerp(color, crosshair_color, mix);
	
	return color;
}

float3 PS_crosshairCross(float4 pos : SV_Position, float2 texcoord : TexCoord) : SV_Target {
	float3 color = tex2D(ReShade::BackBuffer, texcoord).rgb;
	float2 center = float2( (BUFFER_WIDTH / 2)-1, (BUFFER_HEIGHT / 2)-1);

	float dist_fromVertical = abs(center.x - pos.x);
	float dist_fromHorizontal = abs(center.y - pos.y);
	
	float mix;
	
	if (dist_fromVertical<dist_fromHorizontal) {
		mix = min(max(thick - dist_fromVertical,0)/thick,max(size-dist_fromHorizontal,0));
	} else {
		mix = min(max(thick - dist_fromHorizontal,0)/thick,max(size-dist_fromVertical,0));
	}

	color = lerp(color, crosshair_color, mix);
	return color;
}

technique Ring {
	pass crosshairRing {
		VertexShader=PostProcessVS;
		PixelShader=PS_crosshairRing;
	}
}

technique Cross {
	pass crosshairCross {
		VertexShader=PostProcessVS;
		PixelShader=PS_crosshairCross;
	}
}

Last edit: 6 years 6 months ago by typo. Reason: minor code fixes, added cross style crosshair

The following user(s) said Thank You: Genrix, shantor, Luci2k

Please Log in or Create an account to join the conversation.

Marty McFly

6 years 6 months ago - 6 years 6 months ago #2 by Marty McFly Replied by Marty McFly on topic Simple Ring Crosshair

We always appreciate additions

About the code, since you asked: your last expression, ret = a*(1-c)+b*c has a matching intrinsic function lerp(a, b, c) where c linearly interpolates between a and b, so it's color = lerp(color, crosshair_color, mix). Also, I never used it, but ReShade has a special UI annotation for color.

Last edit: 6 years 6 months ago by Marty McFly.

Please Log in or Create an account to join the conversation.

Chavolatra

6 years 6 months ago #3 by Chavolatra Replied by Chavolatra on topic Simple Ring Crosshair

Nice shader man

Please Log in or Create an account to join the conversation.

typo
Topic Author

6 years 6 months ago #4 by typo Replied by typo on topic Simple Ring Crosshair

Thanks, McFly! I should have expected an intrinsic function for something so simple. And thanks for all of the great shaders you've written, too.

Please Log in or Create an account to join the conversation.

XCanG

6 years 4 months ago #5 by XCanG Replied by XCanG on topic Simple Ring Crosshair

May be add more varians to your code?
Like X-crosshair, I (at top and bottom small line like roman 1), Г, triangle (like in Serious Sam) and triplet, just circle (what may be a dot if it small in size), T, ^ type (like in snipers rifle) as well ^ with line under it and crossed lines to it what is indicators for ballistic weapons, + but with dot inside and small space.

Idk, but it is possible to make this crosshairs adjustable to the movement? Like one filter with name Motion Zoom (if I correct). Or adjustible on depth? (again like in Serious Sam when it bigger on close distance and smaller on large).

Please Log in or Create an account to join the conversation.

Qu1ck

6 years 4 months ago - 6 years 4 months ago #6 by Qu1ck Replied by Qu1ck on topic Simple Ring Crosshair

hey, very nice ! but it's usless centered for me , I want to use it for Hipfire in escape from tarkov. [strike]how can I change the cross position to x=1284 y=726 (1440p)
please help, would love to use it

[/strike]

Finally I messed with some values and found what I was looking for;
float2 center = float2( (BUFFER_WIDTH / 2)+5, (BUFFER_HEIGHT / 2)+7);
if anyone else is wondering how to move crosshair location, change values after (BUFFER_WIDTH / 2) / (BUFFER_HEIGHT / 2)
( positive+ or negative- values)

Thanks for that Reshade Mod typo, Loving it!

Last edit: 6 years 4 months ago by Qu1ck.

Please Log in or Create an account to join the conversation.

431Prodigy

6 years 2 months ago #7 by 431Prodigy Replied by 431Prodigy on topic Simple Ring Crosshair

Hi, i don't mean to necro an old post however this is the most recent crosshair post i have found. How do you install this crosshair? I would like to use it however i have no knowledge regarding this.

Please Log in or Create an account to join the conversation.

RitzyBusiness

6 years 1 month ago #8 by RitzyBusiness Replied by RitzyBusiness on topic Simple Ring Crosshair

Copy code into notepad (notepad++ is better for for this imo! since you can add programming framing and colors)
Save it as "simplecrosshair.fx"
Make sure its set to load, I think in dxgi.ini

Please Log in or Create an account to join the conversation.

Rapyer

5 years 10 months ago #9 by Rapyer Replied by Rapyer on topic Simple Ring Crosshair

could you add an option to offset up and down in game? a lot of games have slightly offcenter crosshairs

Please Log in or Create an account to join the conversation.

Landorf

5 years 10 months ago #10 by Landorf Replied by Landorf on topic Simple Ring Crosshair

I think Qu1ck's post above tells you how to do it.

Please Log in or Create an account to join the conversation.

iago2019

5 years 3 months ago #11 by iago2019 Replied by iago2019 on topic Simple Ring Crosshair

I updated the code to include an in-game ability to adjust the x/y position of the ring version (bold text is new)

#include "ReShade.fxh"

uniform float horiz_offset <
ui_type = "drag";
ui_min = -25;
ui_max = 25;
ui_label = "Horizontal Offset";
ui_tooltip = "Move center of crosshair off-center side to side";
> = 5;

uniform float vert_offset <
ui_type = "drag";
ui_min = -25;
ui_max = 25;
ui_label = "Vertical Offset";
ui_tooltip = "Move center of crosshair off-center up and down";
> = 7;

uniform float size <
ui_type = "drag";
ui_min = 2;
ui_max = 16;
ui_label = "Crosshair Size";
ui_tooltip = "Size of the crosshair in pixels";
> = 14;

uniform float thick <
ui_type = "drag";
ui_min = 0.1;
ui_max = 4;
ui_label = "Crosshair Thickness";
ui_tooltip = "Thickness of the crosshair in pixels";
> = 0.5;

uniform int crosshair_color_r <
ui_type ="drag";
ui_min = 0;
ui_max = 255;
ui_label = "Crosshair color red";
ui_tooltip = "Color Red";
> = 255;

uniform int crosshair_color_g <
ui_type ="drag";
ui_min = 0;
ui_max = 255;
ui_label = "Crosshair color green";
ui_tooltip = "Color Green";
> = 142;

uniform int crosshair_color_b <
ui_type ="drag";
ui_min = 0;
ui_max = 255;
ui_label = "Crosshair color blue";
ui_tooltip = "Color Blue";
> = 255;

#define crosshair_color float3( crosshair_color_r/255, crosshair_color_g/255, crosshair_color_b/255)

float3 PS_crosshairRing(float4 pos : SV_Position, float2 texcoord : TexCoord) : SV_Target {
float3 color = tex2D(ReShade::BackBuffer, texcoord).rgb;
float2 center = float2( (BUFFER_WIDTH / 2)+horiz_offset, (BUFFER_HEIGHT / 2)+vert_offset);

float dist_fromCenter = distance(center, pos);
float dist_fromIdeal = abs(dist_fromCenter - size);
float mix = max(thick - dist_fromIdeal,0) / thick;
color = lerp(color, crosshair_color, mix);

return color;
}

float3 PS_crosshairCross(float4 pos : SV_Position, float2 texcoord : TexCoord) : SV_Target {
float3 color = tex2D(ReShade::BackBuffer, texcoord).rgb;
float2 center = float2( (BUFFER_WIDTH / 2)+5, (BUFFER_HEIGHT / 2)+7);

float dist_fromVertical = abs(center.x - pos.x);
float dist_fromHorizontal = abs(center.y - pos.y);

float mix;

if (dist_fromVertical<dist_fromHorizontal) {
mix = min(max(thick - dist_fromVertical,0)/thick,max(size-dist_fromHorizontal,0));
} else {
mix = min(max(thick - dist_fromHorizontal,0)/thick,max(size-dist_fromVertical,0));
}

color = lerp(color, crosshair_color, mix);
return color;
}

technique Ring {
pass crosshairRing {
VertexShader=PostProcessVS;
PixelShader=PS_crosshairRing;
}
}

technique Cross {
pass crosshairCross {
VertexShader=PostProcessVS;
PixelShader=PS_crosshairCross;
}
}

Please Log in or Create an account to join the conversation.