When doing anything, the first thing you need is to start with the basics. So, we will start with the basic elements of DOTween in this part.
Names for DOTween
- Tweener: A tween takes values and animates them.
- Sequence: A special tween that doesn't take values to animate. It animates tweens as a group in a sequence (i.e. one tween after another).
- Tween: A generic word for Tweener and Sequence
- Nested Tween: A Tween inside a Sequence.
There are 3 main prefixes in DOTween, which are the most important among IntelliSense. You need to remember them well.
- DO: This is the Main shortcut prefix that can be used directly in the gameObject element like transform or a material.
- Set: Prefix for combining settings to a tween, except for
Fromsince it is used as a setting but is not one. Used as
- On: Prefix for the callback combined to a tween. Used as
functionToBeCalled is the function to be run when the tween finishes the animation.
To use DOTween, you need to use/create a Tweener. The Tweener can then take a value and animate it.
There are 3 types of ways by which you can create a Tweener.
- Generic: The most flexible way allowing almost any value to tween. Used as
static DOTween.To(getter,setter,to,float duration)
- Shortcut: The Fastest and most used way. The code for the shortcut way is the shortest code used for Tweening.
- Additional Generic: Special use of the generic way of Tweening to make certain animations.
This is just a simple reminder for users who want to use DOTween in their projects. These are explained in more detail with more examples on the DOTween Official Documentation.
Basic DOTween using Shortcuts
We generally use shortcuts of DOTween as most of the time they fulfil our purposes. So, we need to learn more about shortcuts for their proper use in the project.
Let's practice some DOTween shortcuts on an actual gameObject in the project.
First things first. Create a new 3D project in Unity if you haven't created one. Then, set it up with DOTween. You can view the DOTween Setup tutorial if you need any help setting up DOTween in your project.
Now that you have a project ready. Create a 3D cube in the Hierarchy. We will be applying a basic DOTween animation in this cube for our learning process.
Also, create a
Demo c# file in your project. This file will be attached to the cube and used to apply the DOTween animation for this tutorial. We will add codes to the
Demo script and run them in play mode for a visual example.
Move moves the object from one place to another. It can be between local positions or global positions. The DOTween code for movement is mostly the same, so we will combine them in a single script and apply them in a single cube to see how it works.
- DOMove: Used as
DOMove(Vector3 to, float duration, bool snapping).
Move the target to the given position from its current position. If
snapping is true; all the values will be snapped into their nearest integers by the tween.
Run the game in play mode and give value to the
Duration, and press the
Space button after clicking in the Game Scene. The cube will move, as shown in the clip below. You can change values in the code to experiment with what they do.
- DOMoveX/Y/Z: Used as
DoMoveX/DOMoveY/DMoveZ(float to, float duration, bool snapping).
Moves the target to the given position of the chosen axis.
Let's use the same
Destination vector3 and
Duration float variables for this example as well. Add the codes to move the cube along a single axis.
Run the game in play mode and Update the
Duration's value and press the corresponding key as shown in the code above. The cube will only move along a single axis.
- DoLocalMove: Used as
DoLocalMove(Vector3 to, float during, bool snapping).
Moving the target to the given local position.
transform.DOLocalMove(new Vector3(100,20,3),3); // move the target's local position to 100 along X-axis, 20 along Y-axis and 3 along Z-axis in 3 second
To see this movement, you can just change the code in the first example by replacing the
- DoLocalMocveX/Y/Z: Used as
DOLocalMoveX/DOLocalMoveY/DOLocalMoveZ(float to, float duration, bool snapping).
Moves the target to the given local position along the used axis X or Y or Z. You can test it by changing the 2nd example by replacing
- DoJump: Used as
DOJump(Vector3 endValue, float jumpPower, int numJumps, float duration, bool snapping).
Move the target to the given end position in a parabolic path, so the target seems like it is jumping instead of moving in a linear path.
Add the following code in the
Update() method for testing
Update the values and start play mode, press
J The clip below shows the key, and the jump animation will play.
- DOLocalJump: Used as
DOLocalJump(Vector3 endValue, float jumpOwer, int numJumps, float duration, bool snapping)
DoJump but only in a local position. This is the same as number 5 mentioned above. So you just need to change the
DOLocalJump and you can test the local jump as well.
Like we did with the movement, you just need to give a command like
DOLookAt to rotate the gameObject to your desired angle or direction using DOTween.
- DORotate: Used as
DORotate(Vector3 toAngle, float duration, RotateMode mode).
Rotate the target to the given angle.
Add the following code inside
Update() method to test
- DoScale: Used as
DoScale(Vector3 to, float duration).
Change the local scale of the target in the given duration.
Add the following code inside the
Update() method to test
DemoUI.cs for Transform Commands
Unity UI Shortcuts
For the Unity UI shortcut test, create a 2D sprite in
Hierachy and create a C# script
DemoUI and attach it to the
Let's add the required code and test the UI shortcut in the created Image.
- DOColor: Used as:
DOColor(Color to, float duration).
This shortcut changes the target's colour to a given colour in the given duration.
DoFade(float to, float duration).
Changes the alpha value of the given target in the given duration.
DemoUI.cs for UI Commands
The Input action done in the
Update() method can be replaced with a button click if you want. We just used the key pressed because it is faster.
These all are just some of the basic elements of DOTween that you will generally use in your project. There are many more elements provided by DOTween, so checkout DOTween documents if you want to know more about them or leave a comment on this blog. We will try to provide you with the information with a little demo.
In the next part, we will use these basics and make animations that you will be able to use in your own project.