What is this?
Inspired by the Unity Gizmo library I created this for ROBLOX. This is intended to ease your workflow by providing tools for real-time visual debugging for different things in your workspace. For example, visualizing a region3 or points representing a path of some sort.
The gizmos are built every frame using handle adornments and so are unlikely to affect your game logic unlike part instances (which are also more expensive and laggy to use). You won’t have to create extensive testing hacks just to make sure your rays don’t collide with your test’s visual parts.
Different forms of Gizmos
In ROBLOX, I was able to get six types of handle adornment but I have used only four of them in this system so far. I intend to add support for more but some of them are really not that useful (as I see it). Below are the basic gizmos along with the functions I created to manipulate them. However, before introducing the individual gizmos, since they all share three basic properties: cframe, color3, and transparency, I will introduce two general functions.
setColor(color)
Sets the color for the following gizmos
setTransparency(transparency)
Sets the transparency for the following gizmos
Box
Box
The box adornment (blue floating part 
) with nothing much to explain. As expected, it has a cframe and a size.
drawBox(cframe, size)
Draws a box adornment (gizmo) with the specified cframe and size
drawRegion3(region3)
Draws a box adornment (gizmo) to visualize the region3
Cone
Cone
The cone adornment points towards the look vector of its cframe and places its base directly on top of its cframe (it helps to imagine that unlike other adornments, its anchor point is at its base rather than its midst). It has a radius (of the base) and height.
drawCone(cframe, radius, height)
Draws a cone adornment (gizmo) with the specified cframe, radius and height. The cone’s base will begin at the specified position and points towards the look vector.
drawSpotLight(spotLight)
Draws a cone adornment (gizmo) to visualize the spot light
Cylinder
Cylinder
Like the cone, the cylinder points towards the look vector of its cframe and has a radius along with height.
drawCylinder(cframe, radius, height)
Draws a cylinder adornment (gizmo) with the specified cframe, radius and height. The cyclinder’s bases will be pointed towards the look vector
drawLine(startPosition, endPosition, radius)
Draws a cylinder adornment (gizmo) with the specified start and end position and radius to visualize a line
drawRay(ray, radius)
Draws a cylinder adornment (gizmo) to visualize the ray
Sphere
Sphere
The sphere adornment is a very basic shape with a radius.
drawSphere(cframe, radius)
Draws a sphere adornment (gizmo) with the specified cframe and radius
drawPointLight(pointLight)
Draws a sphere adornment (gizmo) to visualize the point light
How to use?
After requiring the gizmo library module in your script, you can connect a function to .onDraw event to start drawing your gizmos. This event is exposed by the library and called every frame to refresh the gizmos. The event passes the library as an argument so you can easily use the gizmo functions.
This is how the most basic setup looks like to generate a sphere (demo included in the model):
--// CONSTANTS //-- local GIZMOS = require(script.Parent.Gizmos) --// INSTRUCTIONS //-- GIZMOS.onDraw:Connect(function(g) g.setColor(Color3.new(1, 1, 1)) g.setTransparency(0.5) g.drawSphere(Vector3.new(0, 5, 0), 1) end)
Remember, you can connect multiple functions from multiple scripts and still have the system function properly (if you face issues let me know).
Here is a compilation of all the functions you can use.
Functions
setColor(color)
Sets the color for the following gizmos
setTransparency(transparency)
Sets the transparency for the following gizmos
drawBox(cframe, size)
Draws a box adornment (gizmo) with the specified cframe and size
drawRegion3(region3)
Draws a box adornment (gizmo) to visualize the region3
drawCone(cframe, radius, height)
Draws a cone adornment (gizmo) with the specified cframe, radius and height. The cone’s base will begin at the specified position and points towards the look vector.
drawSpotLight(spotLight)
Draws a cone adornment (gizmo) to visualize the spot light
drawCylinder(cframe, radius, height)
Draws a cylinder adornment (gizmo) with the specified cframe, radius and height. The cyclinder’s bases will be pointed towards the look vector
drawLine(startPosition, endPosition, radius)
Draws a cylinder adornment (gizmo) with the specified start and end position and radius to visualize a line
drawRay(ray, radius)
Draws a cylinder adornment (gizmo) to visualize the ray
drawSphere(cframe, radius)
Draws a sphere adornment (gizmo) with the specified cframe and radius
drawPointLight(pointLight)
Draws a sphere adornment (gizmo) to visualize the point light
Where to get it?
Here is the link to the ROBLOX Model and here is the link to the Github Repository. It contains the Gizmo library module and a pool module that is needed by the library. It also contains a demo script for creating a simple gizmo sphere.
Please help me expand functionality by using github.
How performant is it?
For this purpose, I think adornments were the most efficient tools to use. I also created a pool system for the instances generated by this system to make it more performant.
On my device (which is very subpar as I can’t play most ROBLOX games on max graphics), I was able to use 500 gizmos at 3-5% script activity (you likely won’t ever need that much at one time). Unlike game elements, this is a debugging tool and therefore you won’t have to worry about performance on any other machine (like your players) than yours.