ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
Why you should use code to animate your UI in Unity.
ฝัง
- เผยแพร่เมื่อ 7 เม.ย. 2019
- In this video we take a look at why you shouldn't animate your UI and why instead, you should be using a Tweening Library like Lean Tween!
Lean Tween - assetstore.uni...
Unite Europe 2017 - Squeezing Unity: Tips for Raising Performance - • Unite Europe 2017 - Sq...
Be sure to LIKE and SUBSCRIBE if you enjoyed this guide! Share the video for extra love!
Twitter - / thegamedevguide
Facebook - / thegamedevguide
Jesus christ the production level of this video is incredible.
Important stuff:
If you are going to use LeanTween to animate your UI, dont pass the GameObject itself to the LeanTween Methods, instead, pass the component RectTransform. If you pass the GameObject, it will not just mess up the animation (by not following the exact coordinates that you give it) but also it wont work if you change the proporcions of the pantalla.
As an example : LeanTween.move(Panel.GetComponent(), new Vector3(0, -74, 0), .2f);
Instead of just passing the GameObject.
I know it's too late, but isn't it better using (panel.transform as RectTransform) instead of GetComponent?
@@cannotfigureoutaname a better version will be get the rect transform on awake
@@hop3studio511 by still using a GetComponent?
@@cannotfigureoutaname just one times
@@hop3studio511 Right, my idea was to use ( as RectTransform) as casting, wondering if it's better than GetComponent, but yeah I got tunnel vision of the problem and in the bigger image you just cache the transform lol
when you spend 30 hours programming in your own tweening library because you don't know they already exist
You should make a video on how you did it and how others could make their own custom tweens!
But some people like me refuse to not do anything 100% by hemselves
well atleast you can brag about it on your resume and customize it to your hearts content
I have no idea how this is the first time I've seen you channel. The quality is among the very top! Thank you for your work.
I love tweens and they are very powerful, however, I must say that they are really not artist friendly (by that I mean someone whose job it is to make something look nice with 0 experience in code). Yes, some of those libraries have visual editors, but I have yet to see one that is as easy to do something complex as the default Unity way. Personally, I've worked on dozens of games at a big company and our UI has never been a performance drain. Of course, if your game is top of the line and you need every bit of power to make that AI remain fluid, then go ahead, cut where you can afford, but for the majority of devs, especially indies, the default way is good enough.
That said, the new UI workflow is a lot more performant. It does not fully support animations yet, but let's hope that once they integrate it, they will fix those issues!
where could we check the performance cost of animating the UI with animator vs tweening? I find it very interesting as an artist
@@luciorojas4278 Check out the Unity Performances Profiler. There is a few good tutorials about it here on TH-cam. It can tell you where your bottlenecks are and you could create the same animation multiple times using different methods and compare the time taken for each.
You love 12 year old tweens?....
Joanie Pépin FBI open up! Haha
I'd argue it's as much the coder's responsibility to make things look nice as it is the artist! You can go a long way with animating through code. It's not because you're a coder that you should have no feeling for aesthetics or animation!
Don't know why I JUST found your channel but it took me 0.3f to hit subscribe.
😂 that's a quick float!
0.3f is not a measurement of time....
@@zyansheep it is if you += Time.deltaTime
@@TheDukeOfReason Hmm... doesn't seem humanly possible...
Maybe that's because we're all really A.I inside a giant simulation, all carrying on our seemingly genuine lives via Time.deltaTime in void Update()...
Nice stuff, nice production, nice volume levels!
Looks pretty cool, as a programmer I hate doing UI stuff and putting up motion clips, transitions and all that jazz. But obviously I know it's needed to deliver a good product. These tweening libs would make it much easier for me as I don't have to hassle with all the pretty animation clips and 50 animator controllers etc. I'm pretty sure it's also possible to extend the library and write your own custom transitions.
I love a good Tween. DOTween is my guy.
Me First Games yikes
@@gavintantleff wait why yikes
@@bilbostabbins1882 "Tween" is also common slang for a child who is 10-12 years old, which is why most of us have just gone back to calling this "animating," so we don't sound like pedos. 😅
@@mpbMKE I have never heard of that and its suspicious that you do; nonetheless quite weird
Certainly looks a lot simpler than the multitude of animations I've had to create for my games UI. Cheers for the library showcase :)
This might have been mentioned before, but there's no reason to use tween over Animator anymore :)
From patchnotes In Unity 2019.3
"UI: Fixed performance issues with Animation by not dirtying the Layout if an Animation updates items.
"
This has been tested, there's no performance gain over using Tweens. It would be nice if the creator mentioned this in an edit or something so that people wouldn't have to bother with Tweens for no reason.
Thanks. As a noob, I can't tell you how many times I have used a tutorial for something that ends up being outdated. I end up having to fix pieces of code and trade out elements that are simply not functional in the most recent LTS release.
It fixed performance issues, they not make it as efficient as tweening.
You can see a null state in animator when nothing is being animated, showing the animator is constantly looping in the null state.
there are multiple reasons to use leantween:
1. one line of code
2. has easings
3. not a hassle to set up
@@chocolateimage There are multiple reassons to not use tweens:
1- You cant directly preview your tween animations. Time consuming.
2- Complex animations require complex code and this makes a lot of non-codder tilting.
3- It is a hassle to setup.
Literally the "Mumbo Jumbo" of Unity. Great tutorial!
Short, sweet, and to the point. Perfectly explained, brilliant editing, and EXACTLY what I searched google for. Thank you so much!
I used to tween(iTween), then I used Animations, now I use tweens again(DoTween).
Now I know what needs tweening and what needs animations.
(heavy complex motions with sound effects syncing, animations, simple bounces and transitions tweening!
Managing transitions from every state to every state with animations was REALLY tedious!
imagine having to move a button and now you need to move it in every transition animation!
Great background song, seriously. Also, fantastic video. Thank you for all your work into making knowledge accessible.
You perfectly made me interested in the thing I've not heard about 5 minutes ago, while I'm pretty apathetic. Congratulations
Thanks for telling me about leantween, I have been breaking my head trying to achieve the same effect with coroutines and now I have a solution
This is the valid approach for this job. Thank you for this explanation.
I am using DoTween for years and now, when I thought I was doing it wrong and I had a plan to try move to animation, you are telling me that I should not do it :D
The only downside is that you did not shared the most important part 3:57 - the actual code of effects you demonstrated at the end.
You should not use either exclusively. dotween is great for little things like bounces and procedural stuff but for complex things use animations.(like a title sequence or complex hand made transitions)
he showed the code ? he is using delay on each element so one after the other comes later or what did you mean?
This still redraw everything that's how ui works, any change causes a redraw, tween doesn't stop that.
I came here expecting more of an artistic advice but this is correct. It doesn't matter what engine you use, any sort of change in position, scale, sprite, color, or whatever always requires a redraw. Tweening's no exception.
Besides, there's going to be at least one draw call for UI every frame anyway, because ui shares the same explicit window with all the other non-ui moving objects populating the background.
GPU is extremely fast and UI draws which are almost always 2D are very inexpensive. Whatever engine you use, batch and cull your ui assets correctly, use atlases to render with few draw calls. Animating has little to no affect to graphic performance.
@@Manas-co8wl Having an animator with even an idle animation that does nothing makes the canvas rebuild and there is a difference between drawing and "batch building" the canvas.
I agree that GPUs are fast these days but alot of games are made for mobile and those games usually have a lot of moving ui parts.
A tween if i remember it correctly will rebuild it when active but when its done it stops rebuilding the canvas.
meanwhile to get that on an animator you have to disable the component fully.
One way to get get some performance back if you really want to use animations is to split canvases into sub canvases,
so when a element forces a rebuild it only affects that canvas and not the full ui.
There might have been some changes in newer unity versions, but i doubt it.
some sauce:
24:00 -> th-cam.com/video/_wxitgdx-UI/w-d-xo.html
forum.unity.com/threads/unity-ui-performance-tips-sharing-my-findings.524916/
learn.unity.com/tutorial/optimizing-unity-ui#5c7f8528edbc2a002053b5a0
This are not 100% correct . watch the end of this video th-cam.com/video/_wxitgdx-UI/w-d-xo.html .The problem is that animator dirties the UI even if it's not actually animating anything. But apparently we only want to dirty the UI when there is something "dirty". That's why you should not rely on the animator and write your own transforming code or use a tween library.
@@PredGuy Disabling animator from script isn't any harder than writing tweens, is it?
@@raystenr5828 Its not "hard" to disable the component but it will probobly lead to more code to track when animations are done and disabling the animator after them than actually using tweens would need and it can lead to enoying problems with the animations depending how the controller is set up,
for example: say that we have four states "idle_hidden", "show", "idle_show" and "hide". (idle_hidden is the entry state) then we run the show animation and we track the animation finish and disable the animator when we reach "idle_show", all good, now we want to hide it so we enable the animator.. and we are in "idle_hidden" without animating "hide" since it is the entry state. There are of course ways around it but in my opinion its just much more work and makes messy code/anim controllers.
If anyone having issues with the positioning, use RectTransform component when you are tweening.
LeanTween.moveY(Object.GetComponent(), 150f, 0.25f)
thank you this helped me so much
Thanks I had this exact problem.
Loving your videos so far. Format is perfect, volume is perfect, very nice flow and easy to follow. Keep it up!
Also, I was animating UI wrong... :D
Also love the fact that you sometimes insert some "quotes" on the screen
man, how come you don't have millions of subscribers? you provide amazing content! keep strong my dude
Another method of animation that is even cheaper performance wise but more tricky to configure: shaders. For most of what you want to do with the ui, a shader will get it done with virtually no performance cost
What do you mean? Using the shader to transform the vertices of UI elements like moving them around and scaling them and doing other fancy tricks with them? In DirectX or OpenGL that's damn near the only way to do it ... you can of course use the CPU to do matrix, quaternion and vector math during your update cycle and then construct a new transform matrix and bind that to the shader, but I agree it'd be faster to let the GPU perform all that math ... however, that becomes tricky at a whole new level, and I don't think UIs are generally a performance bottleneck for most games. Now, in a game like a Paradox 4x grand strategy with a super sophisticated UI full of hundreds of buttons and toggles and sliders then hell yeah the UI is a very, very serious performance consideration ... despite the lack of high-poweres 3D graphics, Crusader Kings 3 will all but set an old PC on fire with all the complex calculations, UI rendering and game logic running behind the scenes. I tried to run it on an old laptop once and it took about 30mins to start a new game and then I couldn't even scroll around on the map ... just teleport somewhere after I let the mouse sit still for 5 mins. Needless to say I uninstalled it off that PC and just played it on my good one, lol.
As game dev and designer with a love for good UI and fine programmatic control, this channel is shading great.
Words can't even begin to describe how thankful I am for Unity and these wonderful libraries...
Thank you soo much. I was so tired messing with animation curves and 0...1 timers with deadzones! This saved my life ahaha
In Unity 2019.3.0 the note says: "UI: Fixed performance issues with Animation by not dirtying the Layout if an Animation updates items." Does this mean this issue is revolved?
Have you figured out if thats the case or not?
@@theinternet6313 sadly no
www.reddit.com/r/Unity3D/comments/fgb4ks
Here, the first comment shows a performance graph that shows that the UI only consumes CPU when actually moving.
I haven't checked it myself, but if you trust that guy... XD
I love Tweening. For Unity, my choice is DOTween, but LeanTween is great too. However, I still use Animations during elaborate UI animations. It's great because I can hand off to an Animator and they can make the animator look way better than I ever could (Tweening included). But I agree, default should be Tween and digression should be used when using Animators in UI and even regular GameObjects due to the overhead.
Very informative - I was just wondering would tweening be better solution for my UI animating, and saw this video. 5 min answering the question without blabbering. I liked it! Instantly subscribed.
This video came up coincidentally JUST as I was starting to put together a UI for a game I'm working on.
Thank you for saving me a migraine. Insta-sub
Google has you covered man! The omniscient AI knows what you desire even before you do ;)
@@theral056 it certainly did because it changed everything for me. Since leaving my last comment I use LeanTween for everything and recreated it in my job's in-house AR/game dev software because I couldn't live without it
Great tips, Tweening is fast and powerful
Genuinely fantastic videos, glad I discovered you!
I already knew about tweening, but i learned a lot
Another nice GameDev channel for my collection. Thanks!
Wow, I just used this to animate my UI and I am amazed. Thank you so much.
tweening is just a glorified lerp op. There, I said it.
So true.
An extremely useful and versatile abstraction on top of lerp*
Just because the base concept is simple doesn't mean it's bad. Tween engines can do amazing things.
That’s just perfect, I can’t believe I was not using it until today
Well from a performance standpoint tweening sounds like a good way of not having to sort out optimization for that section later in development. Im fairly new to Unity etc (been at it for about 3yrs) I had read and seen this thing called tween, knew it stood for between but until this video had no real idea what it was, so big thanks for that.
Yes. I use dotween, sometime manually do it with lerp also.
Started using this instead of Animator now, thank you, it is such good and i didn't even know this. Thank you!
You saved me! I was arguing with one of the fellow developers that don't use animation for UI transitions.
Zohmygosh... Now I want to redo my entire UI. This is awesome! Thank you for opening my eyes to Lean Tween.
This is extremely useful! I cannot believe I didn't know it before!
Awesome video. So useful. All I wanted to do was fade in a PostFX Volume Weight and got a library that can tween... like... everything!
Thanks so much!
You produce some great content that stands on its own. You don't need these annoying clickbaity titles. Just present good content.
I am absolutely loving your videos!
Use DOTween Pro, its the best. I built lots of abstract UI scripts from which components can derrive from, such as 'FadeablePopup', which can be faded in an out through public functions by tweening the alpha of canvas group. With DOTween its also really easy to tween the properties of different Unity components (Transform, MeshRenderer, CanvasGroup...) with some handy extention methods. For instance, to fade in a Canvas Group, all you do is:
_myCanvasGroup.DOFade(targetAlpha, duration);
The system also supports chained Tweens (called Sequences), delays, intervalls and custom callbacks. Along with OdinInspector, this asset goes into each of my projects.
Amazing tut
Keep it up
Looking forward the next tut
Ok so it looks like I haven't been animating my UI wrong in Unity. Thanks for that title...
i hate dealing with UI and i feel this might be the thing that finally makes me get over it
Never used tweening before. Can i create more complex interactions though ? Like changing multiple target graphics on hover ? For example can i change both the text color and background color of a button at the same time ?
You are so right about tweens man it just such a time saver.
Love you and your channel bro, keep it up to good work. My best sensei 🌹
Can you make your UITweener script available for download?
What about legacy animation instead of animator Vs tween is there significant performance difference?
Excellent video! I would love to see some benchmarks, especially on mobile.
Apparently this is not true since 2019.3, and the UpdateBatches are only called when actual animation occurs. So anyone watching this today, at least do a sanity check before throwing out your already set up animations.
Really good quality video and you make very good point that it is cleaner and more effective to use Tweening in unity especially for UI. I got very excited from the things I saw in the video, however I think there is one major thing missing in these tweening assets.Correct me if im wrong, but with the unity animation I can control the exit time of an animation, so no mater how fast you click on a button, it will play the animation whenever it gets back to the "idle" state. I tried using tweening with UI but unfortunately with tweening I don't know when the tween has finished andI haven't been ably to find anywhere how to fix this issue. Really hope I am wrong and this could be done with some tween engine as it will be much more cleaner, especially for project with many UI animations.
i prefer to use the animation windows in unity... it is not that expensive and i'm artist, i do not know how to code, so learning how to move from point A to point B on code with an animation it is more expensive on time that just open the animation window and animate it... so, sorry, but nice try dude :)
btw: your tool its free so that is nice too
even tho i know how to code , i also prefer to use animation in window. i think this asset would be easy to animate , but animation in window is best.
It'd be great if you could share the UITween script you use. This is a fantastic tutorial.
Anyone know how to fix "Assertion failed on expression: 'task.rasterData.vertexBuffer == NULL'
UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr)
"
Wow this is a very well made and informative video. You helped me a great deal. Thank you.
Please make a vid tutorial how you manage/ centralize the tween controller for all the UI. Cheers!
How do you do the "on mouse hover" effects with tweening? Is there a way to interrupt a tween when it's playing?
Still don't know how to do it besides using animator
I've always written coroutines to animate my UI elements. It's really easy to feed them some data like duration and AnimationCurves and you can even chain them by using something like "yield return StartCoroutine(MyCoroutine());" If I had to guess, that's exactly what LeanTween does aswell.
and i guess it's a more performing way of animating ui, isn't it? cuz canvas won't update UI elements every single frame
i didnt know there was an animator. ive just been tweening this whole time
DoTweenPro has editors of animation. You should try it.Each animation could be a component attached to the GameObject.
Really good info !! Thx bro, keep going :)
Referencing, thank you for the video!
Thanks man! i was trying to make a game similar to JellyShift and i had problems with turn Animations(because of player cube's scale) and i fixed that problem using LeanTween. Thanks
Thank you so much this helped me a lot!
This is perfect! Exactly what I need for my upcoming mobile game :)
This is what i've been looking for!
Thanks!
I'm doing AR solar system i want to make students press on the Sun so it will pop up a panel to show sun description, is it possible with LeanTween please?
This video is kinda misleading. It's not like tweens magically skip dirtying the canvas - if they didn't rebuild the canvas, then there would be no visible animation... This should be kinda obvious. Tweens help since they only dirty the canvas when animating, but the more important thing is to slice up the UI into multiple canvases, which can be nested, so this is mostly a hassle-free process. Otherwise you'll still get massive stutters when tweening a tiny element on a complex UI. This should be stressed, not delegated to supplementary learning material.
thanks buddy, you're my life saver!
Why not use Vector3.zero rather than new Vector3(0,0,0)?
Really amazing, I´ll try it for sure!
I was so dreading to have to make animations, thank god for this video, more importantly thank you :)
Looks very nice and powerful...
i didn't even know you could animate UI in the animator, i just coded these animations from scratch.
Also with open a door in unity make a script for openobject that you can use script for all
This was really handy, thanks!
Wait, so if I want to put a sprite based animation on the UI, by doing it using code I'd be achieving the same performance wise as the tweening showed here?
Or I'm completely wrong and doing it will always be expensive? >_>
i was just about to animate my UI you saved my life
I'm not that familiar with unity, but it's ridiculous that updating an UI element every frame would be expensive. Look at immediate-mode GUI libraries, that's their whole idea and they're super efficient. And how do you think the tweening library works if not updating them every frame? Of course, unity could just be slow, I'm not sure.
1:22 "LeanTween is a free tweening library that I've been using pretty much since I started using Unity"
same with me lol
You basically saved my project... You see... i'm an animator, soo....I was in the introduction of the game and already had 12 animations. And would implement UI animations RN... I'll do everything in Tween, it'll be so much easier
When you say something is expensive, what does that mean?
Like if I had a main menu with 500 UI animations going, is the main menu going to function noticeably different to the user relative to how it'd function with 1 UI animation?
Or this expense purely something hidden from the user's experience?
Expenses' results may differ from low fps to inability to launch the thing at all
Dont ui elements have animations built into them natively tho?
Wow, how come I never came across your channel.
Thank you. Learned that the reason it wasn't working was because it wasn't supposed to work that way. Lol.
What if I'm making a 2d fighting game with customs animations?
tweening is definitely awesome but somehow I still prefer animating cause its userfriendly, and it's not that costy if you are making a small game,
Anyway, keep up the good work I really see a big potential in this Chanel, its motivating
Hi, thanks for the tutorial!
Is there a way to define definitive locations on the screen (canvas) like "bottom corner" or align to bottom corner or something?
All this pixel fiddeling is not only annoying and tedious, it's also not really great when screen sizes differ :( (for example, macBooks solution is 16:10, not 16:9)
Is there a way to do this?
Also, with defining pixels, it's always try and error a lot for me. Like, the correct values don't coincide with the rect transform values in the inspector at ALL. What gives?
Also, is there a way to tell a tween HUD Icon "go to this game object" with moving transitions?
The issue being the same as before: different screen resolutions look very different if you're using pixel values to define the location.
Is it just me or does tweening UI kinda feel like webdesign ^^°
to be honest, i feel much more comfortable scripting than messing around in unity animator. so this is perfect for me!
Thanks for this veryyyyyyyyy important video !
Thank you, thank you, thank you!
This would help parametrized, and reuse animations. Unity's animator, animation workflow is hard to reuse. Thanks for the tip.