How to Tween ANYTHING in Unity (Intermediate LeanTween Tutorial)

although tweening stands for in-between animation frames we can use modern-day tweening libraries to tween almost anything including numbers and the fill of a shape i've set up a 2d project as well as importing text mesh pro and some nice colors i'll leave links in the description for how you can do that yourself the next thing we need to do is import lean tween which i've actually already done but if you haven't click this button and now we need to create a canvas which we're going to set to screen space camera dragging our main camera so that we can see it better in the scene next we need to add text mesh pro call this tween text because it is in fact the text that we're going to be tweeting i like to change some of these settings so i'll change the font change the color change the font size i'm pretty much changing all these settings actually i also want to add a shadow we can add an underlay of a nice dark color and set the offsets okay so we need to make sure that the wrapping is disabled and that it's centered and uh also just change the default text since it's going to be a number at the end okay so now we need to create a script so we can actually start tweeting this thing so we'll call this tweentext as well and once it loads we can drag it onto our tweentext object not to be confused with the tweentext script which we're now gonna open in your editor of choice create a public float between time variable and also a public void tween function which we're going to call from our share method next we call lean tween dot scale and we're going to scale the game object to a vector 3.1 times 2 which is twice the original size over between time seconds and we need to set the easing function to punch now we could do this all in one line but it gets really messy really fast so let's split it up into two the last thing we need to do is make sure that there are no tweens running on it so we do that with a cancel on the game object and we also need to make sure that the transform isn't messed up so we can set the local scale equal to vector3.1 great so this should work as long as we make sure to set between time to a number so like three should be good and when we play this on start it's gonna zoom up and then go back down but i wanna be able to run this multiple times so let's add a button for that and we can create a ui button text message pro as well set the width to 300 the height to 100 so it's nice and big move it down a little bit we can change the color to the background color because i think that looks nice and add to the on click event the tween text and we'll try to find our queen function so we also want to make this text nice and big we'll auto size it we'll set it to the same font and let's call it what it is it's gonna tween and let's give it this nice red color to pop out great so this should work but um before we run it i want to add one more thing to the queen function so i'm going to add a lean tween dot value and with lean queen dot value you can really scale any value you want any variable we're gonna scale from zero to one over tween time and also set the ease to punch and uh the astute among you may realize that this actually isn't doing anything yet because it doesn't know what's between so to do that we're going to set on update and this takes a function so we need to make that function public void set text and this neat function needs to take in a float value because that's what set on update expects we need to import some extra stuff so using tm pro we're also going to create a public text mesh pro u-gui call it text mesh with a lowercase t and this text mesh we are going to set the text of it equal to value dot tostring and we need to tell it to format the string to one decimal point and then we can just pass this in and it will run on every frame that the tween is running great so we just need to make sure that we drag in our um text mesh pro to here so we'll drag itself in because this is the text mesh that we're trying to reference and if we run it we should be able to see that the text is actually changing there we go we can write as many times as we want so that's all great i want to show you one more thing you can do within tween dot value so to do that we're going to create a image and we need a sprite for the image and you can do that by going to assets create scroll down to sprites create a square sprite and now if we drag that in here we'll see that um it gives us some extra options so let's change the width to 500 and change the color as well but the important thing is you can change the image type to filled and set it to fill horizontal so now you can scroll back and forth like this let's also add a shadow so that it matches our text and we can make the shadow be pretty dark as well so let's set the effect distance to 10 negative 10 and you can see that the shadow scales with the with the fill okay we need one more script let's call this tween image and we'll drag this onto our image that we're tweeting the very creative naming i know um so we drag this on here open it up and let's just get all of our variables out of the way first so we can do public image but we actually need to import something for that so let's do using unity engine dot ui so that'll allow us to use it and let's do image with a lowercase i and then we also need a public float between time again and a public color we need two of these so begin color and end color great so we don't need any of these what we do need is another public void tween function and in here we're going to do lean tween dot value and we're gonna pass in the game object again instead of going from zero to one i'm going to go from 0.1 to 1 and we're going to pass in between time as well we're going to set the ease to punch and we could do the same thing that we did before with the uh set on update but uh there's a second way of doing it that i want to show you so instead of creating a new function down here we can make what's called a lambda expression and to do that we add a little parenthesis here pass in a value and we make a little arrow with an equal sign and a greater than sign and then we create a block with curly braces and i like to break it out like this to make it very explicit that it's a done function then we in here we can say image dot fill amount equals value and this will be called on every frame just like before and we also want the image.color to be a linear interpolation decay lerp from the begin color to the end color mediated by the value so as long as we make sure to set all these in the editor this should work so we drag in its own image we set it to let's say three again the begin color will be the color it's beginning as and we'll tween it to a nice red for the end color now we just need to make sure that the button knows what to do so we add another event to it we drag in the image and we find our tween function again tween there we go and um this should work so let's see so that went off on the start but if we click tween you can see that the um bar scales up and then tweets right back down so that's what we said we'd make um if you found this video useful please leave a like and you can follow us at petscoregames on twitter for more content like this thanks and have a great day

Channel: Petricore, Inc.

Views: 41,510

Keywords:

Id: A3xISYK2Ci8

Length: 8min 33sec (513 seconds)

Published: Fri Jan 08 2021