Have you ever wondered how you can make bulletholes clip of walls?
Hello, I have the solution for anyone who is interested in this! In this topic, I will be covering a step by step guide on how to achieve the same result as the examples below.
Here is an example video showing the end result (focus on the bullethole part):
1 more example:
First of all we need a module called WorldPositionToGuiPosition by @orange451.
Put the module inside ReplicatedStorage
I won’t be covering on how to make a gun system, so instead I made a simple localscript that makes sure that I will be “shooting a bullet” from my mouse.
Here is the localscript:
local UIS = game:GetService("UserInputService")
local mouse = game:GetService("Players").LocalPlayer:GetMouse()
mouse.Button1Down:Connect(function()
local target = mouse.Target
local hitPosition = mouse.Hit
print(hitPosition)
end)
Explanation
What this code does is it checks every time the mouse is pressed, where the mouse’s position is inside 3D space, and prints that position.
I also made a part, resized it to Vector3.new(2, 10, 10) and anchored it so we can create clipped bulletholes on it.
Now a disclaimer is, is that we have to expand on the functions that the WorldPositionToGuiPosition module already provides. This is because the code we are going to write is going to be lengthy and could be used everywhere in your project. Okay, lets begin.
The main function we are going to write we will call it “WorldToGui.SetImageSurfaceGui” and it is a global function (no local infront of it). The parameters we will need for now is the target and position. Then we will use the WorldPositionToGuiPosition function, and get values returned which we store inside worldPosition.
The values that get returned are Surface, LocalWidth, LocalHeight, RelativeWidth, RelativeHeight
We get the face we hit:
function WorldToGui.SetImageSurfaceGui(target, position)
local worldPosition = {WorldToGui:WorldPositionToGuiPosition(target, position)}
local Face = worldPosition[1] --the face you hit
end
Then we make a new SurfaceGui instance. We set the CanvasSize based on the LocalWidth and LocalHeight we got provided which is inside the worldPosition variable. What causes the clipping is the SurfaceGui property called “ClipsDescendants” set to true, so make 100% sure you have coded that in. The scale is set to 50, I recommend keeping it that way and not making it a parameter.
We now have this:
function WorldToGui.SetImageSurfaceGui(target, position)
local worldPosition = {WorldToGui:WorldPositionToGuiPosition(target, position)}
local Face = worldPosition[1] --the face you hit'
local SCALE = 50
local surfaceGui = Instance.new("SurfaceGui")
surfaceGui.CanvasSize = Vector2.new(SCALE*worldPosition[2], SCALE*worldPosition[3])
surfaceGui.Face = Face
surfaceGui.Parent = target
surfaceGui.ClipsDescendants = true
surfaceGui.LightInfluence = 1
end
We then need a frame and an ImageLabel to be created. We determine the position of the ImageLabel based on the RelativeWidth and the RelativeHeight. We also add parameters that are called imageId for the image and duration to make sure the the ImageLabel gets deleted after the specified time.
We now should have:
function WorldToGui.SetImageSurfaceGui(target, position, imageId, duration)
local worldPosition = {WorldToGui:WorldPositionToGuiPosition(target, position)}
local Face = worldPosition[1] --the face you hit
local SCALE = 50
local surfaceGui = Instance.new("SurfaceGui")
surfaceGui.CanvasSize = Vector2.new(SCALE*worldPosition[2], SCALE*worldPosition[3])
surfaceGui.Face = Face
surfaceGui.Parent = target
surfaceGui.ClipsDescendants = true
surfaceGui.LightInfluence = 1
local frame = Instance.new("Frame")
frame.Parent = surfaceGui
frame.ClipsDescendants = true
frame.BackgroundTransparency = 1
frame.Size = UDim2.new(1,0,1,0)
local image = Instance.new("ImageLabel")
image.Parent = frame
image.Size = UDim2.new(0, 25, 0, 25) --standard size
image.Position = UDim2.new(worldPosition[4], 0, worldPosition[5], 0)
image.AnchorPoint = Vector2.new(0.5, 0.5)
image.ImageTransparency = .1 --standard ImageTransparency
image.BackgroundTransparency = 1
image.ClipsDescendants = true
image.Image = imageId
game:GetService("Debris"):AddItem(image, duration)
end
We now have a function that does it all automatically, good! We go back to the localscript and use our made function:
local UIS = game:GetService("UserInputService")
local WorldPositionToGui = require(game:GetService("ReplicatedStorage"):WaitForChild("WorldToGui"))
local mouse = game:GetService("Players").LocalPlayer:GetMouse()
local imageId = "http://www.roblox.com/asset/?id=2859765692"
mouse.Button1Down:Connect(function()
local target = mouse.Target
local hitPosition = mouse.Hit.Position
WorldPositionToGui.SetImageSurfaceGui(target, hitPosition, imageId, 100)
end)
Use any image you like, as long as it works. If you hopefully get no errors, you should get something like this:
We are done, you might think. But there are some things that we should do before we can rely on this function. First of all, every time we use the function a new SurfaceGui gets created, even for the same face and object.
This is also true for the Frame.
This will obviously cause allot of lag if you shoot the object allot of times, because too many SurfaceGuis will exist in the workspace.
The fix
To fix this issue, we have to check if a SurfaceGui or Frame already exists on that face. If a SurfaceGui does exist on that face, then we use that SurfaceGui, if it doesn’t exist yet, we create a new one!
To make things simple, we are going to create a new function called “checkGuiOnFace”. It is a local function, and has 2 parameters: target and Face.
local function checkGuiOnFace(target, Face)
local partInstances = target:GetDescendants()
for i, v in pairs(partInstances) do
if v:IsA("SurfaceGui") and v.Face == Face then
return v
end
end
end
Explanation
It will go through all the descendants of the target, and check if a SurfaceGui exists. If the found SurfaceGui its property called Face, matches the given Face value, the function returns the SurfaceGui.
We do the same but this time for Frame.
local function checkFrameOnFace(target, Face)
local partInstances = target:GetDescendants()
for i, v in pairs(partInstances) do
if v:IsA("Frame") and v.Parent.Face == Face then
return v
end
end
end
Then we implement it:
function WorldToGui.SetImageSurfaceGui(target, position, imageId, duration)
local worldPosition = {WorldToGui:WorldPositionToGuiPosition(target, position)}
local Face = worldPosition[1] --the face you hit
local SCALE = 50
local surfaceGui = checkGuiOnFace(target, Face)
if surfaceGui == nil then
surfaceGui = Instance.new("SurfaceGui")
surfaceGui.CanvasSize = Vector2.new(SCALE*worldPosition[2], SCALE*worldPosition[3])
surfaceGui.Face = Face
surfaceGui.Parent = target
surfaceGui.ClipsDescendants = true
surfaceGui.LightInfluence = 1
end
local frame = checkFrameOnFace(target, Face)
if frame == nil then
frame = Instance.new("Frame")
frame.Parent = surfaceGui
frame.ClipsDescendants = true
frame.BackgroundTransparency = 1
frame.Size = UDim2.new(1,0,1,0)
end
local image = Instance.new("ImageLabel")
image.Parent = frame
image.Size = UDim2.new(0, 25, 0, 25) --standard size
image.Position = UDim2.new(worldPosition[4], 0, worldPosition[5], 0)
image.AnchorPoint = Vector2.new(0.5, 0.5)
image.ImageTransparency = .1 --standard ImageTransparency
image.BackgroundTransparency = 1
image.ClipsDescendants = true
image.Image = imageId
game:GetService("Debris"):AddItem(image, duration)
return image
end
Now the same works, but it will only spawn one SurfaceGui per face:
Another matter that I find quite important to address is the fact that many SurfaceGuis will exist inside instances whilst there not being any ImageLabels in it. For example, a player might have gone around the map shooting every object, then every object has a SurfaceGui serving no purpose because the ImageLabel was deleted. This will accumulate hunderds or not thousands of SurfaceGuis in total, causing performance issues.
That is why I want to share the following.
First and foremost, I suggest making this inside a separate Utilities modulescript. Make an array called objectDebris.
local objectDebris = {
--these are comments showing the structure of the array
--[object] = coroutine,
--[object] = coroutine,
--[object] = coroutine,
--[object] = coroutine,
--[object] = coroutine
}
Make a local function called “customDebris” that receives two parameters, object and duration.
Here is the function:
function Utilities.customDebris(object, lifetime)
if object == nil or type(object.Destroy) ~= "function" then return end
local cor = task.spawn(function()
task.wait(lifetime)
if object then
object:Destroy()
end
end)
objectDebris[object] = cor
end
Now another called updateLifetimeDebris, it receives the same parameters as customDebris does, object and lifetime. Here is the function:
function Utilities.updateLifetimeDebris(object, lifetime)
local cor = objectDebris[object]
if cor ~= nil and (coroutine.status(cor) ~= "dead" or coroutine.status(cor) ~= "suspended") then
coroutine.close(cor)
end
Utilities.customDebris(object, lifetime)
end
Now back to the WorldToGui.SetImageSurfaceGui function. Add Utilities.updateLifetimeDebris at the bottom of the function, the object as the SurfaceGui and the duration the same duration as the ImageLabel.
function WorldToGui.SetImageSurfaceGui(target, position, imageId, duration)
local SCALE = 50
local worldPosition = {WorldToGui:WorldPositionToGuiPosition(target, position)}
local Face = worldPosition[1] --the face you hit
local surfaceGui = checkGuiOnSurface(target, Face)
if surfaceGui == nil then
surfaceGui = Instance.new("SurfaceGui")
surfaceGui.CanvasSize = Vector2.new(SCALE*worldPosition[2], SCALE*worldPosition[3])
surfaceGui.Face = Face
surfaceGui.Parent = target
surfaceGui.ClipsDescendants = true
surfaceGui.LightInfluence = 1
end
local frame = checkFrameOnSurface(target, Face)
if frame == nil then
frame = Instance.new("Frame")
frame.Parent = surfaceGui
frame.ClipsDescendants = true
frame.BackgroundTransparency = 1
frame.Size = UDim2.new(1,0,1,0)
end
local image = Instance.new("ImageLabel")
image.Parent = frame
image.Size = UDim2.new(0, 25, 0, 25) --standard size
image.Position = UDim2.new(worldPosition[4], 0, worldPosition[5], 0)
image.AnchorPoint = Vector2.new(0.5, 0.5)
image.ImageTransparency = .1 --standard ImageTransparency
image.BackgroundTransparency = 1
image.ClipsDescendants = true
image.Image = imageId
game:GetService("Debris"):AddItem(image, duration)
updateLifetimeDebris(surfaceGui, duration)
return image
end
Now whenever the last ImageLabel of a face gets destroyed, the SurfaceGui gets destroyed with it, making sure it doesn’t exist unnecessarily.
Thank you for reading. I hope you have gained some more knowledge from this and that I was clear. If you have any feedback on my approach or my writing skills or just want to say something then please put them below.
Feel free to copy everything!
Here is the place:
clipping_bulletholes_explanation.rbxl (58.0 KB)
