[Advanced UI] Introduction to 2D Animations

This Topic requires the following knowledge : Basic User Interface + Basic Scripting
Roblox Official tutorial about GUI Animations is available

Introduction

What is 2D Animations on Roblox ? it’s commonly referred as a “Tween”,
Because TweenService is the only feature that let you create a inbetween of 2 Distances
Direction
Of course, there are multiple ways of moving the Instance, but Tweens remains the known & reliable solution as it fill the transition automatically, and easily modifiable.

In most games, it is being used to make the buttons smooth upon click, or for frames apparition.
FarmSelection

Code for the circle fading tween : ButtonAnimation.rbxl (18.5 KB)

The purpose of Animation

Developers usually doesn’t looks further than using it for making the Interface dynamic and greatly improve the click feedback, Client will easily confirm what they are selecting with SFX and Visual indications, and in some cases, there is no reason to look beyond that.

Animations are a additional content to make your world lively, a game doesn’t forcely need that, However, it actually gets essential in having custom animations if you were to compete with other games, Technically, it is part of the “Graphics” in the game, and can potentially make a difference against others games that have idle & dull looking assets, because a gameplay cycle is less boring and noticeable when everything around you is spirited

A Great example would be Pet SImulator, a bright yet empty environment which shocked alot of users due that they couldn’t understand it’s long-term success ! @BuildIntoGames Minimalized the map’s poly to the minimum possible in order to attract Low device users (mainly mobile), and decided to rely solely in Local visuals (Particles & Tweens) that was much less costy in performance, the selection, possession, rewards and sound work were so satisfying that i wouldn’t doubt the visual itself was part of the gameplay.

In most case, Animations will not affect performance & it’s a decent feature to upgrade your game.

What can you do in 2D ?

Let’s look a bit beyond “Buttons” and see a few examples of what’s possible :smiling_face_with_three_hearts:

Vertical tween, except the Shadow is slightly longer (+0.1s)
rounds

Multiple Tweens activated upon MouseEnter
Play

Tweened apparition with a few Looped Spritesheets
LVUP

Tweens have various EasingStyle available that you can easily apply into your animation, don’t hesitate to try them and see what’s best for your UI.

One of the most common combination i like to do is using ClipsDescendants to mask my UI and making a cool apparition on the screen without having to Tween it’s Size from 0% to 100%,

It doesn’t seems quite obvious, so let’s go ahead and make a Looped Animation from 0 :hugs:

How to make a 2D Animation

Little reminder that Instances are GUIs, so it might be very hard to reproduct if you never attempted to create a UI and making it functionable on Roblox.

STEP 1 : CREATING ASSETS

This is common knowledge, we start by creating the graphics and see if it’s looking good
Step1
Afterward i just fill the zones and delete the lines as i no longer need them.
Step2
If your software editor allows you to Animate your objects, you can go ahead and already make a preview of the loop by Tweening the part you want to be looped.
Step3

I Confirmed that my assets are compatible and works well on loop, now i should be able to reproduct the tween in Studio
Step5

STEP 2 : REPLICATING GRAPHIC IN ROBLOX

Once again, very basic, we just have to export the assets seperately so that we can Tween the bottom and the Top should stay intact
image
Don’t forget to organize how the UI is set in the Explorer so you can set the Masking zone (Visibility limits) without struggle
image

STEP 3 : READY TO ANIMATE

When everything is set, you have to script it’s behavior :

  • Must loop (repeat animation)
  • Apparition (if not visible, you should stop the animation to prevent lags)

But for testing purposes, we are going to ignore performance details and just preview it straight away

local Ghost = script.Parent.Ghost
local Speed = 0.9

while true do
	Ghost.Below:TweenPosition(UDim2.fromScale(-0.73,0.7),"In","Linear",Speed,true)
	wait(Speed)
	Ghost.Below.Position = UDim2.fromScale(0,0.7)
end

Step6
And just like that, we possess the base of our ghostie !

STEP 4 : ACCUMULATING TWEENS

Is it a ghost ? it doesn’t look like one…
If the animation isn’t self-explanatory, it’s time to add extra cute details :face_with_monocle:
image
In order to set multiple tweens, you need another instance to animate that must be a Parent or beyond, so that you can indirectly affect the child’s behavior

local Ghost = script.Parent.Ghost
local Speed = 0.9
local Side = false

while true do
	Ghost.Below:TweenPosition(UDim2.fromScale(-0.73,0.7),"In","Linear",Speed,true)
	
		if Side == true then
			Ghost:TweenPosition(UDim2.fromScale(0.5,0.4),"In","Linear",Speed,true)
		else
			Ghost:TweenPosition(UDim2.fromScale(0.5,0.6),"In","Linear",Speed,true)
		end
		
	Side = not Side
	wait(Speed)
	Ghost.Below.Position = UDim2.fromScale(0,0.7)
end

Ghost2
Our first tween will never be disturbed… even if the Main Frame is also moving, the final position goals and duration remains the exact same.

The style Linear is a bit plain, so let’s try out something else : “InOut”,“Quad”
Ghost3

knowing how to create, add and stacks tweens is all you needed, because further detail is repeating STEP 4 until you’re satisfied of your animation, Here, let’s add a face and try making it blink with Masking :

RESULTS

Code
local Ghost = script.Parent.Ghost -- Selecting Main Frame
local Speed = 0.9 -- Will cycle every 0.9 seconds
local Side = false -- Variable to decide if it should go down or up
local Blink = 0 -- Variable that if 0 is reached, then will Blink eyes

