Tweening
WARNING: This tutorial requires advance knowledge of GUIs. Please review the prerequisites.Prerequisites (Requirements)
It is necessary for you to understand how GUIs work and to have intermediate scripting abilities; to understand tweening. Here's the tutorials you should check out:
It's necessary for you to understand the position of GUIs, how to resize them, and how they work before you start working with tweening.
Tweening: What is it?
Tweening (in ROBLOX), is the movement and resizing of frames, buttons, or other GUI objects. The word Tweening comes from the word Inbetweening, which is (according to wikipedia) the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image. This means that if you start at position x, y, that the Object will move from that position, to another sliding. Roblox actually moves the frame in question, and doesn't generate another one.
Tweening in roblox is basically a way to beautify your GUIs, and create a more pleasing graphical appearance. Tweening can be used to resize GUIs, move GUIs, or both. There are 3 methods used in tweening, which is all part of TweenService, which help opperates tweening. You don't have to worry about TweenService though.
How to use it
You probably want to use a LocalScript for GUI tweening. There are several advantages to using local scripts over normal scripts for GUIs.
- Access to the local player, by using the LocalPlayer property of the Players service: game.Players.LocalPlayer
- Access to game.Workspace.CurrentCamera
- Access to the Teleport Service
- Runs on Player's computer, no lag in server
So the frame's position is 0,0,0,0 The frame's size is also 0,0,0,0. Just remember that.
So let's say we want it to grow out of the center of the screen. Well different players have different screens. That's why we will use the scale. That way, it will always be centered in any player's screen, no matter the size.
It's also important to note that the GUIs position is measured from the top left corner, not the center. So to make it grow from the center, we have to change the Size, and position, calling for TweenSizeAndPosition</syntaxhighlight>
Examplescript.Parent.Frame.Position = UDim2.new(0.5, 0, 0.5, 0) -- We set the scales to .5, .5, which is the center of the screen
script.Parent.Frame.Size = UDim2.new(0,0,0,0) -- We set the frame size too 0, so it will pop out of the middle of the screen.
script.Parent.Frame:TweenSizeAndPosition(UDim2.new(0, 400, 0, 600), UDim2.new(.5, -200, .5, 600), "Out", "Quad", 1) -- This will change the size, from 0,0 too 400, 600, and the position will change so the frame stays centered.
In, Out, Inout
'In' means it slows down as it comes in. It will use the Easing Style as the way it slides. 'Out' means it speeds up to leave. InOut is both. It applies In, then half way though, it applies 'Out'
The EasingDirection Enum Sets the direction for tweening. It has 3 numbers:
Enum
Name
Description
Visual
0
In
Applies the transition in reverse.
1
Out
Applies the transition normally.
2
InOut
Applies the transition in reverse, then normally.
See Also
Methods
Some people may like looking at the official methods. You can do this here:
TweenPosition
This method changes the position. It moves the GUI from it's current position, to endPosition, in the time it has been given.
TweenPosition( UDim2 endPosition, Enum easingDirection = Out, Enum easingStyle = Quad, float time = 1, bool override = false, function callback = nil )
Returns
nil
Description:
Smoothly moves a GUI to a new UDim2 position.
Member of:
GuiObject
TweenSize
This method changes the size. It changes the GUI from it's current size to endSize, in the time it has been given. Since GUI positions are calculated from the top left corner, most people use the method TweenSizeAndPosition to change the size, so it shrinks in the middle, not to the top left corner.
TweenSizeAndPosition
This changes both the position, and the size. It changes the GUI from it's current position and size, to the endSize, and endPosition, all in the time it has been given.
Types of Easing Styles.
Different bouncing styles can be used to create new looks. Besides using the ID #, you can also use strings like this: "Bounce".
The EasingStyle Enum determines the way in which tweening will act. It has 7 numbers:
Enum
Name
Description
0
Linear
Stays the same speed throughout the process of tweening. The speed is determined by the time argument.
1
Sine
Gradually slows down until the end point is reached. Main speed is determined by the time argument.
2
Back
Once the GUI reaches its target point, it will go over it just a bit (depending on the time argument), and then return to the target position.
3
Quad
Starts off fast and gradually slows down after the GUI reaches 1/4 of the way towards the end point.
4
Quart
Starts off fast and gradually slows down after the GUI reaches 3/4 of the way towards the end point.
5
Quint
Starts off fast and gradually slows down after the GUI reaches 1/2 of the way towards the end point.
6
Bounce
Bounces off the end point a couple times (speed depends on the time argument) and returns to the end position.
7
Elastic
Acts as if the GUI were being stretched like rubber and then launches towards its end point.
Why tweening?
- Tweening can give your game a pleasing look. Not only do GUIs look better when they slide into place instead of just appearing, they make your game look clean.
- Tweening can also be useful when using ROBLOX's preset styles on your GUIs. Since you can't make the GUIs fade into existance, you must either make them just appear normally, without any animation, or make them slide or expand into existance.
- Tweening is an easy way to make your games look impressive.
See Also
Here are some interesting articles (or links), that may be helpful to you.
