Beginner Tutorial #4: How To Make An Animation Play When A Button Is Clicked!

Resources Community Tutorials
, ,
#1

Hello, developers! :wave:

It’s been a while since my last tutorial Beginner Tutorial #3: How To Make A Simple Shift To Sprint Script! - Resources / Community Tutorials - Developer Forum | Roblox but now I’m back! Today, I’m going to be showing you how to make an animation play whenever you click a button.

Let’s get started!

Step 1: Create a new ScreenGui in StarterGui and insert a TextButton inside in. Customize to your liking.

Step 2: Inside of your TextButton, insert a LocalScript and put an Animation inside it. Change the AnimationId property to the id of the animation you want to play.

Your hierarchy should look like this:
image

Step 3: Firstly, in our script, we need to get the Player. Since we are using a LocalScript, we can get the Player by simply saying:

local Player = game.Players.LocalPlayer

If you don’t know why we do this, I’ll explain really quick. A LocalScript is a special type of script that only runs for each client–computer and/or device–meaning certain things will only happen or be shown on one Player's screen. For example, GUIs are programmed using LocalScripts, as whenever you open or close a menu it only does so for YOU and no one else sees it at that time. Make sense? If you have any questions, let me know below.

Step 4: Get the Character and the Humanoid.

local Character = Player.Character or Player.CharacterAdded:Wait()
local Humanoid = Character:WaitForChild("Humanoid", 5)

Here, we setting the Player's Character to a variable and if we can’t get the Character right away, we will wait until it is added to the game. I am using the WaitForChild function, which pauses the script and waits for the Humanoid to load, and it takes two parameters:

  • The instance to wait for
  • The time to wait for the instance (This parameter is optional; I’m just using it here to try and avoid errors)

Step 5: Get the Animator, which is an Instance responsible for loading and playing animations.
You can read more about it here: Animator | Documentation - Roblox Creator Hub

local Animator = Humanoid:FindFirstChildOfClass("Animator") or Instance.new("Animator", Humanoid)

Here, we look inside the Humanoid for an instance by the ClassName of Animator and if one does not exists, we will create one.

Step 6: Get your Animation which, once again, should be inside of your LocalScript. Create a debounce and set it to true. A debounce is a technique used to delay the function continuing until a certain amount of time has passed since it was last called. This prevents the function from firing multiple times if the button is being spammed.

local Animation = script.Animation
local debounce = true

Step 7: Connect the MouseButton1Click event of the TextButton to a function. This event only fires whenever our button is clicked. Check if the debounce is still true and if it is, then set it to false.

script.Parent.MouseButton1Click:Connect(function()
	if debounce then
		debounce = false
end)

Step 8: Create a variable named AnimationTrack and assign it to the Animator object and call the LoadAnimation function of it. It only takes one parameter, so put in the name of your Animation variable. What this function does is it loads the specified animation onto the Animator, allowing it playability.
You can read more about it here: Animator | Documentation - Roblox Creator Hub

local AnimationTrack = Animator:LoadAnimation(Animation)

Now, play the animation and add a task.wait for 0.5 seconds. Set the debounce back to true.

task.wait(0.8)
debounce = true

Final code:

local Player = game.Players.LocalPlayer
local Character = Player.Character or Player.CharacterAdded:Wait()
local Humanoid = Character:WaitForChild("Humanoid", 5)
local Animator = Humanoid:FindFirstChildOfClass("Animator") or Instance.new("Animator", Humanoid)
local Animation = script.Animation
local debounce = true

script.Parent.MouseButton1Click:Connect(function()
	if debounce then
		debounce = false
		local AnimationTrack = Animator:LoadAnimation(Animation)
		AnimationTrack:Play()
		task.wait(0.8)
		debounce = true
	end
end)

Step 9: Playtest the game! You should see that upon clicking your TextButton, an animation should play! I hope this tutorial helped you and if you have any questions or need assistance, feel free to ask! If you have any suggestions on what my next tutorial should be, let me know!

Have a wonderful day! :smiley:

2 Likes
Beginner Tutorial #3: How To Make A Simple Shift To Sprint Script!