---
title: Beams
description: Beams create a visual, animatable effect between two attachments.
---
A `Class.Beam` is an object that renders a `Class.Texture` between two `Class.Attachment` objects. By setting beam properties, you can:
- Add a [texture](#texture) and [color gradient](#color) to create interesting visuals like waterfalls and force fields.
- Modify a beam's [transparency](#transparency) so that it fades over time.
- Warp its shape by changing the [width](#width) or [curve](#curve) of each attachment point.
- Specify the texture's [length and mode](#texture-lengthmode) to affect how it repeats across the beam's length.
## Create beams
Before you begin to create a beam, it's useful to toggle on visibility of attachments so you can see where the beam starts and ends. You can do so by enabling **Show Constraint Details** from Studio's **View** menu.
To create a beam:
1. Create two parts and position them a short distance from each other. One will act as the start of the beam and the other as the end of the beam. Group the parts into a `Class.Model`.
2. In the **Explorer** window, add an `Class.Attachment` object to each part:
1. Hover over one part and click the ⊕ button. A contextual menu displays.
2. From the contextual menu, insert an **Attachment**.
3. Repeat for the other part.
3. In the **Explorer** window, add a `Class.Beam` object to the model:
1. Hover over the model and click the ⊕ button. A contextual menu displays.
2. From the contextual menu, insert a **Beam**.
4. Select the new **Beam** object and assign its attachments. Ensure you assign each attachment property to a different `Class.Attachment` object.
1. In the **Properties** window, select the **Attachment0** property. Your cursor changes.
2. In the **Explorer** window, select the attachment of the part you want to be the start of your beam.
3. Back in the **Properties** window, select the **Attachment1** property. Your cursor changes.
4. In the **Explorer** window, select the attachment of the part you want to be the end of your beam.
Default beam between two attachments
Beams require attachments to function properly. If you remove either attachment object from step 4, the beam stops rendering its texture.
## Customize beams
By experimenting with the following properties, you can customize a beam's visual appearance to make unique gameplay elements like force fields, waterfalls, and pathway obstacles.
The visual quality of your beams can change depending on the graphics settings on the player's device. To review your beam across quality levels, it's recommended to open [Studio Settings](../studio/setup.md#customization), search for **Editor Quality Level**, and set it to the both the lowest and highest level after you finish customizing your beam.
### Texture
The `Class.Beam.Texture|Texture` property renders that texture across the length of the beam. You can set a beam's `Class.Beam.Texture|Texture` property to any asset ID. For more information, including how to add or upload your own textures, see [here](../projects/assets/manager.md#asset-import).
A beam renders its texture using two triangles drawn between `Class.Beam.Segments|Segments`, and the segments are laid out between the two attachment points' orientation. When you rotate attachment points in different directions, segments also rotate.
### Color
The `Class.Beam.Color|Color` property tints the beam's texture to either a specific hue, or to a gradient `Datatype.ColorSequence` across its entire span.
1. In the **Explorer** window, select the beam.
2. In the **Properties** window, select the **Color** property. You can either:
1. Click on the color square to open the **Colors** pop-up window and select a color.
2. Input three numbers into the RGB color value field.
1. In the **Explorer** window, select the beam.
1. In the **Properties** window, click inside the **Color** property field, then click the **⋯** button.
In the color sequence popup, each triangle on the bottom axis is a
**keypoint** that determines the color value of the beam at that
point along its span.
1. Click the keypoint at the start of the color sequence, click the
small square next to **Color**, and select a color from the popup window.
1. If you want the beam to change color near the end of its span, click the keypoint at the end of the color sequence, click the small square next to **Color**, and select a color from the popup window.
1. For more customization, you can:
- Add another keypoint by clicking anywhere on the graph.
- Make a color change sooner or later within the gradient by dragging an intermediary keypoint to a new position.
- Delete an intermediary keypoint by selecting it and clicking the **Delete** button.
- Reset the entire sequence by clicking the **Reset** button.
### Transparency
The `Class.Beam.Transparency|Transparency` property sets the transparency of the beam as a consistent value or as a `Datatype.NumberSequence` with ranges from **0** (totally opaque) to **1** (fully clear).
1. In the **Explorer** window, select the beam.
1. In the **Properties** window, select the **Transparency** property.
1. Input the desired opacity for the beam.
1. In the **Explorer** window, select the beam.
1. In the **Properties** window, click inside the **Transparency** property field, then click the **⋯** button.
In the number sequence popup, each square at the start and end of the graph is a **keypoint** that determines the opacity value of the beam at that
point along its span. By default, the graph defaults to a straight line and the beam is of consistent opacity.
1. Perform any of the following actions:
- To change the opacity at a point, click on a keypoint and either
drag it up or down, or enter a value in the **Value** field.
- To insert a new keypoint, click on any point in the graph.
- To delete a keypoint, select it and click the **Delete** button.
- Reset the entire sequence by clicking the **Reset** button.
### Width
You can set the beam's width in studs at each endpoint by configuring the
`Class.Beam.Width0|Width0` and `Class.Beam.Width1|Width1` properties. A higher value equates to a larger width and a lower value equates to a smaller width. If you set either value to smaller than 0, Studio sets it back to **0**.
The beam below has a `Class.Beam.Width0|Width0` value of **0.5** and a
`Class.Beam.Width1|Width1` value of **3**.
### Texture length/mode
A beam's `Class.Beam.TextureLength|TextureLength` and `Class.Beam.TextureMode|TextureMode` determine how its [texture](#texture) repeats across its length.
When `Class.Beam.TextureMode|TextureMode` is set to `Enum.TextureMode.Wrap` or `Enum.TextureMode.Static`, the texture repetitions will equal the beam's overall length (in studs) divided by its `Class.Beam.TextureLength|TextureLength`.
When `Class.Beam.TextureMode|TextureMode` is set to `Enum.TextureMode.Stretch`, the texture will repeat `Class.Beam.TextureLength|TextureLength` times across the beam's overall length.
### Facing
A beam is a 2D projection existing in 3D space, meaning that it may not be visible from every angle. The `Class.Beam.FaceCamera|FaceCamera` property, when set to `true`, ensures that the beam always faces the `Class.Workspace.CurrentCamera|CurrentCamera`, regardless of its orientation.
Default vs. FaceCamera
### Curve
Beams are configured to use a cubic Bézier curve formed by four control points. This means they are not constrained to straight lines and the curve of the beam can be modified by changing `Class.Beam.CurveSize0|CurveSize0`, `Class.Beam.CurveSize1|CurveSize1`, and the orientation of the beam's `Class.Attachment|Attachments`.
- **P0** — The start of the beam; position of `Class.Beam.Attachment0|Attachment0`.
- **P1** — `Class.Beam.CurveSize0|CurveSize0` studs away from `Class.Beam.Attachment0|Attachment0`, in the positive **X** direction of `Class.Beam.Attachment0|Attachment0`.
- **P2** — `Class.Beam.CurveSize1|CurveSize1` studs away from `Class.Beam.Attachment1|Attachment1`, in the negative **X** direction of `Class.Beam.Attachment1|Attachment1`.
- **P3** — The end of the beam; position of `Class.Beam.Attachment1|Attachment1`.
4. Select the new **Beam** object and assign its attachments. Ensure you assign each attachment property to a different `Class.Attachment` object.
1. In the **Properties** window, select the **Attachment0** property. Your cursor changes.
2. In the **Explorer** window, select the attachment of the part you want to be the start of your beam.
3. Back in the **Properties** window, select the **Attachment1** property. Your cursor changes.
4. In the **Explorer** window, select the attachment of the part you want to be the end of your beam.
A beam renders its texture using two triangles drawn between `Class.Beam.Segments|Segments`, and the segments are laid out between the two attachment points' orientation. When you rotate attachment points in different directions, segments also rotate.
### Color
The `Class.Beam.Color|Color` property tints the beam's texture to either a specific hue, or to a gradient `Datatype.ColorSequence` across its entire span.
In the color sequence popup, each triangle on the bottom axis is a
**keypoint** that determines the color value of the beam at that
point along its span.
1. Click the keypoint at the start of the color sequence, click the
small square next to **Color**, and select a color from the popup window.
1. If you want the beam to change color near the end of its span, click the keypoint at the end of the color sequence, click the small square next to **Color**, and select a color from the popup window.
1. For more customization, you can:
- Add another keypoint by clicking anywhere on the graph.
- Make a color change sooner or later within the gradient by dragging an intermediary keypoint to a new position.
- Delete an intermediary keypoint by selecting it and clicking the **Delete** button.
- Reset the entire sequence by clicking the **Reset** button.
In the number sequence popup, each square at the start and end of the graph is a **keypoint** that determines the opacity value of the beam at that
point along its span. By default, the graph defaults to a straight line and the beam is of consistent opacity.
1. Perform any of the following actions:
- To change the opacity at a point, click on a keypoint and either
drag it up or down, or enter a value in the **Value** field.
- To insert a new keypoint, click on any point in the graph.
- To delete a keypoint, select it and click the **Delete** button.
- Reset the entire sequence by clicking the **Reset** button.
### Texture length/mode
A beam's `Class.Beam.TextureLength|TextureLength` and `Class.Beam.TextureMode|TextureMode` determine how its [texture](#texture) repeats across its length.
When `Class.Beam.TextureMode|TextureMode` is set to `Enum.TextureMode.Wrap` or `Enum.TextureMode.Static`, the texture repetitions will equal the beam's overall length (in studs) divided by its `Class.Beam.TextureLength|TextureLength`.
