rojo/.cursor/rules/roblox/en-us/effects/beams.md

title	description
Beams	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 and color gradient to create interesting visuals like waterfalls and force fields.
• Modify a beam's transparency so that it fades over time.
• Warp its shape by changing the width or curve of each attachment point.
• Specify the texture's length and mode 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.

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.

2. 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.

   

3. 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.

   

4. 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.

   

5. 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.
2. In the Properties window, select the Transparency property.
3. Input the desired opacity for the beam.

1. In the Explorer window, select the beam.

2. 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.

   

3. 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 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.