How would I do this?

Hello, I’m an aspiring ROBLOX Developer who wants to become one of the best. I’m making a game cald Elements, which is a game about the scientific elements that can be produced in the world.

I’m wondering how I should make it so that the player can use their mouse to set up “Regions”. Regions are going to be a feature in the game where a player can drag their mouse across the baseplate and make a new area in which certain elements form.

How should I make the base of this?

Visualization of a Region in The Game

image

3 Likes

Do you want to create a box selection similar to in an RTS game? If that is the case you can use UserInputService to get the players 3D mouse position when they click, and then again when they release. This will always form a rectangular region as long as you limit it to being along one plane (such as the baseplate surface)

2 Likes

I’m a bit confused here, so are you saying I should get the players mouse, and whenever they click, it will make a rectangular region?

2 Likes

You can use UserInputService to detect the player’s mouse going down, & where it went up. You can save a value for the location from which the mouse clicks occured, & can use that to do the math on how to draw a rectangle from it & make your zone.

Once you have the loations where the player started clicking, & stopped clicking, you can get the difference in the X and Z axis, & use it to draw a rectangle.

1 Like

Two points is not enough to define a region, so you need to have more limits on how a region can be placed. Is it a 2D selection or a 3D box?

1 Like

I’m going to be using a baseplate for the elements positions, so I will be only be using the X and Y axis.

1 Like

How would I know if the player actually made a rectangle or not and how would I get the 4 positional directions of the players mouse to make a perfect square?

I’m not sure but I Think the equation would be something like this:

StartPos = (Mouse click start position)
EndPos = (Mouse cick end position)

RectanglePosition = Vector3.new((StartPos.X+EndPos.X)/2),(YPos),(StartPos.Z+EndPos.Z)/2))
RectangleSize = Vector3.new(math.abs(StartPos.X-EndPos.X)),(YPos),(math.abs(StartPos.Z-EndPos.Z))
1 Like

In that case let me know if this is what you’re thinking of:

1 Like

Again: I SUCK at math, so this is me guessing.

Not sure what you mean, but if you wanted to check if it was a square you would just see if the size on the X axis & the Z axis were equal.

Yes, exactly. Something like this would work.

Although, I’m not at all sure how the code in the script even works. I’m not just going to use this script without not knowing how it works. It would completely take away the learning process of programming.

1 Like

Let me know which parts you are curious about and I will explain them in detail.

1 Like

local function MousePosition()
	local mousecoords = input:GetMouseLocation()
	local pickray = workspace.CurrentCamera:ViewportPointToRay(mousecoords.X, mousecoords.Y, 1.0)
	local rayparams = RaycastParams.new()
	rayparams.IgnoreWater = true
	rayparams.FilterType = Enum.RaycastFilterType.Blacklist
	rayparams.FilterDescendantsInstances = {}

	local target = workspace:Raycast(pickray.Origin, pickray.Direction * maxSelectDistance, rayparams)

	--Cancel if no mouse target
	if target == nil then return nil end
	
	--Otherwise return 3D position
	return target.Position
end

local function AbsoluteDifference(vec1, vec2)
	return Vector3.new(math.abs(vec1.X - vec2.X), math.abs(vec1.Y - vec2.Y), math.abs(vec1.Z - vec2.Z))
end

localpart.Size = AbsoluteDifference(firstPosition, secondPosition) + Vector3.new(0, 0.5, 0) --Add a little thickness
localpart.Position = (firstPosition + secondPosition) / 2.0 + Vector3.new(0, 0.25, 0) --Add a little height so its visible

Other than that, I understand mostly everything else.

1 Like

First block:
This finds the 3D position that the players mouse is sitting on when viewed through the camera. It is almost exactly the example shown in: Raycasting | Roblox Creator Documentation
Which I recommend reading

Second block:
Measures the difference between two vectors, but forces the result to be positive, since only positive Size values are allowed for parts.

Third block:
Sets the size to the always-positive difference between two selected points. This size will always be a rectangle that fits between the two points. Adds 0.5 to the Y axis so the part is a little thicker and easier to see.
Sets the position to the midpoint between the two selected points. Adds a little extra to the Y axis so it is not burried in the ground.

1 Like

I understand a bit about raycasting, but I don’t recall learning about shooting a raycast through the players camera. Is that listed in the document?
Specifically This Part

local pickray = workspace.CurrentCamera:ViewportPointToRay(mousecoords.X, mousecoords.Y, 1.0)

Could you explain the math? I’m not familiar with math.abs ahh, just figured it out. Math.abs is supposed to be Absolute Value, and your indeed as you said are using it to force a positive number.

1 Like

ViewportPointToRay is a function of the Camera class. It returns a Ray object which starts at the center of the camera and passes through the pixel specified by mousecoords.X and mousecoords.Y.

https://create.roblox.com/docs/reference/engine/classes/Camera#ViewportPointToRay

This ray passes through every 3D point that can occupy that pixel on your screen, since light travels in a straight line (in video games). Raycasting based on this ray will gave you the part which that pixel belongs to.

math.abs takes the absolute value of a real number. If the number is negative, it is negated so it becomes positive, if the number is positive (or zero) it is unchanged.

2 Likes

I’m a bit confused now, why do we need to fire a raycast from the ray?

1 Like

A Ray is just a point and direction. Raycast is what actually searches the workspace for any parts that ray hits.

1 Like

So are we using the camera to get the mouse’s position and check what it hits?

1 Like

Yes, the position the user is clicking on (what it hits) depends both on the pixel the mouse is on and the camera’s state.

1 Like