E03 - Create A Dynamic Crosshair // Make An FPS in Godot 4

-----------------------------------------------------------------------------------

-----------------------------------------------------------------------------------

0:00 The Godot FPS Project
0:27 Node Setup
1:28 Centering The Crosshair
1:53 Drawing The Center Dot
2:56 Scripting The Crosshair
3:17 Why Not Use An Image?
3:33 Setting Up Line2D Nodes
3:52 Line2D Coordinates To Use
3:58 Final Result
4:06 How To Get The Source Files
4:32 More Tutorials

-----------------------------------------------------------------------------------

This series is part of my sponsored Godot FPS Project where we will walk through how to create an 3D FPS game in Godot 4, step by step. I won't be skipping any steps in the process and everything will be sequential video to video.

This initial basic FPS setup project is available for free to download and use using the MIT license via the link below. For all future videos, the project source files will be available to my GitHub Sponsors.

Joining my Patreon in one of the 3 tiers will give you:

- access to the private Discord channel
- your name in the project README
- early access to tutorial videos
- power to vote on what mechanics get covered in future videos
- full access to the project source files to use in your own projects

-----------------------------------------------------------------------------------

#godot #godotengine #fps

[BurritoByte]

Hello StayAtHomeDev!

I wanted to thank you so much for creating and uploading this video. Without it, I would have not been able to have my functioning crosshair in my Godot 4 FPS Prototype! I recently just published a video showcasing it and added you to the credits page as a way to thank you for sharing your knowledge.

Thanks so much again and looking forward to your upcoming videos! :^)

[brewcitycook]

If anybody notices their center dot isn't being drawn and you don't use the same irregular naming conventions that is used in Godot, make sure you're naming the function "_draw()".
Not "Draw()".
Not "draw()".
You have to name it "_draw()".
It's a built in function that gets called when we do that initial queue_redraw() in _ready().

[mbg]

Love this series! I know I'm late to the party, but small critique/nitpick for future reference: the code snippet at the bottom of the screen at 2:20 visually blends a little with the (useful!) surrounding commentary. I would suggest a monospace serif font per software textbook tradition, but any visual distinction is fine. Boldface text is probably easiest imo.

[Sakunera]

Just found out after implementing aiming down sight to my project that this crosshair is actually not centred! It's origin is the top left of the CentreContainer instead of the middle, meaning everything is slightly off. If you select all the lines and adjust the transform to half the size of the CentreContainer, it will pad it out to the middle (in this case, x 20, y 20).
Thanks!

[mrhorrorface]

Hi, If you're reading this, I'd just like to say thank you for this tutorial, I now have a prototype dot for my Immersive Sim prototype. Thank you so much

[TheRealKaiProton]

I really liked this one,
short, to the point, and explained why using a sprite can be an issue, Ive tried sprites as the reticle before, and didnt know that could be an issue later when doing stuff.

[Mrtargi]

Thank you for you work! I've missed your tutorial and I've had to handle all this stuff by myself, but your explanation are really well paced and clear, please keep going!

[icodak_]

The reason the reticle is not perfectly centered is because we are drawing the lines and circle from the origin of the node: The top left
One easy way to fix this is to make its size x:0 y:0.
This won't be a problem because clip contents is disabled
Once the size is set simply set again the anchors to `center` and you'll be good to go

[johnc]

Love to see more; I'm along for the whole ride.

[streider]

For everyone where his lines can be seen at the top left. You must set the XY values to 0 in each Line2D note under Transform.

[SaturnoEdu]

Just in case anyone is wondering how to create a ring shaped crosshair instead of the " + " shaped one:

extends CenterContainer

@export var ring_radius : float = 5.0
@export var ring_color : Color = Color.WHITE
@export var ring_thickness : float = 2.0

# Called when the node enters the scene tree for the first time.
func _ready():
queue_redraw()

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _draw():
draw_arc(Vector2.ZERO, ring_radius, 0, 2 * PI, 360, ring_color, ring_thickness)

[daviddanyi]

I think it’s a bit of a stretch to call this dynamic. As far as I see it’s static in the center. It would have been good to show some interaction with the game so the size and spacing of the crosshairs are adjusted dynamically.

[maheryrazafindralambo]

For a third person shooter, I would like to know how to do a crosshair that is influenced by the character's line of sight.

When if my character aim is blocked yet my camera is not, I would like a second crosshair that is displayed on the character's aim.
(For example in Metal Geart Solid V, a second crosshair pops up when Snake's raycast and the camera raycast target is not the same due to obstacles)

[TstarBr]

oi, video muito legal mas os meus projeteis estão descentralizados com a mira (não vão para o centro da tela).
oque eu faço ?
?
(*-*)

[thomasbailey]

If you are getting an error: Expected end of statement after variable declaration, found "Literal" instead. Change line 3 to @export var DOT_RADIUS = 1.0

[Lemarc]

Not working

"No constructor of "Vector2" matches the signature "Vector2(float)"."

[andguy]

I jumped ahead and play tested the game before adding the queue_redraw() in the _ready function and it appears to still work exactly the same. What does adding queue_redraw() actually do for us?

Edit: In my curiosity I forgot to say, thank you! I'm loving this series so far and can't wait to catch up.

[jesusmora]

why not draw the lines in the _draw() function?

[Thestereomen]

my game freezes when i click play how do I fix this? Edit: nvm I just messed up my player movement code lol. good tutorial though :)

[rfraserpro]

Following your instructions, the reticle elements are off center, causing the player to experience the illusion that they are drifting to the right while walking forward and drifting to the left while walking backward. This feels absolutely horrible and will drive people insane while they try to figure out why their CONTROLS feel off.

The reticle is actually centered on the TOP LEFT (the origin) of the reticle panel, whose CENTER is in the center of the screen. Setting the size of the Reticle panel to 0, 0 fixes this specific issue.

You should really edit a few updates into these. They're great, but I didn't notice this specific issue until I was on your 8th video and it took me a LONG time to figure out why my player controller was broken.