Help with Making Drawing Canvas

Help and Feedback Scripting Support
#1

I would like to make a game where players have to draw a prompt and some other stuff happens, but I’m having trouble with the drawing part.

There’s nothing in the UI menu that inserts an object that lets a player draw on it, so I figured I’ll have to script it. I know it’s possible because I’ve seen games do this before, but I have no idea how.

How can I do this?

3 Likes
#3

I suppose that when a player holds down their mouse, you could create some pixels (tiny colored Frame objects) at the mouse’s position.

Note that if other players could see these drawings and if they were not moderated, I assume Roblox wouldn’t like that.

3 Likes
#4

Either use hundreds of little square Frames aligned to a grid in order to paint on top of another Frame, or draw lines using long, thin, rotated Frames that stretch from the mouse’s previous position to the mouse’s current position.

But like @imalex4, careful with who you show that image to. Don’t show it to anyone except the player who drew it.

1 Like
#5

Would it be possible to make the frames created by the drawing circular?

#6

Sure, you would just an ImageLabel and use a circular texture.

I don’t think that’s what you want though, since it would look more like a dotted line.

#7

Could I see an example script so that the player can draw on a specific frame?

#8

Sure. Throw this in a LocalScript in a Frame:

local player = game.Players.LocalPlayer

local frame = script.Parent

local dragging = false

-- turn on dragging when the mouse is pressed or the screen is touched
frame.InputBegan:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
		dragging = true
	end
end)

-- turn off dragging when its released
frame.InputEnded:Connect(function(input)
	if input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch then
		dragging = false
	end
end)

-- helper function to draw one point at the given x,y position
local function DrawAt(x, y)
	-- need the parent's position so we can subtract it from the child's
	local topLeft = frame.AbsolutePosition
	
	local point = Instance.new("Frame")
	point.Size = UDim2.fromOffset(10, 10)
	-- ... like this
	point.Position = UDim2.fromOffset(x - topLeft.X - 5, y - topLeft.Y - 5)
	point.Parent = frame
end

-- fired when the mouse or finger moves
frame.InputChanged:Connect(function(input)
	if dragging and input.UserInputType == Enum.UserInputType.MouseMovement or input.UserInputType == Enum.UserInputType.Touch then
		DrawAt(input.Position.X, input.Position.Y)
	end
end)
4 Likes