Make Your Portal Glow: Creating a Swirling Material
Tutorial beginner

Make Your Portal Glow: Creating a Swirling Material

Updated beginner

Make Your Portal Glow: Creating a Swirling Material

Welcome back, builders! We are going to make our Mystic Portal look magical. Right now, it might look like a flat hole. We want it to look like a swirling vortex of energy. To do this, we need a special skin for the center of the portal. In game making, we call this a Material. A Material is like a digital sticker or paint job for a 3D object. It tells the computer how light hits the object. We will use a swirling image to make the center spin. This makes the portal feel alive and ready for action.

What You'll Learn

  • What a Material is and why we need it.
  • How to add a new Material to your project.
  • How to create a 3D disc shape for the portal.
  • How to combine the shape and the look.

How It Works

Think of a video game character. They have a body (the shape) and clothes (the look). The body is a Static Mesh. This is a 3D model that does not move on its own. It is just a shape, like a toy block. The clothes are the Material. This is the texture or image that wraps around the shape.

We need two things. First, we need a Material that looks like swirling smoke or magic. Second, we need a flat, round shape (a disc) to put that Material on. The disc goes in the middle of the portal. The swirling Material makes it look like something is happening inside. This is called refraction. Refraction is when light bends. It makes things look like they are underwater or behind glass. This effect makes the portal look deep and mysterious.

Let's Build It

We will build this in two parts. First, we make the look. Second, we make the shape.

Part 1: Create the Swirling Material

Open the Content Browser. This is your inventory of all your game items. It is like a backpack in a game.

  1. Right-click anywhere in the empty space.
  2. Select Material from the menu.
  3. A new item appears. Name it Mystic_Swirl_Mat.
  4. Double-click it to open the Material Editor. This is where we mix colors.
  5. We need an image to make it swirl. You can use a provided image or make your own.
  6. Import your swirling image into the project.
  7. Drag the image into the Material Editor.
  8. Connect the image to the Base Color pin. This is the main color of the object.
  9. Save your Material.

Part 2: Create the Portal Center Disc

Now we need a shape for the Material to cover.

  1. Go to the Modeling tab in the toolbar. This lets you draw 3D shapes.
  2. Click Create.
  3. Select Disc.
  4. Set the Radius to 200.0. This is the size of the circle.
  5. Set the Material slot to your new Mystic_Swirl_Mat.
  6. Place the disc in the center of your portal.

Now your portal has a spinning center! It looks like a real magical gateway.

Verse Code Example

Verse is the code language for Fortnite islands. It controls how things behave. We can use Verse to make the portal appear when a player steps on a trigger. Here is a simple example. This code checks if a player is near the portal. If they are, it turns the portal on.

# This is a simple Verse script for the portal
# It makes the portal appear when a player is close

using { /Fortnite.com/Devices }
using { /Verse.org/Sim }

# We define a device called MysticPortal
# This device holds our portal logic
actor class MysticPortal is Interactor {
    # This is a variable for the portal mesh
    # A variable is a box that holds data
    PortalMesh : StaticMeshComponent = nil

    # This function runs when the game starts
    OnBegin<override>()<suspends> {
        # We find the mesh in the level
        # We get it from the World
        PortalMesh = World::GetWorld().GetActors()[0]
    }

    # This function runs when a player touches us
    OnInteract<override>(Other : Actor) {
        # We check if the other actor is a Player
        if (Other:IsA<Player>()) {
            # We make the portal visible
            # This is like turning on a light
            PortalMesh.SetVisibility(true)
        }
    }
}

Walkthrough:

  • actor class MysticPortal: This creates a new type of object. It is like a blueprint.
  • PortalMesh: This is a variable. It holds the 3D shape of the portal.
  • OnBegin: This runs once when the island loads. It gets ready.
  • OnInteract: This runs when someone clicks or touches the portal.
  • SetVisibility(true): This makes the portal appear. It was hidden before.

Try It Yourself

You have made the look and the shape. Now make it interactive!

Challenge: Add a sound effect to your portal. When a player touches the portal, play a "whoosh" sound.

Hint: You can use a SoundComponent in your device. Connect it to the OnInteract function. Test it by playing your island and clicking the portal.

Recap

You learned how to make a portal look magical. You created a Material to give it a swirling look. You made a Disc shape to hold that Material. You also wrote simple Verse code to make the portal appear. This is how you build cool, interactive worlds in Fortnite. Keep building and have fun!

References

  • https://dev.epicgames.com/documentation/en-us/fortnite/mystic-portal-3-create-portal-material-in-unreal-editor-for-fortnite
  • https://dev.epicgames.com/documentation/en-us/fortnite/mystic-portal-4-create-the-portal-center-in-unreal-editor-for-fortnite
  • https://dev.epicgames.com/documentation/en-us/fortnite/mystic-portal-in-unreal-editor-for-fortnite
  • https://dev.epicgames.com/documentation/en-us/fortnite/mystic-portal-1-create-spark-particles-in-unreal-editor-for-fortnite
  • https://dev.epicgames.com/documentation/en-us/fortnite/mystic-portal-2-create-inner-portal-ring-in-unreal-editor-for-fortnite

Verse source files

Turn this into a guided course

Add mystic-portal-3-create-portal-material-in-unreal-editor-for-fortnite to your free study plan — we'll suggest related pages and stitch the lot into one compile-checked, self-guided lesson with worked examples and quizzes.

Original tutorial generated by Verse Island from the Verse/UEFN knowledge base, with references to the Epic Games sources above. Code is validated against the knowledge base.

Comments

    Sign in to vote, comment, or suggest an edit. Sign in