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

Drawing on a Gui: How can I patch up the holes between frames?

Asked 789 views1 answers

I want to make a feature for my game where certain people can "draw" on a map for other players to see. This is what I have so far:

function draw(x,y)
	local f=Instance.new("Frame",script.Parent.DrawHere) --create a new Frame inside a viewing space
	f.Name="Drawring"
	f.Size=UDim2.new(0,5,0,5)
	f.Position=UDim2.new(0,x-script.Xoffset.Value,0,y-script.Yoffset.Value) --This puts it right where your cursor is. I used intvalues to find how far it is off so I can guess and check very quickly
	f.BorderSizePixel=0
	f.BackgroundColor3=Color3.new(0,0,0)
end

script.Parent.DrawHere.MouseMoved:connect(draw)

When you use this method, if you move your cursor fast at all there will be spaces between Frames. If you look at freemodels that are "Drawing Gui's" they have the same problem. In fact, Stickmasterluke's game "Draw It!" seems to be the only place that does not have that problem. I attempted to write a function to fill the gaps, but I couldn't get it to fill the gaps. Are there any methods I am overlooking that would work better for what I am trying to do?

Anonymous

3 comments

0

Use number values instead. NumberValues hold numbers. Int Values only hold whole numbers like 1 or 4.

Anonymous#
1

@supercoolguy53 That isn't the problem. That works perfectly. Also, Gui coordinates are always whole numbers. You cannot have a UDim2 position of (0, 19.41234, 0, 41.123)

Anonymous#
0

Can you give a screenshot please? I'm just slightly confused as to how these gaps look

Anonymous#

1 answer

✓ Accepted answer

You could keep track of the previous points all the time, and then connect them by drawing lines. To draw lines, you can use the function math.atan2(y, x) to compute the angle between the previous mouse position and the current position, and then use the Frame.Rotation property to rotate it correctly, and set the width of the frame to the distance the mouse moved. See the example:

local LINE_THICKNESS = 5 -- how thick the line is
local MIN_SEGMENT_LENGTH = 2 -- increase this to reduce the number of frames required
local prev_x, prev_y

function draw(x, y)
	if prev_x and prev_y then
		-- at first, compute the distance compared to the previous position
		local dist_x, dist_y = x - prev_x, y - prev_y
		local dist = math.sqrt(dist_x * dist_x + dist_y * dist_y)
		if dist >= MIN_SEGMENT_LENGTH then
			local line_angle = math.atan2(dist_y, dist_x) -- computes angle of line in radians
			local line_frame = Instance.new("Frame")
			-- set the line length to the distance that the mouse moved
			line_frame.Size = UDim2.new(0, dist, 0, LINE_THICKNESS)
			-- put the line frame in the middle between the previous position and the new position
			local center_x, center_y = 0.5 * (prev_x + x), 0.5 * (prev_y + y)
			-- subtract half the size and the offset value from the position
			line_frame.Position = UDim2.new(0, center_x - 0.5 * dist - script.Xoffset.Value, 0, center_y - 0.5 * LINE_THICKNESS - script.Yoffset.Value)
			line_frame.Rotation = math.deg(line_angle) -- converts angle to degrees and sets it as the frame's rotation
			line_frame.BackgroundColor3 = Color3.new(0, 0, 0)
			line_frame.BorderColor3 = Color3.new(0, 0, 0)
			line_frame.Parent = script.Parent.DrawHere
			prev_x, prev_y = x, y
		end
	else
		prev_x, prev_y = x, y
	end
end

script.Parent.DrawHere.MouseMoved:connect(draw)

I also recommend you use a localscript in the same parent that does this to keep the values of script.Xoffset and script.Yoffset correct. Replace DrawScript in the following code by the name of the script with the Xoffset and Yoffset values in it.

while true do
	Wait(0.25)
	script.Parent.DrawScript.Xoffset.Value = script.Parent.DrawHere.AbsolutePosition.X
	script.Parent.DrawScript.Yoffset.Value = script.Parent.DrawHere.AbsolutePosition.Y
end
AnonymousEdited Permalink

1 comment

0

Quite remarkable.

Anonymous#

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