How to make a working Grid System in Roblox

Resources Community Tutorials
#1

:warning: You need to know basis of scripting or you’ll not understand this tutorial

Also its simple, so listen carefully, here is how it works:

Step 1

Basically, you need to know what is position of block,

:blue_square:
Example: If you have this blue square, the center of it, from all sides is the position, like if left of of the block is (5,1,5), center is (5.5,1,5) then block position will be the centre of it position

Step 2

Raycasting
If you don’t know what this is then learn it from here, or you cannot understand next steps

Step 3

I will tell how it works, so you can understand and make a better one

Grid part: block under the block your placing

This will create a grid, blocks stick to each other, with an image/surface gui frame on top, so when your using your building system, raycast downwards the block, so you will know what block/grid is under it, that will be your grid part, when your placing a block, the grid part position will be the position
Once again watch the video I kept at starting, when your placing a block, the grid part position will be the part your placing’s position, so you cannot place in between those grid parts

Step 4: How to make grid block

image

1.Make a part which will be the size of your grid

2.Make it look like a grid part, here is how I did it
image
image

3.Now add a local script in your building system script

  1. Read this below to understand the script
    image
    Now we will make a grid in all x boxes, top to down, and z boxes, left to right
    Means for every left to right block you need to make a top to down, this cannot be understood if you read it without thinking, try to think how to clone this grid into x and z axis

  2. Don’t copy paste this script below, read it

local gridpart = game.ReplicatedStorage:FindFirstChild("GridPart")

for x = 5,55,5 do
    for z = 5,55,5 do
        task.wait(0.05) -- to create a tween effect
        local gridclone = gridpart:Clone() -- clones and keeps in workspace
        gridclone.Parent = workspace
        gridpart.Position = Vector3.new(x,0.5,z)
        gridpart.Anchored = true
        gridpart.CanCollide = false
    end
end

Now, you might be like :confused:

Don’t worry its quite simple, 10 line script, try to understand it

Step 5, test it

Now your happy that you made a working grid system

Tutorial is done, but below is a tutorial on how to make a simple building system as in video

Step 1

local selectionpart = Instance.new("Part",workspace)
selectionpart.Size = Vector3.new(5,5,5)
selectionpart.Transparency = 0.5
selectionpart.CanCollide = false
selectionpart.Anchored = true
local player = game.Players.LocalPlayer
local mouse = player:GetMouse()

mouse.Move:Connect(function()
    local raycastresult = workspace:Raycast(mouse.Hit.Position + Vector3.new(0,150,0),Vector3.new(0,-250,0))
    if raycastresult ~= nil then -- if there is nothing under the selection part
        if raycastresult.Instance.Name == "GridPart" then -- checks if its a grid part
            selectionpart.Position = raycastresult.Instance.Position + Vector3.new(0,selectionpart.Size.Y/2,0)
        end
    end
end)

Here is how it works:

Sorry for the lag video, my pc is not a high-end pc, but you can see it work in this video

Also this is not a tutorial for making a building system, so I’m not showing it here.

30 Likes
Placement System Snapping/Stacking
How do you make a grid-snap system?
Where/How Did You Learn How To Make a Grid Placement System (If You Did)?
[Help pls] How to make increment for raycast (And more)
#2

Link a raycasting tutorial, don’t just say “then learn it”

You should also show us the building system. It’s as easy as cloning the selection part to workspace , don’t be lazy

Other than that 8/10 tutorial

2 Likes
#3

I did show the building system, but you cannot place it, but you can see that your able to move blocks, thats just an example, on how to make a building system out of it

#4

oh. that’s even better ig.
keep preventing Ctrl+c users

You should try screenshotting code instead in the next tutorial so no copypasters will come.

3 Likes
#5

Yes I told don’t copy and paste but making an image of script is hard to refer or read for some people

1 Like
#6

i want to make a proper grid system not making the position a part.

1 Like
#7

on mac, you can actually copy and past text from anywhere including images. it uses artificial intelligence similar to the google translate app

1 Like
#8

Wow, I never had a mac, cool feature btw

2 Likes
#9

Or you can check our Project Naptha, it is a chrome extension that also uses AI to select rest in images

1 Like
#10

Thanks for the tutorial, I wanted to asked if this was done on a large scale, wouldn’t it create a lot of lag cause of the parts? im thinking of making a farming game so there will be a lot of plots.

1 Like
#11

Yes it lags, but you should note that, these grid system loads on the client, it means other players wont see it, but if other players also spawn grid in all farms in your game, then it might lag

But there is a solution for this, you can do something like rounding
Like if the grid is every 1 stud you could do this:

If your placing at:
Vector3.new(1.1,0.5,1.2)
You could use math.round and do
Vector3.new(1,0.5,1)
You could also round y axis, but I did not do that here

This is how you do it:
```Vector3.new(math.round(x),y,math.round(z)``

But if your going for every 5 stud grid, thats easy too, but you need to understand some ample of maths here

Imagine your placing at 23 studs at x axis, for now we just care about x axis
So if your having 5 studs grid, you can place in these x axis positions
5,10,15,20,25

So your placing at 23, whats near it? 25 ofc, now how do we find whats near the to the grid size

Also why is it 25,not 20
We rounded it, for the 5

Now we do math.round(x/5)

We will see how it works now:

math.round(x/5)
math.round(23/5)
math.round(4.6)
-- 5
local chosengrid = result*grid size -- 5*5 = 25

We got 25, as the nearest grid, see its soo simple just try to read it and understand it

Now we got chosen grid we do this
Vector3.new(chosengridx,y,z)
Like this we do it for every axis = x,y,z

So when your going for large scale maps, you shouldn’t use this grid part method, but when your going for small scale maps, you can use them

2 Likes
#12

Is it possible to do this but the grid is digital (not a punch of parts, rather one big part)? I want to use this system but optimize it for low end devices by making the block snap to the grid even if the grid is a single part.

#13

Yes its possible, check the 11th post of this topic, thats how you do it for big maps, it does not need any grid part, and it can increase performance

#14

Lol I’m not the best at math and I don’t completely understand it.

#16

You mentioned a “grid part” in step 3, is it the same “grid block” we’re making in step 4?
Thanks in advance!