[Advanced UI] Introduction to 2D Animations

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!

5 Likes

Where have you been all me life?!

9 Likes

I think this plugin would be useful for this post.

9 Likes

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.

3 Likes

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

5 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!

6 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.

49 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!

6 Likes

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:

5 Likes

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.

6 Likes

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!!!

4 Likes

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

2 Likes

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!

1 Like

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

1 Like

@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?

1 Like

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.

2 Likes

This is definitely something I’d suggest everyone to have a look at it if they are interested in UI animations.
Thank you Kenami for this awesome guide!

Awesome tutorial, really shows a different side of 2D Animations on Roblox!

This is amazing, thank you! :slightly_smiling_face:

This is really awesome. I had no clue spritesheets were a thing until now. Definitely going to try to implement them for a sort of level up popup in my game.