User:SoulStealer9875/Tutorials/Tweening
Introduction
Hi there! In this tutorial we're going to learn how to tween. In case you don't know, tweening is a way of moving, resizing or moving and resizing a Gui Object smoothly and easily by jut writing one line of code.
We're going to learn TweenPosition, TweenSizeAndPosition and TweenSize. We'll work on this together and I'm going to make sure that you do not get lost on the way.
If there is something you don't understand about this tutorial, send me a message on ROBLOX by clicking Here!
TweenPosition
First we're going to learn about TweenPosition. TweenPosition smoothly moves a specified Gui Object to a specified position.
What you'll need
- ROBLOX Studio
- Intermediate Scripting Knowledge (if you don't know how to script, click Here!)
Tutorial
First of all, open up ROBLOX Studio and create a GUI. To do so, open up the Properties and Explorer panels by going to View -> Explorer and View -> Properties, select the StarterGui directory in Explorer and find the 'Insert' menu at the top of the software, press Insert, in the drop down menu that opens, find Object.
In front of you, in the middle of the screen, you should see a dialog window open. Scroll around the dialog window until you find ScreenGui, select ScreenGui and press OK.
Repeat the previous step but this time search for Frame in the dialog window and press OK.
With Frame selected in Explorer, look in the Properties panel and make the Position property of the Frame {0.5, -100}, {0.5, -100} and the Size property {0, 200}, {0, 200}.
With Frame still selected in Explorer, go to Insert -> Object -> Script, double click the "Script" under Frame in Explorer and a white window will open displaying the text print 'Hello World'. Remove that line and prepare to write some code. Why not get some pepsi out the fridge and let's get started. Don't worry, this won't take long!
First we need to locate 'Frame', which is the Gui Object we want to "Tween" or, simply, move. In our case would be the parent of the script, because the Script is located inside the Frame, as found in the Explorer panel.
For this reason we need to write this line of code,
script.Parent
With that done, we're going to need to stick in the :TweenPosition() method.
script.Parent:TweenPosition()
We're not quite done yet, sorry! We'll need to specify what point B is. Point A is where the Gui Object is now, Point B will be the ending position. The TweenPosition method will smoothly move the Gui Object from Point A to point B. Let's say Point B is down in the bottom middle of the screen, but slightly 'off' the screen. So it will look like the Frame is sliding to the bottom middle of the screen.
For this reason we're going to need to put the UDim2 value in the first argument of the method.
script.Parent:TweenPosition(UDim2.new(0.5, -100, 1, 0))
Still not done yet! For the second argument we need to specify the easing Direction, some might add string "Out", others might use string "In", some people don't even write a string and just slot in a _.
We're not going to be lazy like that and I'll suggest we put "Out", I use it the most.
script.Parent:TweenPosition(UDim2.new(0.5, -100, 1, 0), "Out")
Next we'll put in the third argument, named easing Style, some put "Quad", others put "Linear". We'll put "Quad" for now.
script.Parent:TweenPosition(UDim2.new(0.5, -100, 1, 0), "Out", "Quad")
The fourth argument is the float Time, which means how long it will take for the Gui Object to move from Point A to point B. The float Time is in seconds so, for example, if we put 0.1 for the float time, the Gui Object will move from Point A to point B across your screen REALLY FAST, however, if we put 60, it would take a whole minute for the Gui Object to move from Point A to Point B.
For my example I'm adding a 1.
script.Parent:TweenPosition(UDim2.new(0.5, -100, 1, 0), "Out", "Quad", 1)
The fifth argument is override, it's a boolean and I would recommend putting false.
script.Parent:TweenPosition(UDim2.new(0.5, -100, 1, 0), "Out", "Quad", 1, false)
The sixth argument is callback, I'd recommend putting a nil there.
script.Parent:TweenPosition(UDim2.new(0.5, -100, 1, 0), "Out", "Quad", 1, false, nil)
And we're done!
TweenSize
Next we're going to learn about TweenSize. TweenSize smoothly re-sizes a specified Gui Object to a specified size.
What you'll need
- ROBLOX Studio
- Intermediate Scripting Knowledge (if you don't know how to script, click Here!)
Tutorial
First of all, open up ROBLOX Studio and create a GUI. To do so, open up the Properties and Explorer panels by going to View -> Explorer and View -> Properties, select the StarterGui directory in Explorer and find the 'Insert' menu at the top of the software, press Insert, in the drop down menu that opens, find Object.
In front of you, in the middle of the screen, you should see a dialog window open. Scroll around the dialog window until you find ScreenGui, select ScreenGui and press OK.
Repeat the previous step but this time search for Frame in the dialog window and press OK.
With Frame selected in Explorer, look in the Properties panel and make the Position property of the Frame {0.5, -100}, {0.5, -100} and the Size property {0, 200}, {0, 200}.
With Frame still selected in Explorer, go to Insert -> Object -> Script, double click the "Script" under Frame in Explorer and a white window will open displaying the text print 'Hello World'. Remove that line and prepare to write some code. Why not get some more pepsi out the fridge and let's get started. Don't worry, this won't take long!
First we're required to type in the path to the Frame.
script.Parent
Next we need to add in the :TweenSize() method and the first argument, which is the UDim2 Size Value. Let's say we want to smoothly re-size the Gui Object, Frame, to {0, 0}, {0, 0}.
So to do this we'll need to make the first argument UDim2.new(0, 0, 0, 0)
script.Parent:TweenSize(UDim2.new(0, 0, 0, 0))
Still not done yet! For the second argument we need to specify the easing Direction, some might add string "Out", others might use string "In", some people don't even write a string and just slot in a _.
We're not going to be lazy like that and I'll suggest we put "Out", I use it the most.
script.Parent:TweenSize(UDim2.new(0.5, -100, 1, 0), "Out")
Next we'll put in the third argument, named easing Style, some put "Quad", others put "Linear". We'll put "Quad" for now.
script.Parent:TweenSize(UDim2.new(0.5, -100, 1, 0), "Out", "Quad")
The fourth argument is the float Time, which means how long it will take for the Gui Object to re-size from Point A to point B. The float Time is in seconds so, for example, if we put 0.1 for the float time, the Gui Object will re-size from Point A to point B REALLY FAST, however, if we put 60, it would take a whole minute for the Gui Object to re-size from Point A to Point B.
For my example I'm adding a 1.
script.Parent:TweenSize(UDim2.new(0.5, -100, 1, 0), "Out", "Quad", 1)
The fifth argument is override, it's a boolean and I would recommend putting false.
script.Parent:TweenSize(UDim2.new(0.5, -100, 1, 0), "Out", "Quad", 1, false)
The sixth argument is callback, I'd recommend putting a nil there.
script.Parent:TweenSize(UDim2.new(0.5, -100, 1, 0), "Out", "Quad", 1, false, nil)
And we're done!
TweenSizeAndPosition
What you'll need
- ROBLOX Studio
- Intermediate Scripting Knowledge (if you don't know how to script, click Here!)
Tutorial
First of all, open up ROBLOX Studio and create a GUI. To do so, open up the Properties and Explorer panels by going to View -> Explorer and View -> Properties, select the StarterGui directory in Explorer and find the 'Insert' menu at the top of the software, press Insert, in the drop down menu that opens, find Object.
In front of you, in the middle of the screen, you should see a dialog window open. Scroll around the dialog window until you find ScreenGui, select ScreenGui and press OK.
Repeat the previous step but this time search for Frame in the dialog window and press OK.
With Frame selected in Explorer, look in the Properties panel and make the Position property of the Frame {0.5, -100}, {0.5, -100} and the Size property {0, 200}, {0, 200}.
With Frame still selected in Explorer, go to Insert -> Object -> Script, double click the "Script" under Frame in Explorer and a white window will open displaying the text print 'Hello World'. Remove that line and prepare to write some code. Why not get some EVEN MOAR pepsi out the fridge and let's get started. Don't worry, this won't take long!
First we're required to type in the path to the Frame.
script.Parent
Next we need to add the :TweenSizeAndPosition() method of the Frame.
script.Parent:TweenSizeAndPosition()
Now we add in the first argument, which is the UDim2 Value for Size. This is the ending size. For example, the starting size, the size it is now, is going to smoothly re-size to the ending size.
script.Parent:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0))
For the second argument we type in the ending position, such as where the GUI will move to. This UDim2 Value Position will be told it's name is Point B (in the example, the compiler doesn't really mark them PointA, pointB) and the position it's at now is PointA.
script.Parent:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0),UDim2.new(0.5, 0, 0.5, 0))
Next we add the third argument. It's a string, you have multiple choices, some put "Out", others put "In", some even leave a _ by there. We're going to put in "Out".
script.Parent:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0),UDim2.new(0.5, 0, 0.5, 0),"Out")
Now for the fourth argument. It's a string, you have multiple choices, some put "Quad", others put "Linear". We're going to put in "Quad".
script.Parent:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0),UDim2.new(0.5, 0, 0.5, 0),"Out","Quad")
After that it's time for the fifth argument, this one is the "float Time". It determinds how long it will take to re-size and be re-positioned from PointA to PointB. It's in seconds.
script.Parent:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0),UDim2.new(0.5, 0, 0.5, 0),"Out","Quad", 0.5)
The sixth argument is override, it's a boolean and I would recommend putting false.
script.Parent:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0),UDim2.new(0.5, 0, 0.5, 0),"Out","Quad", 0.5, false)
The seventh argument IS OPTIONAL!* The seventh argument * callback, put a nil there*.
script.Parent:TweenSizeAndPosition(UDim2.new(0, 0, 0, 0),UDim2.new(0.5, 0, 0.5, 0),"Out","Quad", 0.5, false, nil)
And we're done!! You now know how to tween!! (Oh no, it became a verb... It is one! :))
~ Learn something new everyday! ~
