Make Your UI Pop with Viewmodel Images

Do you want your game's health bar or ammo counter to look super cool? You can use images from your character's hands to show on the screen! This tutorial shows you how to take a picture from a viewmodel and put it into your User Widget. It is like putting a sticker on a notebook. You will learn to make your game feel more alive.

What You'll Learn

• What a Viewmodel is.
• What a User Widget is.
• How to use Conversion Functions.
• How to show an image on screen.

How It Works

Imagine you are playing a game. You see your character's hands holding a sword. That is the Viewmodel. It is the 3D model you see in front of your eyes.

Now, imagine you have a piece of paper. That is your User Widget. It is the 2D screen in the corner of your game. It shows things like health or scores.

Sometimes, you want to show the sword on the paper. But the sword is 3D. The paper is 2D. This is a problem!

We need a Conversion Function. Think of this like a translator. It takes the 3D sword picture. It turns it into a 2D sticker. Then, you can stick it on your paper.

There are two special translators for this:

1. Make Image Brush From Texture: This works if you have a simple picture file.
2. Make Image Brush From Material: This works if you have a fancy material with effects.

We will use the Texture one. It is easier for beginners.

Let's Build It

First, you need two things in your Fortnite Island Editor:

1. A Viewmodel that holds an image or texture.
2. A User Widget with an Image widget on it.

Here is the Verse code to make it work.

using { /Fortnite.com/Devices }
using { /UnrealEngine.com/Temporary/UI }
using { /UnrealEngine.com/Temporary/SpatialMath }

# This is our main device.
# It connects the viewmodel to the UI.
device show_image_example : creative_device :

    # This is the image widget defined in the companion
    # User Widget asset. We reference it by its property name.
    # note: image_widget must match the widget variable name
    # set in your UEFN User Widget Blueprint asset.
    @editable
    ImageWidget : image = image{}

    # This texture is assigned in the UEFN editor Details panel.
    # Drag your desired Texture2D asset into this slot.
    # note: texture_2d is the real Verse type for a texture asset.
    @editable
    MyTexture : texture = texture{}

    # This function runs when the game starts.
    OnBegin<override>()<suspends> : void =
        # Step 1: Convert the texture to a UI image brush.
        # This is the magic translator!
        # It turns the texture asset into a 2D brush
        # that the image widget can display.
        # note: MakeImageBrushFromTexture is the real
        # conversion function from /UnrealEngine.com/Temporary/UI.
        ImageBrush := MakeImageBrushFromTexture(MyTexture)

        # Step 2: Put the brush on the UI image widget.
        # Now the image shows up on screen!
        ImageWidget.SetBrush(ImageBrush)

Walkthrough

1. Get the Texture: We declare MyTexture with @editable so you can drag any Texture2D asset into the slot inside the UEFN editor Details panel. This is like choosing a specific book from a library before the game starts.
2. Convert It: We use MakeImageBrushFromTexture. This is the translator. It takes the texture asset and makes it ready for the UI.
3. Set the Brush: We tell the ImageWidget to use this new brush. Now, the image appears!

Try It Yourself

Can you make the image change when you press a button?

Hint: You can use a Trigger device. When a player steps on it, run a new function. In that function, change the texture name or load a different texture. Then, run the conversion function again!

Recap

• A Viewmodel is what you see in 3D.
• A User Widget is what you see on the 2D screen.
• Conversion Functions help you move images from 3D to 2D.
• You can now make your UI look amazing with custom images!

References

• https://dev.epicgames.com/documentation/en-us/uefn/conversion-function-show-textures-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/uefn/conversion-functions-showing-textures-from-a-viewmodel
• https://dev.epicgames.com/documentation/en-us/fortnite/conversion-functions-showing-textures-from-a-viewmodel
• https://dev.epicgames.com/documentation/en-us/uefn/using-viewmodel-in-umg-in-unreal-editor-for-fortnite
• https://dev.epicgames.com/documentation/en-us/fortnite/using-viewmodel-in-umg-in-unreal-editor-for-fortnite