⚡Quick Start

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

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

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 behavior of the SDK for debug purposes.

  • Cached Emotes => Number of emotes to save on disk for bandwoth saving

  • 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:

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

Name that folder "Maps"

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

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

  • 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:

  • Dropping your file from Windows explorer directly inside Unreal

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

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"

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

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

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 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"

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

  • Or use F7 command.

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"

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

Click on "Pawn"

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

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.

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"

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

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:

  • 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.

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".

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

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"

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

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"

Making the widget functional

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

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 add a node "Launch URL" and connect it to the "On Pressed" event of "BT_Create"

Inside "My Blueprint", under "Variables" section, drag and drop "Url" on the pink input "URL" of "Launch URL"

The code should look like this.

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

From the metadata, drag and dropn 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 Metadats" 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.

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

Connect the output execution of "SET" to the node and its ouput to its "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

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"

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"

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"

From a "KinetixCoreSubsystem", get a "Kinetix Animation" and ask for "Set Reference Skeleton"

Connect it to the "SET" node

From the "Components" panel, drag and drop the "Skeletal Mesh" into the graph

Ask for "Get Skeletal Mesh Asset" and connect it to the "In Skeletal Mesh" input of "Set Reference Skeleton"

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 !

Last updated