⚡Quick Start

Now that everything is setup, we will launch an animation by the end of this page

We assumed that from here you followed the setup Set-up Unreal Engine & Download the SDK

The initialization of the Kinetix SDK should only be done ONCE when the app starts.

Project Settings

You can initialize the SDK with parameters in the KinetixCoreConfiguration available in Edit -> Project Settings -> Game -> Kinetix Settings.

• EnableAnalytics => true if you want to help us improve our SDK by sharing usage data.

• ShowLogs => true if you want to log the behaviour of the SDK for debug purposes.

• Cached Emotes => Number of emotes to save on disk for bandwidth saving. Value must be higher than 0 (we recommend 255)

• Game API Key => Here is the field where you insert the Game API Key you got from Developer Portal.

Make sure to set the cached emote setting above 0

Actors Setup

World setup

We will create a separate world to avoid interfering with your work. For that, go at the top of the window and select "File" and then "New Level"

Select the "Basic" level as we don't need to warm up our room with an open world with World Partition and click "Create"

Save our newly created map by using Ctrl + S command.

It will ask for the destination of your map. Click on "Content" folder and create a new folder inside it called "Maps" by:

• Right click on "Content" and select "New Folder"

• Left click on "Content" and use Ctrl + N command

Name that folder "Maps"

Name the "MainMap" and click "Save"

We will get rid of the unnecessary actors of the basic template. For that, go to the "Outliner"

If you don't see your "Outliner". At the top of the window, click "Window" -> "Outliner" -> "Outliner 1"

Select "ExponentialHeightFog", "SkyAtmosphere", "SkyLight", "SM_SkySphere" and "VolumetricCloud" by clicking "ExponentialHeightFog" and while holding Shift, click on "Volumetric Cloud":

Now delete them by either:

• Pressing "Delete" on the keyboard

• Right click on any of the selected actors, select "Edit" and then "Delete"

  

Save the level by using:

• Ctrl + S command

• At the top of the window, select "File" and then "Save Current Level"

  

Our world is practically all setup to welcom our pawn. Let's create it.

Pawn setup

To setup the Pawn correctly, we will first need a valid mesh.

Make sure to follow the Avatar Upload, and setup your mesh to be adle to get an Avatar ID as we will need it in the final part.

👽Avatar Upload

Importing the mesh

To import a new mesh, we will first create a repertory for it. So open the "Content Browser" by:

• Using Ctrl + Spacebar command

• At the bottom of the window, click on

If you don't see your "Content Browser". At the top of the window, select "Window" -> "Content Browser" -> "Content Browser 1"

Click on , then add a new folder called "Blueprints" by:

• Right clicking on the folder and select

• Click on and the select

• Or directly use Ctrl + N

Create a second folder called "Characters", and another with any name you want. We will call it "MyCharacter". This one will hold all the assets like Skeletal Meshes, Skeleton, Materials...Etc

Go into that folder and import your skeletal mesh by:

• Clicking on the left corner of the "ContentBrowser"

• Dropping your file from Windows explorer directly inside Unreal

• Richt click and selecting "Import to..."

A window appears to setup the importation of the mesh. Go into "Mesh" section, deploy "Advanced" and put "Import Morph Targets" to true

Then click on "Import All" and normally you should see your Skeletal Mesh , your Physical Asset , your Skeleton and a bunch of materials.

We will rename the skeletal mesh as "SKM_MyCharacter". The other ones we will not use them. To do that, select your skeletal mesh (the pink one) and either:

• Right click on it and select "Rename"

  

• Or use F2 command on your keyboard

Creating the Anim Blueprint

In order to play our animations, we need to create an Anim Blueprint. So to do that, right click on your Skeletal Mesh, go to "Create" under "Skeletal Mesh" section and select "Anim Blueprint"

Name it "ABP_MyCharacter" and open the newly created asset.

Reparent your Anim Blueprint to "KinetixAnimInstance" type by:

• At the top of your window, select "File" and "Reparent Blueprint"

  

