Problem making GUI crosshair

Help and Feedback Scripting Support
#1

I’m trying to replace the players cursor with a ImageLabel inside a ScreenGUI

--This is the code inside my ScreenGUI
local Players = game:GetService("Players")
local Player = Players.LocalPlayer
local Mouse = Player:GetMouse()
local GUI = script.Parent
Mouse.Icon = "http://www.roblox.com/asset/?id=2300836745"
GUI.Enabled = true

This is my code so far basically it’s just setting the actual mouse icon to a blank image so there simply isn’t one. The image label uses my real crosshair image. Now you may be wondering why I don’t just change the Mouse.Icon to the image I want to use, and there’s a couple reasons for that.

First of all I noticed when I do just change the mouse icon to the image I want to use the icon would move a pixel when I would click, and then back a pixel when I move the mouse. This is undesirable in an FPS game, and I don’t know how to fix it.

Secondly I figure using a GUI would allow more customization and more easily anyway.

Now if you disagree with these points and know how I can fix the first issue then by all means explain away, but for now I’m trying to use a GUI.

The problem I’m currently trying to fix with the GUI is basically that I’m struggling to get the image to the proper center of the screen. Here’s an image showing what I’m talking about:

crosshair

The ImageLabel is a size of 100x100 and set directly inside of my ScreenGUI. I’ve set it’s position to {0.5, -50},{0.5, -50}. Which my understanding is that it should be perfectly centered, but as you can see that is clearly not the case. I’m trying to get my GUI crosshair to be directly inside the real mouse cursor. In fact I believe the ImageLabel IS centered on the X axis, but not the Y axis. Perhaps the reason is because of the roblox bar at the top of the screen?

Anyway the other problem I need to fix that you may see in the image is when I set the ScaleType of the GUI to Crop it actually does center the image horizontally, but still not vertically which I’m unsure of how to fix ALSO on this scaletype the image looks crappy and blurry. Now if I change the ScaleType to Slice the image looks right, but now it’s not centered vertically OR horiztonally!

Sorry if my post is long-winded for what is likely a relatively simple problem.

2 Likes
#2

So I haven’t really used offeset and scale together in a UI before because I always found it frustrating to figure out. Have you tried doing just {0.5, 0}{0.5, 0}? If you do this for any GUI, it’s always in the center so I don’t see why you might need to add an offset too.

2 Likes
#3

Thanks for the reply I did actually try that, but the reason I need the offset is because the position {0.5, 0}{0.5, 0} puts the top left corner of the ImageLabel in the middle not the middle. So I then offset by half the imageLabels width and height to get the middle in the middle if that makes sense. I don’t know of any way to set the center of the imageLabel is it’s origin point.

2 Likes
#4

Oh in that case just set the anchor point of frame to {0.5, 0.5} and that should work.

2 Likes
#5

Thanks that helps I don’t need the offset anymore, but the image still is not at the center of the image label, so it doesn’t fix the problem.

2 Likes
#6

Is the original image before you slice it a perfect square?

2 Likes
#7

I believe it’s 7x7 so yes. Also if I use any other scale type the image goes to the center of the ImageLabel, but that also makes the image get blurred for whatever reason, BUT even in that case the image is still not centered on the screen vertically.

1 Like
#8

Can you send a file of just the cursor so I can see what’s wrong visually?

1 Like
#9

It’s just an image I found on the toolbox the ID is rbxassetid://5845800821 also this problem persists with other images as well. Even if it gets centered in the imageLabel the imageLabel itself I don’t think is properly centered on the screen vertically.

1 Like
#10

So I tested this image out in studio and it seemed like it was almost perfectly in the center. It was just off when I tried using slice so I’d suggest not using that. Also if you are trying to fix the very very slight offset of the dot from the middle, you’re probably going to have to make/find a new image that is perfectly centered.

1 Like
#11

I recently had a problem where an image wouldn’t stay in the center, too. I found that if you put the image label inside of a frame with an anchor point of (0.5, 0, 0.5, 0), it should stay in the center of the screen on every screen size. If that doesn’t work, try using the Auto Scale plugin.

1 Like
#12

If I don’t use slice the image looks wrong (like in the image I included it’s get blurry), but it DOES center it inside the imagelabel. That said the imagelabel isn’t centered vertically in the game window even with the 0.5 0.5 anchor point so the cursor sits below where the real cursor is. I can’t have that in an FPS game where the cursor is the precise location the player is aiming. Thanks for your time.

1 Like
#13

The only reason it gets “blurry” is because the pixels are getting smaller and smaller. There is no way to really fix that (I think). Also you have to make sure the scaling of the frame itself is on scale and not offset.

1 Like
#14

Then how can I get the image to stay it’s normal size of 7x7 pixels? If it does that there should be no blur at all. I also still don’t know why the image is not centered vertically with the anchor point and position in the middle It should be exactly inside the players real cursor

#15

I did a little test with a 100x100 size ImageLabel with .5 anchor points

local frame = script.Parent:WaitForChild('ImageLabel');
local UIS = game:GetService('UserInputService');

game:GetService('RunService').RenderStepped:Connect(function()
	local mouseloc = UIS:GetMouseLocation();
	frame.Position = UDim2.new(0,mouseloc.X,0,mouseloc.Y-36);	
end);

You need to subtract 36 pixels as offset to place it on the center, I do not know if this work with your particular case but you should give it a shot

1 Like
#16

Sorry if I’m not understanding, but can you just set the Anchor Point to 0.5,0.5? Then you can just set the position to 0.5,0,0.5,0.

If you want to auto-scale the crosshair with a plugin then you can use this.

Let me know if what I’m saying applies to your situation or not.

#17

I have had this problem in the past as well. It is due to different devices having different screen sizes/aspect ratios. I agree with everyone else here that you should set anchor point to 0.5 and use {0.5, 0}{0.5, 0} for position, but there is still one extra step you have to take to perfectly center the GUI for all devices.

The method I found works for me is to add a “UIAspectRatioConstraint” into your GUI and then adjust the aspect ratio until it is the correct size (it will likely mess up the size when first inserting it, that’s why you need to adjust the aspect ratio property)

That should perfectly center the crosshair for all devices, fixing the issue you are having

Edit: I also recommend doing this for most, if not all, your GUIs so that their position, size, and proportion to each other stay consistent across all devices

#19

Try making a invisible frame that covers full screen, i think it needs to be
Size: {1,0,1,50}
Position: {0,0,0,-50}
then center the crosshair to that frame