Neon UI, a general how-to

Hey.

Semi-recently, I made some UI which emulated the effect of the neon material. Following this, a few people asked me how I did it so I felt like sharing it with the community.

image

Step 1. Get a part and place it infront of the camera, then with your UI (which should be a SurfaceGui), you can parent it/set the adornee to said part. If you want to calculate how large the part should be, you use this:

local THETA = math.tan(math.rad(camera.FieldOfView) / 2)

local function getAspectRatio(ViewportSize)
    return ViewportSize.X / ViewportSize.Y
end

local function getHeight(ViewportSize, theta, depth)
	return -1 * 2 * theta * depth
end

local function getWidth(ViewportSize, theta, depth)
	local aspectRatio = getAspectRatio(ViewportSize)
	local width = aspectRatio * theta
	return -1 * 2 * width * depth
end

local ViewSize = camera.ViewportSize
local uiCFrame = Camera.CFrame * CFrame.new(0, 0, -PART_DEPTH - 0.5)

UIPart.Size = Vector3.new(
	getWidth(ViewSize.X, -PART_DEPTH),
	getHeight(ViewSize.Y, -PART_DEPTH),
	1
)

Always remember to update this when the players screen size changes!

The -1 in the code is there because we want to cover the entire screen, if you wanted to cover an entire frame or similar you could replace it with -(ViewportSize.X / FrameXAbsoluteSize) (or just swap the axis’ depending on the function)

(obviously your code should look a bit prettier than this, I wrote this in the post editor lol, code was devised from AstroCode’s ScreenSpace module)

Step 2. With that part infront of the camera, and the UI parented/adorned, you can put the brightness up to whatever you want. Brighter colours will obviously show up more than darker ones, so use this carefully so you don’t burn the players retinas.

Since you have the part infront of the camera, you can do whatever with it! Personally, I added a subtle shake when the player moves their mouse:

UIPart.CFrame = uiCFrame:Lerp(
			CFrame.lookAt(uiCFrame.Position, Mouse.Hit.Position),
			UIPART_ALPHA
		)

but it’s your game after all.

This is a really nice graphical effect, and it’s limited the the players graphic level so you don’t have to worry about optimisation.

I hope this is helpful, and I hope I remembered the code from earlier properly.

Thanks for reading!

81 Likes

pretty cool,i didnt test it but the picture looks good,but i think this should be on #resources:community-tutorials since you didnt provide any full code and the post is more like a tutorial instead of a resource

4 Likes

I use this for holo effects. Good to see someone posting about it publicly, bloom on HUDs is a really beautiful thing and helps a lot with immersion.

image

14 Likes

Brightness should be a property on screenguis. Its honestly really cool. I wish you had more flexibility with 2d graphics.

4 Likes

It’s pretty 50/50, I put it in Community Resources because I felt like it would make more sense with the code provided.

3 Likes

Oh and another thing to mention, you don’t have to do this for all of your UI!

If you want specific frames to render as neon you can move that specific UI into a SurfaceGui, create a new UIPart, replace getWidth and getHeight ViewportSize argument with AbsoluteSize when resizing the part, and boom you have a cool neon element. This would look great if you were making crosshairs, or 2D music visualizers.

1 Like

hey idk why but your system isnt working as expected,it could be that i was expecting smth else or i did a mistake,well when i followed the scripts idk why but the sizing is really messed up
glow ui.rbxl (30.6 KB)

also wouldnt it be better if you can just put a ui in player gui and then add a part which automatically matches the ui ?

2 Likes

That’s what the code does.

Oops, misinterpreted. No, that would be, in theory, quite expensive (especially if you had multiple tweens running at the same time). This is just like putting a ScreenGui on a part, all events and similar will act the same as they derive from GuiBase2d. Simply setting the Adornee of a SurfaceGui (while it is in somewhere like StarterGui) will be fine, plus it means you don’t have to wait for the parts existence and you can use the SurfaceGui as if it was a regular ScreenGui, etc etc.

I’ve fixed up your place:
glow ui.rbxl (32.0 KB)

3 Likes

I believe it is, I’ve seen it on BillboardGuis

Sorry, i meant screenguis. My bad.

1 Like

so i tested it and the size variable doesnt work at all i tried using vector2 and udims but none of them worked how would i actually position the part and size it in the script like i would do on a normal ui

Size calculation doesn’t work. I tried fixing it but i think i broke it more.

I’m sure it works – I provided an example in this post

Oh, I didn’t see that post. I was referring to the code in the top of the post.