CRI Sofdec(Unreal Engine) v1
Introduction 05 Full Screen Playback and Movie Playback in UI (Mana Player)
In this chapter, we will show you how to play Sofdec movies in FullScreen and UI.
FullScreen movie playback can be achieved by using UMG (Unreal Motion Graphics), which allows you to attach an image that covers the entire screen to the UI layer and display it.
The specific steps are as follows:
1. Import Sofdec movie and prepare Mana assets
Follow the instructions in "Introduction 01 Simple Playback of Sofdec Movies (Mana Player Edition)" to import a full-screen movie into UE5.
From the Material Editor, select the "Result Node" of the material.
In the Details panel, change "Material Domain" to "User Interface".
This makes the movie material available for use in UMG widgets.
Note: If necessary, you may need to relink the output from the ManaColorSpaceConverter to the Final color (and opacity, if an alpha movie is used) of the result node.
2. Add a new UserWidget Blueprint to the scene
In the Content Browser, create a new Blueprint Class.
Expand "All Classes" and select "Visual/Widget/UserWidget".
Rename the created asset to "FullScreenWidget".
3. Edit the widget
In the Palette panel, search for the Image widget and drag and drop it onto the designer.
Select the Image widget in the Designer, expand “Appearance/Brush” in the Details panel, and set the movie material in the “Image” field.
4. Editing the level blueprint
Open the level blueprint ("Blueprints" button -> "Open Level Blueprint...")
Add the following blueprint code:
You can copy the blueprint code here:https://blueprintue.com/blueprint/f4vovdgr/
Create three variables:
| Object Type | explanation |
| Mana (see Mana Player Object) | Owns the Mana Player for playing movies. |
| Widget (FullScreenWidget object reference) | Owns a widget for viewing movies. |
Set "Mana" in the details panel of the "Mana Player" node.
Set “In Mana Texture” on the “Set Texture” node.
Set the “Open Movie Source” node to “In Mana Movie”.
When the movie playback finishes, the "OnEndReached" event occurs, at which point the FullScreenWidget is hidden.
This Blueprint also adds the following new variables:
- Is Playing (Boolean) Holds the playing status.
Movie playback in UI
You can create the UI by following the steps in "Playing movies in full screen" above.
Then, add the required UI objects in UMG and connect the actions.
Here we will use a UI with a play and stop button as an example.
How to play movies in the UI
Add a button to the UI.
Widget Designer
In the Blueprint, add a variable for the "Mana Player" reference and add the event code for when the button is clicked.
Pressing the "Stop" button will call Mana Pause, and pressing the "Play" button will call Mana ReWind.
In the Content Browser, select "Add" -> "User Interface" -> "Widget Blueprint".
Here, the name will be "UiPlayerWidget".
Drag and drop "Panels" -> "Canvas Panel".
Next, drag and drop "General" -> "Image".
Similarly, drag and drop "General" -> "Button".
This time we will provide two buttons, "Stop" and "Play", which will control playback and stopping of the video.
Next, add text to the button.
Drag and drop "General" -> "Text" onto the button you placed.
Then, in the "Details" tab, enter the text you want to display under "Content" -> "Text".
Next, change the name of the Button in "Hierarchy". It doesn't matter what the name is as long as it makes it clear which button is "Stop" and which is "Play".
(In this case, they are "Button_Stop" and "Button_Play")
Widget Blueprint
Sets the control mode to give the user control over the UI.
Select "Graph" from the top right of the currently open "Widget Designer."
Level Blueprint
You can copy the blueprint code here.
https://blueprintue.com/blueprint/j_bfoawd/
Unreal Engine Manual Reference
For more information on UMG and Actor Components, see the Unreal Engine documentation.
UMG http://api.unrealengine.com/JPN/Engine/UMG/
Actor Component http://api.unrealengine.com/JPN/Programming/UnrealArchitecture/Actors/Components/