Scripting HelpersARCHIVE
A little piece of Roblox history. Preserved for everyone, one question at a time.Read about the archive →
✓ ANSWER ACCEPTED

How to make a Color Picking GUI? (Color Wheel)

BackGround In Boku No Hero they have a GUI that allows you to select your Color based on a color wheel.

https://gyazo.com/0116728e20595a7eea5210b1564642aa

Question I'm not asking you to give me a script, but a general idea on how they did this.

2 comments

0

Basicly you use HSV (Color3.fromHSV) with H being the angle, devided by 360, S being 1, or a seperate slider, and V being the distance from the center of the image.

0

Err could you explain how I get H?

1 answer

✓ Accepted answer

They most likely would've used the Mouse position in the GUI's 'local space' to get the value it could be, meaning the actual image itself has no point in the actual code.

For example:

local Mouse = game.Players.LocalPlayer:GetMouse()
-->> Other variables just for example

local function GetRelativePosition(Object,MousePosition)
	local X = MousePosition.X-Object.AbsolutePosition.X
	local Y = MousePosition.Y-Object.AbsolutePosition.Y

	return Vector2.new(X,Y)
end

local function GetColor()
	local RelativePosition = GetRelativePosition(ColorPickerFrame,Mouse.Position)
	local ScaleX = (1/ColorPickerFrame.AbsoluteSize.X)*RelativePosition.X
	-->> Say it was 100 pixels in size, and the relative position was 50 pixels, the scale would be 0.5

	local Color = Color3.new(ScaleX,ScaleX,ScaleX)
	-->> Would go from black (scale 0) to white (scale 1) based on position
end

It's a bit unexplained, but I have to go, sorry.

Hope I helped!

~TDP

2 comments

0

It doesn't work, just changes the color to black.

0

It should - you may want to mess around with it more. It was just a quick mockup, anyway. Try using some debugging methods to see what the relative position is.

This discussion is preserved as it was. New answers, comments, and votes are closed.