Drawing on a Gui: How can I patch up the holes between frames?
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?
0
1
0
1 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
0