PcoWSkbVqDnWTu_dm2ix
We use cookies on this site to enhance your user experience

Jul 03 2018, 10:31 AM PST 15 min

In this tutorial, you’ll learn:

  • How to create your own fire effect using Beam objects
  • How to create Attachments on Parts and set their positions
  • How to set a Beam’s Beam/Color and Beam/Transparency over its length.
  • How Beam/LightEmission works on two Beam objects

Tutorial final product

Steps

  1. Under the Home tab in the Insert section, insert a Part.
    Inserting a PartSelected part
  2. Under the Model tab in the Constraints section, select Attachment. With that tool selected, click twice on your Part in two different spots in the game view to create two Attachment objects. In the Explorer window, notice how the two objects have been parented to the Part.
    Creating an AttachmentCreated AttachmentsAttachments in the Explorer Window
  3. Rename these Attachments to “Center” and “Top”. Do this by right-clicking them in the Explorer window and selecting Rename or pressing F2.
    Renamed Attachments in Explorer
  4. Select the Center Attachment. In the Properties window, set its Attachment/Position to 0, 0, 0. Set the Top Attachment’s Position to 0, 10, 0. Position relocates an Attachments relative to the Part.
    Attachment Position in the Properties Window
  5. Select the Part. Under the Model tab in the Gameplay section within the Effects dropdown, insert a Beam object.
    Inserting a Beam effectBeam in the Explorer window
  6. The new Beam will be selected upon insertion. In the Properties window, with the new Beam selected, set the Beam/Attachment0 property to the Center Attachment and the Beam/Attachment1 property to the Top Attachment.
    Tip: To set object reference properties like Attachment0 and Attachment1, click the space to the right of the property. Then, click the object in the Explorer window, or the X to clear the property.
    Upon setting both properties, the beam will render on the Part in the game view. It should look like this:
    Beam preview - step 6
  7. Set the Beam’s Beam/Texture property to the following:
    rbxassetid://1849531275 (Preview)
    This texture is a 128 by 1024 repeating transparent white smoke texture.
    Tip: You can just paste the number portion (the asset ID) and Roblox Studio will fill in the prefix.
    Upon being set, the beam will now render the texture. It will also be moving upwards due to the Beam’s TextureSpeed property, which is 1 by default.
    Beam preview - step 7
  8. Set the Beam’s Beam/Width0 property to 4, and the Beam/Width1 property to 8. This will make the beam render in a sort of cone-shape, where it is thin on the bottom and wide on the top.
    Beam preview - step 8
  9. Next, select the Beam’s Beam/Transparency property in the Properties window. Click it, and when you go to type in a number, instead click the […] that appears to the right of the field.
    Beam Transparency Field
    A line graph will appear. This is an editor used for DataType/NumberSequence type fields. For Transparency, the X axis represents the position in the rendered beam from Attachment0 to Attachment1. The Y axis represents the Transparency of the beam at that position. By default, this is 0.5 throughout the Beam, shown by the horizontal line at 0.5.
    Beam Transparency Graph - Constant
    Mouseover the left point (at Time = 0) to select it. Set its Value to 0 by dragging it to the bottom of the line graph. Set the value of the right point (at Time = 1) to 1. This will cause the Beam to render completely opaquely near Attachment0 and fade out near Attachment1. The graph should now look like this:
    Beam Transparency Graph - Linear
    The Beam will now look like this. Notice how there is no hard edge at the top of the beam near Attachment1.
    Beam preview - step 9
  10. Select the Beam’s Beam/Color property. Much like Transparency, you can click the […] while editing it to open a DataType/ColorSequence editor. Similar to Transparency, this graph determines the color of the Beam’s Beam/Texture depending on the position.
    Beam Color Graph
    We want the Beam to fade from white to orange to red. Click the right color stop (at Time = 1) to select it, then click Color to change the color to red. Do the same for the left color stop (at Time = 0) and change it to yellow.
    Beam Color Graph - Gradient
    The beam will now blend from yellow to red from Attachment0 to Attachment1, with an orange color in between. It will look like this:
    Beam preview - step 10
  11. Enable the Beam’s Beam/FaceCamera property. This will cause the rotate 2D face of the Beam on the Attachment0-Attachment1 line such that the Beam will always face the Camera. Try looking at the Beam from different camera angles to see how this property works.
  12. Change the Beam’s Beam/LightEmission property to 1. The Beam will appear slightly brighter, as LightEmission causes the Beam to render with additive blending.
    Beam LightEmission and TextureSpeed in Properties window
  13. Change the Beam’s Beam/TextureSpeed to 0.4 and rename the Beam to BeamA. Press CTRL+D to duplicate the Beam and rename the copy to BeamB. Change BeamB’s TextureSpeed to 0.8.
    The part will now look significantly brighter, as there are two Beams with additive blending. BeamB’s texture is moving faster than BeamA’s so when the textures’ colors blend they will create a sort of smokey effect.
    Beam preview - Step 13
  14. With the Part selected, add a Smoke object (under the Model tab in the Gameplay section, the Effects menu):
    Inserting a Smoke object
  15. For the Smoke object, set the Smoke/RiseVelocity to 5, Opacity to 0.2 and the Smoke/Color to black. This will contrast the bright colors of the Beam objects.
    Beam preview - step 15
  16. Now get creative! Start fiddling around with the properties you’ve set in the previous steps. Here are some ideas.
    1. Try creating a new Attachment at 0, 15, 0 called Top2 and setting the BeamB’s Attachment1 to the new attachment. This will cause some of the flames to rise higher.
    2. Set the Part BasePart/Transparency to 1 so it is not visible. Notice the hard edge at the bottom. Try setting the Transparency so that the beams fade near Attachment0.
      A customized Transparency graph
    3. With the Center Attachment selected, add a PointLight object under Effects. Set its PointLight/Color to orange and its Range to 12.
      Inserting a PointLight
    4. Try different Beam/Textures! Here is a transparent white puff. Set BeamB’s TextureLength to 1.25, and its Texture to the following:
      rbxassetid://1525327413 (Preview)
  17. Here is a link a free model of the effect when the steps above are taken: Final Product

Here’s a variation of the beam fire effect that I came up with after playing around for a few minutes. See if you can recreate it.
Tip: Make a copy of your effect every time you change something. That way you can go back to a more basic version of the effect.
Pink fire Beam effect - try recreating me!

Tags:
  • fire
  • effect
  • fx
  • textures