Skip to content

rive-app/rive-unreal-examples

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

94 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

NOTE: This repository uses a deprecated version of the Rive Unreal plugin. It is being kept visibile for those using old versions of the plugin. The rive-unreal-demos repository contains examples using the newer Rive Unreal plugin and API.

Clone the project.

git clone [email protected]:rive-app/rive-unreal-examples.git
cd rive-unreal-examples
git submodule init
git submodule update
RiveExamples_-_Unreal_Editor_2024-03-02_16-18-28.1.mp4

a. How to start the project

đź’ˇ If you are using Windows, you would need to set the RHI interface to use DX11.

đź’ˇ If you are making an Android Build, make sure using OpenGL instead of Vulcan.

  • Open the project and play the DemoRoom game. /Content/Rive/DemoRoom.umap

image

  • DemoRoom input control
Keybind Explanation
Mouse XY 2D-Axis Look
W Move Forward
A Move Left
S Move Backward
D Move Right
Space Jump
Shift Speed Up
Esc Exit Game

b. How to use Rive in Unreal Engine

  • Import .riv assets into Unreal Engine

  1. Create asset in Rive Editor
  2. Download asset

Record_2024_03_04_23_22_43_574

  1. Import file - Drag and Drop into UE

Record_2024_03_04_23_26_00_750

  • Create UMG Widget asset with Rive Widget

Record_2024_03_04_23_31_16_772

  • Create Rive Instance from Rive File

Record_2024_03_04_23_34_36_231

  • Assign Rive File as material to 3D geometry

Record_2024_03_04_23_38_10_600

  • Spawn Rive Widget Actor

Record_2024_03_04_23_39_34_667

  • Adjust Rive File Properties

You can adjust settings of a Rive file using the following properties.

  • Artboard Name
  • State Machine Name
  • Rive Fit Type
  • Size

Record_2024_03_04_23_41_49_414

c. How to use Rive blueprints

See example blueprints under /Content/Rive/RiveExampleContent/Blueprints/

  • Runtime single artboard workflow

Initialize 1 artboard in runtime. See example, BP_SingleArtboard for complete blueprint logic.

image

  • Runtime Multiple artboard workflows

  1. Initialize 3 artboards in runtime. See example, BP_MultiArtboards for complete blueprint logic.

image image image

  1. transform/translate/align

image

  1. Create runtime widget

image

  1. Resize the texture

image

  • Sending condition events from UE to Rive

See example, BP_3DConditionsEvent for complete blueprint logic.

  1. Create event and bind events to transition in Rive Editor

Record_2024_03_05_11_02_57_892

  1. Create binding event in UE so it can change conditions in Rive

image

  • Receiving reported events

See example, BP_3dReportedEvents for complete blueprint logic.

  1. Create event and event properties in Rive Editor

Record_2024_03_05_11_39_41_826

  1. Listen to reported events in UE

image

image

  • UE 3D widget User Input interaction

See example, BP_3dUserInput for complete blueprint logic.

  1. Create Inputs in Rive Editor

image

  1. Create Blueprint Set Bool Value/Set Number Value/ Fire Trigger

image

image

image