PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience

Drawing In-Game

Drawing In-Game

Jul 03 2018, 10:30 AM PST 5 min

This tutorial explains how to create a script that will allow players to draw. This will be done using the Mouse, manipulated from a LocalScript|Local Script located in the StarterGui of the players.

Defining

First of all, you should create a LocalScript|local script and put it in the StarterGui service. Then, we need to define a few variables that we will use in the script to make the rest of the code simpler.

We will be getting the object representing the Players/LocalPlayer so we can access the mouse, which we will obtain with the Player/GetMouse method.

local user = game.Players.LocalPlayer
local mouse = user:GetMouse() -- We use this to manipulate the mouse.
local draw = false -- This is a boolean that we will use later.

Note: draw is used here, but in others script you could use mouseLeftButtonDown or anything you like.

Getting Button1Down

We will now use the Mouse object to check when the user is pressing the left mouse button.

mouse.Button1Down:connect(function()
	draw = true
	repeat pos1=mouse.Hit.p --We will use mouse.Hit.p to get the current Mouse position. This returns a Vector3 value.
		wait()
end)

Creating the parts

Here we connect the event Mouse.Button1Down so that when you click, the function will be called.

As long as the left mousebutton is down (using repeat CODE until not draw), we’ll “paint”. Every tick, we’ll have two positions: Where the mouse first was, and where it is now.

With the code below, we draw a black line between those 2 points, using a little bit of math.

mouse.Button1Down:Connect(function()
	draw = true
	repeat
		local pos1=mouse.Hit.p --We will use mouse.Hit.p to get the current Mouse position. This returns a Vector3 value.
		wait()
		local pos2 = mouse.Hit.p -- What we're doing here is getting the second position after the wait(), which we will use later.
		local part = Instance.new("Part", workspace) -- Create the new part in the Workspace. <-- Instance.new("CLASS",PARENT)
		part.FormFactor = "Custom"
		part.CanCollide = false -- Make other parts be able to go trough it
		part.TopSurface = "SmoothNoOutlines" --Just some aesthetics.
		part.Anchored = true -- Make sure the part is anchored if you want it to maintain it's position, else it can move (and fall).
		part.BrickColor = BrickColor.new("Really black")
		part.Size=Vector3.new(0.5, 0.5, (pos1-pos2).magnitude )--We will use magnitude to get the distance between both points, and set the size (Z) to that distance.
		part.CFrame = CFrame.new( (pos1+pos2)/2, pos2 ) --This may seem a little complicated, but what we're doing is getting the part to be in between both pos1, & pos2.
	until not draw --Stop the loop when draw is no longer true.
end)

Button1Up

But wait! draw is always true! Let’s fix that by making it so draw becomes false when we stop clicking.

mouse.Button1Up:connect(function()
	draw = false
end)

Result

Now, let’s put this all in one script that you can directly use!
Put this in a localscript in StarterGui and press Play Solo to test this.

local user = game.Players.LocalPlayer
local mouse = user:GetMouse() -- We use this to manipulate the mouse.
local draw = false -- This is a boolean that we will use later.

mouse.Button1Down:Connect(function()
	draw = true
	repeat
		local pos1=mouse.Hit.p --We will use mouse.Hit.p to get the current Mouse position. This returns a Vector3 value.
		wait()
		local pos2 = mouse.Hit.p -- What we're doing here is getting the second position after the wait(), which we will use later.
		local part = Instance.new("Part", workspace) -- Create the new part in the Workspace. <-- Instance.new("CLASS",PARENT)
		part.FormFactor = "Custom"
		part.CanCollide = false -- Make other parts be able to go trough it
		part.TopSurface = "SmoothNoOutlines" --Just some aesthetics.
		part.Anchored = true -- Make sure the part is anchored if you want it to maintain it's position, else it can move (and fall).
		part.BrickColor = BrickColor.new("Really black")
		part.Size=Vector3.new(0.5, 0.5, (pos1-pos2).magnitude )--We will use magnitude to get the distance between both points, and set the size (Z) to that distance.
		part.CFrame = CFrame.new( (pos1+pos2)/2, pos2 ) --This may seem a little complicated, but what we're doing is getting the part to be in between both pos1, & pos2.
	until not draw --Stop the loop when draw is no longer true.
end)

mouse.Button1Up:Connect(function()
	draw = false
end)

See Also

  • Part - See all properties you can change using a script
  • Mouse - Find out what the mouse can be used for
Tags:
  • gameplay
  • interactive
  • coding