• Click on and inside the "Details" panel (if you didn't have it it should automatically open). Under "Class Options" change the "Parent Class" from "Anim Instance" to "KinetixAnimInstance"

  

Once it's done, open the "Event Graph" of the Anim Blueprint by:

• Clicking on the "Event Graph" tab on top of the window

• Clicking on "Event Graph" inside the "My Blueprint" panel located under "GRAPHS" section

  

If you don't see the "My Blueprint" panel. On top of the window, click "Window" -> "My Blueprint"

Add the necessary nodes "Send Networked Pose" and "Set Network Modes" inside the blueprint by:

• The first one by double clicking on "Send Networked Mode" inside "My Blueprint" under "Interfaces" section, "Kinetix" then "Networking" and finally "Send Networked Pose"

The icon under "Interfaces" -> "Kinetix" -> "Networking" and "Send Networked Pose" should turn Yellow to confirm that it has been implemented

• The second one by right clicking inside the "Event Graph" and typing "Send Networked Pose" and selecting the first one on the list

  
• The last one by right clicking inside the "Event Graph" and typing "Set Network Mode"

  

  It should look like that:

  

Once the three events are implemented, compile the blueprint by:

• Clicking on the preview's "Compile" button

• Clicking on "Compile" at the top of the window

• Or use F7 command.

Setting up the blending

The SDK add a blending between the start and the end of the animation. To be able to display it, double click on the "AnimGraph" located under the "Animation Graph" of "My Blueprint" tab

Once in the Anim Graph, drag and drop from the "Output Pose" and start typing "Slot Default"

Select "Slot 'DefaultSlot'"

It should be bound automatically to the "Output Pose" node of the Anim Graph.

Compile, save your blueprint and close it by clicking the cross at the right of the "ABP_MyCharacter" major tab.

Create and setup the pawn

Now let's assemble averything made previously by creating the blueprint that will hold our skeletal mesh and anim blueprint.

Go back to the "MainMap" major tab.

Open the "Content Browser", and under the "Content" folder, create a folder called "Blueprints". Select this folder.

Create a blueprint by:

• Right clicking on the "Blueprints" folder and under "Add/Import Content", select "Blueprint Class"

  

• Click on then select "Blueprint Class"

• Right Click inside the folder and select "Blueprint Class"

It will open a new window to select the parent class.

Click on "Pawn"

Name it "BP_MyCharacter", use "Enter" and open the blueprint.

Once inside the blueprint. Under "Components" panel, click on and type "skeletal mesh" and select "Skeletal Mesh"

Drag and drop the newly skeletal mesh by left clicking on its icon and while holding the left click, move it to "Default Scene Root" to make it the new root of your Pawn.

If you're using a relative located Skeletal Mesh Component (like the Third Person Template) and you notice an offset when playing our animations. Please make sure that your component's relative location is correctly set. For example. the Third Person Character given with the Third Person Template is slightly above the ground and you have to put its "Z" relative location from -89 to -94.

Now let's configure the skeletal mesh component with the assets we created/imported ago.

Under "Details" panel, in "Animation" section set the "Anim Class" to "ABP_MyCharacter"

If you don't see your "Details" panel. At the top of the window, click on "Window" -> "Details"

Now go to the "Mesh" section and set the "Skeletal Mesh Asset" to your skeletal mesh imported before. For me it will be "SKM_MyCharacter". So click on the combobox and start typing "SKM" and select the right mesh.

Now go back to the "Components" tab and add a "Spring Arm" component. It should automatically be a child of the Skeletal Mesh component.

Inside the "Details" panel, under the "Transform" section, update the "Location" and "Rotation" to put the red wire on the "Viewport" in front of our character. For us it will be this

Now go back to the "Components" panel and add a "Camera" it should be a child of the Spring Arm recently created

Your character should look like this

Compile, save and close BP_MyCharacter major tab

Creating the game mode

Now that everything is configured. The last step is to setup a game mode in such way that it will spawn our BP_MyCharacter when we play our level.

To do that open the "Content Browser" and inside "Blueprints" folder. Create a blueprint of type "game mode base" by:

• Going under the blueprint menu marked by symbol, under "World Override" section and "GameMode" entry, go to "Create", select "GameModeBase"

  

  In the new window, select the folder "Blueprints", name it "GM_MyGameMode" and click "Save"

  

  It automatically opens

• Or create a blueprint like any else, select "GameModeBase" as parent class. And save it into the "Blueprints" folder.

  

  Name it "GM_MyGameMode" and open it.

Be ware that this method does not directly set the game mode for your level. To do that, go under your level major tab and inside "World Settings" panel, under "Game Mode" section, set the "Game Mode Override" field to your newly created game mode

Inside GM_MyGameMode, under "Classes" section, set "Default Pawn Class" as a "BP_MyCharacter" pawn by clicking on the combobox, typing "MyCharacter" and selecting "BP_MyCharacter"

Done ! Now let's make a UI that will let you create and play an animation.

UI

Creating the widget

Go inside the "Blueprints" folder and create a new widget blueprint by creating a blueprint but instead of selecting a default blueprint. We will go under "User Interface" section and select "Widget Blueprint"

We will then select the default "User Widget" as our parent class and name it "WBP_MyWidget". Open the widget.

Setup the widget

We will do a basic setup of 2 buttons to send the default browser of your OS to launch our portal and play when the animation is ready your animation.

For that we will first add an Overlay by going in the "Palette" tab, search for "Overlay".

If you don't see the "Palette" tab. Go at the top of your window and into "Window" -> "Palette"

Then add it to the hierarchy by drag and dropping one inside the "Hierarchy" panel, then on top of "[WBP_MyWidget]" entry.

Same, if you don't see your "Hierarchy" panel, on top of the window. Go to "Window" -> "Hierarchy"

Add a "Horizontal Box" as a children of the newly added overlay by doing the same operation.

Click on "Horizontal Box".

Inside the "Details" panel, under "Slot (Overlay Slot)" section. Set its "Horizontal Alignement" to Center Align Horizontally

Add 1 "Button" as a child of the horizontal box

Add 1 "Spacer" as a child of the horizontal box

Add 1 "Button" as a child of the horizontal box

Add a "Text" as a child of the first and the second button

Click on the "Text" of the first button. And inside the "Details" panel, under "Content" section, set its "Text" field to "CREATE"

Under the "Appearance" section, click on the field on the right of "Color and Opacity". A window opens. Click on the pipette and click on the background of the "Color Picker" window. Then click "OK"

Repeat the operation for the second button, except that the "Text" field will be "PLAY" and not "CREATE"

Click on "Spacer" inside "Hierarchy" panel. Inside "Details" panel, under "Appearance" section, set its size to 128.

Click on the first button and inside "Details" panel. Name the button "BT_Create" and set the "Is Variable" checkbox to true

Then go down the "Details" panel by using your mouse wheel, once you have reached the "Events" section, click on the Plus sign of the "On Pressed" event

You're sent to the "Graph Editing Mode" where you can see that the event is created

Go back to the "Blueprint Designer Mode" by clicking the "Designer" button on top right of your window.

Now that you're back. Repeat the operation for the second button, but instead of calling it "BT_Create", you're going to call it "BT_Play"

It should look like this

Making the widget functional

Now that everything is setup, let's add the code necessary to create and play animations.

First add the event "OnInitialized". To do that, click on the button inside "My Blueprint" panel, under "Override Function", select "On Initialized"

Add a node "Set Is Enabled" by right clicking in the graph and typing "SetIsEnabled" and selecting the function under the "Widget" section, not the variable !

Let the "In Is Enabled" to false and connect it to the "On Initialized" event node.

Now add a "KinetixCoreSubsystem" node to the graph the same way

Drag and drop from the subsystem node and type "UGC" and click on "Get Kinetix UGC"

Now the same way, drag and drop from the "Kinetix UGC" node and enter "Get UGCUrl". Add it to the graph.

Connect the node to "Set Is Enabled"

Drag and drop from "Url Fetched Callback", once you release the left click, a window open and extend the "Add Event" to select "Add Custom Event...", name it "OnUGCUrlFetched"

Add a new node "Clear Smart Cache" and connect it to "Get UGCUrl" node.

Right click on the pink output called "Url" of the newly created event "OnUGCUrlFetched" and click on "Promote to Variable"

The node is automatically connected and the variable is created

Add a "Set Is Enabled" node, set its "In Is Enabled" input to true and connect it to the "SET" of "Url" value.

It should looks like this

Now get a "Kinetix Core Subsystem", drag and drop a "Kinetix UGC" and from it, call "Get UGC Url" again.

Connect the execution pin to the "On Pressed" of the "BT_Create" node

Now drag and drop from the red square, add a "Custom Event" and call it "OnURLFetchedAndLaunch"

Drag and drop the "UgcUrl" from the "My Blueprint" tab under "Variables" section and put it on the "Url" output pin. It creates automatically the "SET" node for the "UgcUrl" variable

Now add a "Launch URL" node and connect the output of the "SET" node to the "URL" input

Get the KinetixCoreSubsystem, drag and drop from it and type "Metadata" and select "GetKinetixMetadata"

From the metadata, drag and drop and ask for "Get User Animation Metadatas"

Connect the node to "On Pressed" event of "BT_Play"

Add a custom event from the callback of "Get User Animation Metadatas" called "OnMetadatasAvailable" and make a variable of the output "Metadatas"

from the "SET" node ask for its "Length" and ask if its greater than 0

Branch the result

Get the Metadatas variable and also get its first occurence, ask to break it, and from the "Id" output, right click and promote it to a variable. Call that variable "EmoteToPlay". Connect the "SET" node to the "True" execution pin of the previous branch.

Now just click anywhere and ask for "Get Owning Player", drag and drop the result and call "Get Controlled Pawn", again, drag and drop, and call "Cast to BP_MyPawn". Drag the "As Bp My Pawn" and ask for "Get Skeletal Mesh Asset"

It automatically gets the field "Skeletal Mesh" and call the right node

Now ask for a "KinetixCoreSubsystem", drag and drop and call "Kinetix Animation" drag and drop and call "SetReferenceSkeleton"

Bind the result of "Get Skeletal Mesh Asset" into the input of "Set Reference Skeleton" and bind the execution string from the "Cast to BP_MyPawn" to "Set Reference Skeleton"

Connect the output execution of "SET" to the "Cast"

Get the Kinetix Metadata from the "KinetixCoreSubsystem" and ask for "Get Animation Metadata byAnimation ID"

Connect its execution pin to the "SetReferenceSkeleton" output execution one

Drag and drop "Emote To Play" from the "Variables" section of the "My Blueprint" tab and connect it to the "In ID" input

Create a custom event from the "Callback of "Get Animation Metadata by AnimationID"

Call it "OnMetadataAvailable"

Get the "Kinetix Animation" from a "KinetixCoreSubsystem" and ask for "Set Curve Remapper"

Drag and drop from the "In Remapper" input, type "Create Event" and add it to the graph

Click on the combobox and click on "Create a matching function"

Rename the created function "RemapCurve"

From the "Curve Name" input, drag and drop and ask for "Replace" node.

As the "From" input field, enter "mixamorig:" and connect the "Return Value" of the "Replace" to the "Return Value" of the "Return Value" node

Now close the "Remap Curve" tab and go back to the event graph

Get the "Kinetix Animation" from a "KinetixSubsystemCore" and ask for "Load Local Player Animation" node.

As "AnimationID" input, connect to "Emote To Play"

Promote to variable the input "Avatar UUID", click on it, and inside "Details" panel, check "Instance Editable" and "Expose on Spawn" to true.

It should looks like this

Make an event from the "On Success Callback" input called "OnAnimationAvailable"

Get the "Kinetix Animation" from a "Kinetix Core Subsystem" and ask for a "Play Animation on Avatar"

Promote to variable the "In Player GUID" and like the "Avatar UUID" set it "Instance Editable" and "Expose on Spawn"

Connect the "In Animation ID" to a "Emote To Play"

It should look like this

The UI is done. Compile, save and close the major tab.

Pawn Final Code

Now that everything is set, we only have to connect the UI and its code to our "BP_MyCharacter"

For that, open the "Content Browser", go inside the "Blueprints" folder and open BP_MyCharacter"

Click on the "Event Graph" tab, or if you don't see it, double click on "Event Graph" from the "My Blueprint" panel.

Initialization

Get the "KinetixCoreSubsystem" and ask for the "Register or Call on Initialized" and connect it to the greyed "Begin Play" event node

If you don't see the "Begin Play" node, like the "On Initialized" of the User Widget. Go to "My Blueprint", click on and under "Override Functions", select "Begin Play".

From a "KinetixCoreSubsystem", ask for "Initialize" node, drag and drop from the "In Configuration", then, under "Kinetix" and "Settings", select "Get Core Configuration"

It should look like this

Now from the "Register or Call on Initialized", create a custom event of it called "OnCoreInitialized"

From a "KinetixCoreSubsystem", get "Kinetix Account" and from it, enter "Assign" and select "Assign On Connected Account"

It creates automatically the event for you. Rename it "OnConnectedAccountEvent"

From a "KinetixCoreSubsystem", get "Kinetix Account" and from it, enter "Connect" and select "Connect Account"

Get a "Kinetix Animation" from a "KinetixCoreSubsystem" and call "Register Avatar Anim Instance"

Go into "Components" panel and drag and drop the component "Skeletal Mesh" into the graph

From that skeletal mesh component ask for a "Get Anim Instance" node and bind it to the "In Anim Instance" of the "Register Avatar Anim Instance" node.

In the "Avatar UUID" input, go to your Dev Portal to copy the Avatar UUID of the skeletal mesh you imported before in "Pawn setup"

Kinetix - Portal for developers

And paste it inside the field "Avatar UUID" of the "Register Avatar Anim Instance"

It should look like this:

The Avatar ID you see here is one we generated for our own world following the guide on top of it. Don't use this one !

Promote as Variable the output of "Register Avatar Anim Instance"

Create a function by going to "My Blueprint" and under "Functions" section, click on the "+" sign.

You're directly moved inside that function graph

Call that function "SetupUI"

Right click and ask for "Create Widget"

Connect the execution pins between "Create Widget" and "Setup UI"

As a "Class", set our previously created "WBP_MyWidget"

Right click and ask for "Get Player Controller"

Connect it to the "Owning Player" input of the "Create Widget"

From the "Create Widget" drag and drop the input "Player GUID" and just place it on the "SetupUI"

It automatically creates the Input on "Setup UI" function

Repeat the operation for "Avatar UUID" input

It should look like this

Promote to variable the output of the "Create Widget" and call it "MyUI"

And from the output of the "SET" node, drag, drop and call "Add To Viewport"

Right click and call "Get Player Controller", from it ask for "Set Input Mode Game And UI"

Connect it to the "Add to Viewport" node

From the "My Blueprints" panel, go to 'Variables", and drag and drop "MyUI" and select "Get My UI"

Connect it to the "In Widget to Focus"

Uncheck the "Hide Cursor During Capture"

Copy and paste the node "Get Player Controller" and ask for "Set Show Mouse Cursor".

Set it to true and connect the output execution pin of "Set Input Mode Game And UI" to the "SET"

It should look like this

Close the "Setup UI" tab

Go back to the event graph

Right click and ask for "Setup UI"

Bind the output execution pin of "Set Reference Skeleton" to the input of "Setup UI"

From "My Blueprint", under "Variables" section, drag and drop "Out Guid" (the variable we created as the output of "Register Avatar Anim Instance" node) and bind it as the input for "Player GUID" of "Setup UI"

And finally, paste from the Dev Portal the Avatar ID as the input "Avatar ID" of "Setup UI"

Compile, Save and click Play !

Click "CREATE" to launch the browser and be guided through the process of generating the animation. And once the process is done click Play and see your pawn move !

Stopping the animation

If you want to stop the animation before its end. Open your pawn's blueprint and ask for any key event by right clicking and type, for example "t key" and search for its key event

Once your event is created drag and drop the Skeletal Mesh Component out of the Components tab.

Drag and drop from your newly created mesh node and type "get anim instance" and select "Get Anim Instance"

From the "Get Anim Instance" node drag and drop, and ask for "Stop Slot Animation"

Put "DefaultSlot" as the "Slot Node Name" input and connect the "Pressed" execution pin from the "T" event to the execution input of "Stop Slot Input"