while true do
	if Blink == 0 then
		Ghost.Face:TweenSize(UDim2.fromScale(0.6,0.2),"InOut","Quad",Speed/2,true)
		Blink = math.random(2,5) -- Renew the Blink Feature
		delay(Speed/2,function() -- Delay because we shouldn't pause the Ghost Loop
		Ghost.Face:TweenSize(UDim2.fromScale(0.6,0.5),"InOut","Quad",Speed/2,true)
		end) -- Delay has ended
	end -- Blink Action has ended
	Blink = Blink - 1
	
	Ghost.Below:TweenPosition(UDim2.fromScale(-0.73,0.7),"In","Linear",Speed,true)
	
		if Side == true then -- Going DOWN v
			Ghost.Face:TweenPosition(UDim2.fromScale(0.5,0.4),"InOut","Quad",Speed,true)
			Ghost:TweenPosition(UDim2.fromScale(0.5,0.4),"InOut","Quad",Speed,true)
		else                         -- Going UP ^
			Ghost.Face:TweenPosition(UDim2.fromScale(0.5,0.55),"InOut","Quad",Speed,true)
			Ghost:TweenPosition(UDim2.fromScale(0.5,0.6),"InOut","Quad",Speed,true)
		end
		
	Side = not Side -- Reverse value (false to true / true to false)
	wait(Speed)
	Ghost.Below.Position = UDim2.fromScale(0,0.7) -- Reset the Bottom Part's Position
end

GhostFinal
Ghostie is complete !
GhostAnimation.rbxm (4.6 KB)
^ If you wanna use it or see how it looks in-game

This can be used in any kind of GUI Support :
ScreenGui, BillboardGui, SurfaceGui

This “How-To” is a bit unprecise at certain points, the gist of this unusual use of Tweens is that this service is not a closure that was made exclusively for the use of Menu & Selection, you can do so much more with it.

…and that UI Designs isn’t all about graphics !
if you feel like you’ve reached High-tier of UI Design in Roblox, it might be time to pass into Level 2 :ghost:


Tips:

  • Offset are “Pixels”, The properties will NOT resize if the screen’s canvas
    (or screen resolution, such as mobile) has changed.
  • Scale is the % Percentage of the Parent’s Size
    (ex : 0.5 Scale is auto-adjusting into 50% Pixels filling)
  • TweenPosition & TweenSize are solely for Size and Position UDim2 (2D) properties, if you’re looking to use more properties (such as Rotation), see TweenService (slightly more complex)

Changelog

Edit1 :

  • Added Annotations on the Final Code, should help people that doesn’t really know Lua
  • Fixed some grammar mistakes

Edit2 :

  • Added Tips
148 Likes

This is a tutorial I didn’t know I needed!!! Awesome work, I’d love to see more from you since you’re so elaborate.

14 Likes

Love it! Thank you for this tutorial!

2 Likes

Thanks for making this animation tutorial it sure will help many developers out there! :slight_smile:
It’s cool making 2D animation appear more 3D like!

Where have you been all me life?!

2 Likes

I think this plugin would be useful for this post.

1 Like

Thank you for this I am really bad at UI’s this helps a lot.
And animating it adds a whole lotta meaning to it.

Thanks for this! Often I want to advance myself in making interfaces looking more lively but due to some of limitations Roblox for the likes of masking, I’ve always been reluctant to some degree to be more creative

2 Likes

Now this…thank you. This’ll be useful for advancing my nooby capabilities in terms of UI, looking forward to seeing what I can do with this!

2 Likes

Actually… Interface, including Animations, are not Restricted with the good resources !
Spritesheet is a legacy method of integrating a image-by-image into a Game, but it has always
worked fine and it is actually exportable into Roblox :

I Worked on a Custom Animation using Animate CC

Sciefish2

I Exported the animation into a Spritesheet

(3 Pages so that i could actually conserve a high resolution in-game)
Most Animated icon i create are set in a single 1024x1024 Image that weights under 100kb

image

Scripted the Spritesheet

(also changed the FPS compared to original product)
Sciefish


Unfortunately, it is not quite something i’ll cover or explain because 2D Animations knowledge & skill, in some extent, are very complex, and even “Motion Design” is a job on it’s own. I possess atleast 3 years of Motion design experience as i used to be a Hobbyist “violent cartoon” Newground/youtuber in the past.

But this is just letting you know that there are no actual limits, it’s just that no one really explored the domain of 2D Animation.

16 Likes

This is pretty good, I’ve been exploring ‘juicier’ UI animations recently in Roblox and they are worth doing if you have the time. Even simple tweens or modifications to TweenInfo can greatly alter the player’s experience!

You’ve really opened up an unexplored area of roblox UI animation simply as there are no tools atm to easily use sprite sheets. I may or may not make a system for this now :smirk:

Wish i could say the same, but the issue isn’t how to use them in general, it’s to create your own.
There are several solutions that explains how you can export it into roblox
such as this topic : Scale Spritesheet Iteration

However, absolutely none covers other than “exportation”,
which is just copying contents of existing GIF/Scenes
Therefore, if you meant a tutorial on making it from scratch, you’re more than welcome to do it.

This tutorial is literally the best one that explains so well how 2D animations work.
This has literally explained a lot of stuff I saw in popular games.
Now I will finally be able to do that aswell.
Great contribution to the community!!!

This is really cool. I think everyone will enjoy this in a game as it is very creative.

Now this is what I was looking for! Thank you so much! This is really helpful for people like me struggling to create tween animations. Once again, thanks so much!

Very nice tutorial! I knew you we’re an great motion design :smiley:

@kenami I get a bad result when using mouse enter and mouse leave. Sometimes mouse leave doesn’t trigger. What I tweened to not go back to the position it was in at first. Any tips on how to avoid it?

I’ve just started using tweens in my game and I already see a massive quality difference, defiantly recommend using tweens on your ui’s.

thank you that is cool 2d animation in 3d game nice