PcoWSkbVqDnWTu_dm2ix

Animating Parts

Animating Parts

Players can get feedback to whether or not their actions are doing anything with animations. This can be a tree shaking when hit, or pet cheerfully bouncing when fed. In this case, we’ll show you how to make a button that moves when the player clicks it.

This tutorial includes some basic scripting and part creation. If you’re new to creating scripts and parts, we recommend you follow along with Intro to Coding and Game Design first.


Tweening with Animations

One way of animating objects is using tweens. A tween, short for in-between, is a word for the process of changing a starting value to an ending value over a certain amount of time. Tweens can be used to change properties such as position, color, or rotation.

Project Setup

For this project, a tween will move an object from a starting position to a goal position.

  1. Determine what part you’ll be animating. This project will animate a button that’ll sink into a wall.
  • 1: Button
  • 2: Wall
  1. In the part that will move, add a ClickDetector and a script named TweenMove. Do not rename the ClickDetector.

If you’re using a model with many parts, pick one part to move (such as the button in this example), and put the MoveTween script as it’s child.


  1. Open the TweenMove script. Then, copy and paste the script below.
  1. Playtest and click the object. While testing, you may notice the object moves the wrong direction or distance. That can be customized in the next section.
Wrong direction; needs adjustment
Moves correctly; no adjustment needed

Adjusting the Move Tween

With the script added, you can customize it to suit the needs of your game. The button can be tweened to move in directions like forward and back, or up and down.

Changing Position

Remember, tweens transition from a starting value to a goal value. This script uses CFrame to move the button in a direction relative to its current position. That direction is controlled in Line 28 of the script.

On that line, a new CFrame is created using X, Y, and Z coordinates. In this example, the button moves relative to its Y axis.

To have the button move in a different direction, simple replace one of the desired coordinates with the line: TWEEN_MOVE_DISTANCE * buttonState. Set all other coordinates to 0.

For example, this line will move it relative to its X axis instead.

Tween Time and Distance

The script includes the following variables that affect the tween’s movement. Capitalized names like TWEEN_TIME are written specifically for this script to be modified.

Try changing the value of one variable below:

  • Line 11 - TWEEN_TIME: The time in seconds it takes for a tween to happen.
  • Line 12 - TWEEN_MOVE_DISTANCE: The distance the button moves in studs.
  • The script moves parts a set distance. If you want to tween parts to a specific point, check out further documentation on TweenService.
  • If your object is complex (such as being built of many parts), either turn it into a Union or use a equivalent meshpart.

Tweening Other Properties

Most properties with a numerical data type can be tweened. This section includes some common properties, like rotation, that can be used to bring more player feedback into your game. Keep in mind, you can also tween multiple properties at once.

For a full list of properties, see the TweenService API page.

Rotation

For rotation, combine tweening and Cframes instead of just using Vector3. Rotation tweens can be used to make creatures wiggle when pet, or coins twirl as they’re picked up.

In the next script example, the creature’s position and rotation are both tweened when clicked to show how happy it is when being pet.

Scaling

Changing the size of in-game objects can also show that a player interacted with them. For instance, pickups like health packs or gemstones can shrink when touched. To scale parts, change the tween goal to a new Vector3 of the desired size.

Color Changing

Parts can transition colors by tweening with Color3 values. For instance, enemies or destructible objects can flash colors to give feedback that they’ve been hit or clicked.

While this script uses a normal Part to change color, it’s also possible to use this on MeshParts with an applied texture. MeshParts are often imported 3D models, rather than parts build directly in Roblox Studio.

If you are working with MeshParts, we advise the following:

  1. Use a SpecialMesh instead of a MeshPart. This is because a MeshPart’s texture overrides the color being tinted by the script.
  2. Change the script to modify the VertexColor of the SpecialMesh instead of the Color property.

Project Sample

Tween Animation Showcase

View all the script examples in this non-copylocked place. Get all the scripts to modify as well.

Keep Learning

Now that you’ve learned how to use tweens, try these optional challenges or expand your knowledge with one of the tutorials.

  • Tween a part so it changes to a color different than in the script.
  • Scale a part so it grows bigger and smaller in one tween.
  • Combine all the tweens shown here in one part.

Creating Your Own Tweens

Get more information on customizing and using tweens.

Animating GUI Elements

Make in-game menus more engaging and give feedback with animations.


Previous Next Steps