Hello - this is my first post, so please tell me if I’m doing anything wrong
What I want to achieve:
I want to create a Color Picker that uses HSV to choose a color. The color picker is sort of like a box:
I created this using gradients in a photo editing software. To determine what color the player’s mouse is hovering over, I planned to get position of the mouse on the image, and then used the Position.X.Scale and the Position.Y.Scale values of that position as the Color3.fromHSV() parameters. (I made sure that the gradient I made in the software was HSV accurate.)
What the issue is:
Basically, the color picker cursor icon is always offset from the mouse by a certain amount:
Here is the part of the script that determines the position of the Cursor:
ap = hsvImage.AbsolutePosition -- "hsvImage" is the color box
as = hsvImage.AbsoluteSize
local mousePos = uis:GetMouseLocation() -- "uis" is UserInputService
local hueValue = math.clamp((mousePos.X-ap.X)/as.X, 0, 1)
local saturationValue = math.clamp((mousePos.Y-ap.Y)/as.Y, 0, 1)
cursor.Position = UDim2.new(hueValue, 0, saturationValue, 0)
What I’ve tried so far:
At first I thought it was a problem with the script. But even when I tried doing the same thing, but instead of using X.Scale and Y.Scale, I used X.Offset and Y.Offset. To my surprise, the results were identical. I then thought that it could be something to do with the Cursor Image. The properties of the image were fine, but just to be sure, I made the cursor into a Frame object. Again, the results were the same.
I wanted to use X.Scale and Y.Scale so that it would be easier to convert the Position values into a Color3.fromHSV() instance. But I’ll try doing what you suggested.
on second thought, i think your calculations are fine, even the ones you were doing in the original piece of code.
Are you 100% sure it’s not the image being miss-sized?
Try printing out ‘DistFromBox’ and the position of the cursor and let me know what that says too
Lastly, make sure the anchor point of the cursor is (0.5,0.5)
I made sure that the anchor point is (0.5,0.5), and I have tried printing those things before. (Well, I printed mousePos, and also the position of the cursor.) What I found was that mousePos was different than the actual position, meaning that for some reason, the cursor isn’t being set to exactly the position I tell it to.
Sure. I have this function, and then call it with the correct parameters:
function moveHSVBox(hsvImage, cursor, colorPreview) -- I don't use colorPreview for now
local mouseDown = false
local inBounds = false
local ap = hsvImage.AbsolutePosition
local as = hsvImage.AbsoluteSize
local h,s,v = colorPreview.BackgroundColor3:ToHSV() -- I don't use this for now
hsvImage.MouseEnter:Connect(function() inBounds = true end)
hsvImage.MouseLeave:Connect(function() inBounds = false end)
uis.InputBegan:Connect(function(input)
if input.UserInputType == Enum.UserInputType.MouseButton1 and inBounds then
mouseDown = true
end
end)
uis.InputEnded:Connect(function(input)
if input.UserInputType == Enum.UserInputType.MouseButton1 then
mouseDown = false
end
end)
spawn(function()
while rs.RenderStepped:Wait() do
if mouseDown then
ap = hsvImage.AbsolutePosition
as = hsvImage.AbsoluteSize
local mousePos = uis:GetMouseLocation()
local hueValue = math.clamp((mousePos.X-ap.X)/as.X, 0, 1)
local saturationValue = math.clamp((mousePos.Y-ap.Y)/as.Y, 0, 1)
cursor.Position = UDim2.new(hueValue, 0, saturationValue, 0)
end
end
end)
end
I thought it was too (and it is, we forgot to account for GUI inset), and i gave my other idea a shot. Make sure ‘IgnoreGUIInset’ is enabled on your screengui then it’s fixed.
Oh, I think I found the reason why it was like this. I googled what the Roblox mouse’s size is, and here’s what I found:
The default mouse image is 64x64 pixels, with the mouse taking up 17x24 pixels of space.
So basically, the cursor is centered, but the actual image is mostly a transparent background, while the mouse icon itself is in the bottom right corner of that image. I’ll try doing something with this and make it work.
Although, if the mouse image’s anchor point is (0.5,0.5), then it should work - so I’m assuming that the anchor point is for some reason (0,0).
Okay, thanks. But I noticed that when I turned on IgnoreGuiInset, the size and position of the frame didn’t change. Maybe I just need to somehow update its position so that it actually follows the IgnoreGuiInset? idk…
