âĄQuick Start
Now that everything is setup, we will launch an animation by the end of this page
Last updated
Now that everything is setup, we will launch an animation by the end of this page
Last updated
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
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.
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.
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
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.
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
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.
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.
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"
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.
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.
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 !
Right click on "Content" and select "New Folder"
Name the "MainMap" and click "Save"
If you don't see your "Outliner". At the top of the window, click "Window" -> "Outliner" -> "Outliner 1"
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
Clicking on the left corner of the "ContentBrowser"
Richt click and selecting "Import to..."
Then click on "Import All" and normally youshould see your Skeletal Mesh , your Physical Asset , your Skeleton and a bunch of materials.
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"
Clicking on the "Event Graph" tab on top of the window
If you don't see the "My Blueprint" panel. On top of the window, click "Window" -> "My Blueprint"
The icon under "Interfaces" -> "Kinetix" -> "Networking" and "Send Networked Pose" should turn Yellow to confirm that it has been implemented
Clicking on the preview's "Compile" button
Clicking on "Compile" at the top of the window
Click on then select "Blueprint Class"
Right Click inside the folder and select "Blueprint Class"
Once inside the blueprint. Under "Components" panel, click on and type "skeletal mesh" and select "Skeletal Mesh"
If you don't see your "Details" panel. At the top of the window, click on "Window" -> "Details"
Going under the blueprint menu marked by symbol, under "World Override" section and "GameMode" entry, go to "Create", select "GameModeBase"
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
If you don't see the "Palette" tab. Go at the top of your window and into "Window" -> "Palette"
Same, if you don't see your "Hierarchy" panel, on top of the window. Go to "Window" -> "Hierarchy"
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"
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
First add the event "OnInitialized". To do that, click on the button inside "My Blueprint" panel, under "Override Function", select "On Initialized"
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".
