Engine

Adding Animations

To implement animations in-game, use scripts. For this tutorial, you'll implement the previously made victory animation using a pre-made script. Once finished, this animation can be used to celebrate a player's accomplishment, like reaching the end of an obby or finding a secret.

Scripting Animations

Animations are triggered using scripts. One approach is to use events to play animations in a variety of situations, like a player finishing a level, defeating an enemy, or even making an in-game purchase.

Set up the Project

For this project, you'll create parts that when touched, trigger an animation for that player.

  1. To organize all parts that will play the animation, add a folder in Workspace (hover over Workspace and click +) named TouchPartFolder.

  2. In TouchPartFolder, add a part.

    Make sure the part is placed where playing the animation would make sense, such as the end of a level or near an object players collect.

    Example Victory Part
    Example Interaction Part
  3. In StarterPlayer > StarterCharacterScripts, create a LocalScript named TouchPartRegister. Then copy and paste the code below.


    -- Used with "PlayerAnimationFeedback" script to play animations on part touches
    -- Services
    local ReplicatedStorage = game:GetService("ReplicatedStorage")
    local Players = game:GetService("Players")
    local player = Players.LocalPlayer
    local character = player.Character or player.Character:Wait()
    local humanoid = character:WaitForChild("Humanoid")
    local canTouch = false
    -- Include feedback animation module
    local PlayerAnimationFeedback = require(ReplicatedStorage:WaitForChild("PlayerAnimationFeedback"))
    -- Function called when a part is touched
    local function onPartTouch(otherPart)
    if humanoid and canTouch == false then
    canTouch = true
    PlayerAnimationFeedback:PlayAnimation()
    canTouch = false
    end
    end
    -- On startup, call animation module load function
    PlayerAnimationFeedback:LoadAnimation(humanoid)
    -- Also bind a folder of parts to the "Touched" event to run "onPartTouch()"
    local touchPartFolder = workspace:WaitForChild("TouchPartFolder")
    local touchParts = touchPartFolder:GetChildren()
    for i, touchPart in touchParts do
    touchPart.Touched:Connect(onPartTouch)
    end

    This script finds all parts in the TouchPartFolder and gives them Touched() events. When fired, the event runs a function that plays an animation for a player.

  4. The next script triggers animations for a player. In ReplicatedStorage, create a new ModuleScript named PlayerAnimationFeedback. Then, copy and paste the code below.


    -- Used with "TouchPartRegister" script to play animations for a player
    local PlayerAnimationFeedback = {}
    local feedbackAnimationTrack
    local ANIMATION_FADE = 0.3
    local ANIMATION_ID = "rbxassetid://YOUR_ANIMATION"
    -- Function to load animation onto player's character
    function PlayerAnimationFeedback:LoadAnimation(humanoid)
    local feedbackAnimation = Instance.new("Animation")
    feedbackAnimation.AnimationId = ANIMATION_ID
    feedbackAnimationTrack = humanoid.Animator:LoadAnimation(feedbackAnimation)
    feedbackAnimationTrack.Priority = Enum.AnimationPriority.Action
    feedbackAnimationTrack.Looped = false
    end
    -- Function to play the animation
    function PlayerAnimationFeedback:PlayAnimation()
    feedbackAnimationTrack:Play(ANIMATION_FADE)
    task.wait(feedbackAnimationTrack.Length)
    end
    return PlayerAnimationFeedback

Playing Animations

Animations must be identifed in a script, loaded, and played.

Setting the Animation

The script needs to know which animation to play. To use an exported animation, find its asset ID through a web browser. That ID will then allow that animation to be loaded in the script.

  1. Open the Animations section of the Create page.

  2. Locate and click an exported animation.

  3. Copy its ID from the URL in your browser.

  4. In the script, PlayerAnimationFeedback, replace the placeholder, YOUR_ANIMATION (Line 8), with the ID you copied.

  5. Run the project and test that once a player hits the part, you see the animation.

Next Steps

Below are a few ways to continue learning

Learn About Animation

So far, you've learned how to create animations and add them into experiences. To continue learning, we recommend visiting the Animation overview.

On that page, you'll find useful links to improving animations, such as using the curve editor for smooth movement, or tips in refining animations.

Animate Parts

Additionally, start the optional lesson Animating Parts to learn how to code tweens, a feature that lets you scale, rotate, and move parts. A sample of the final project is below.