Godot Shape Keys with Armature Animations

greetings my name is Brian Carey and I'm going to build a video game this video is in response to a question proposed down in the trumpery by one of my faithful horde followers beatbeat dear barbarian show us a better way for how to use the shape key animation together with the bones animation at the same time example my character is walking bones animation and talking shape keys Cheers hmm that's a good question well there's a lot of ways you could approach that several which I will show you after this and there will also be some time-travel thrown in for good measure my name is Brian Carey and I am the savvy barbarian [Music] so in the last video we talked about animations specifically armature based animations and storing those animations in the NLA editor the nonlinear animation editor I should have links for that up in the corner and down in the trumpery if you want to have a peek at that video and refresh yourself on how that process works in an earlier video we also talked about shape keys and how it can take shape keys and move those from blender over into Godot shape keys are basically a way that blender and Godot lets you take a snapshot of the vertices in an object it's not armature based there's no skeleton but we can take kind of a before and an after snapshot of where the vertices are and we can blend between the two different shapes I've got an entire video about that as well I should have a link for that also in the corner and another link for that down in the trumpery the question is how once you get those into Godot can you run them both at the same time there's a number of ways you can actually pull that off in some ways I think are a little bit more elegant than others let's look at some examples as you can see I have magically reappeared inside of blender explain that when Captain disillusion so this is a mimic it looks an awful lot like a crate but it is not so I've got two actions stored here in the NLA editor I've got this one called taunt and I've got this other one called spring open spring open is the one that's active and if I scrub through it it opens up and this beautiful tongue sticks out grossing everyone out imagine it with scary music a bit of drool and the effect would be complete and you can see that this is an armature based animation I've got these armature bones in here that move and you can see them appear in the top view as these bones move back and forth to make the animation happen but I've also got some shape keys so if I select my object you can see I've got some shape keys in here as well me teleport out of the way so you can see I have tounge basis and it looks like this and then I have tongue flared and as I change the value you can see all this is gonna do is make him and it kind of flex his tongue give it a little bit more added gross out for the sake of the video game so what I want to do is have this tongue flare happening at the same time that we have the ponting motion that's gonna look like this like turn on taunt I want this guy to be making this crazy face the and I want his tongue flare to be happening at the same time now this doesn't have to be a tongue flare and a crate opening this can be your walk in your talk this can be any animation and any shape key so let's dump this guy over into Godot and see what happens so here we are over in Godot how did we get here from blender yep I got a video for that too links and links just teleport out of the way and hopefully the bottom teeth came over again everything should work out just the way it was we've got an animation player here and if we scrub through the opening we can see the crates doing exactly what it's supposed to do I've got the spring open animation and I've got the taunting animation so this guy here he's just doing that now there's a little button here right there that guy if I set that to on he'll just play infinitely I can just play it all day and it'll just go most people probably know that trick but if you don't you'll want to know it now the shape key lives over here on the mesh object so if we click on the shape key go to the inspector and come down here to blend shapes you're gonna see we've got tongue flared or not and this name comes directly over from blender so we can see as I slide this from 0 to 1 the tongue does its little the shape so I want this tongue flare to happen at the same time he does his ton taunting trick with the armatures now let's go to the part that everybody loves code [Music] so I'm gonna select this spatial object here the top level of crate and I will click the invoke a script button and I'm gonna name this guy mimic create and here we go since we have this animation player and it works perfectly and we put that there from blender specifically for it to play that animation we're gonna use that animation player and the nice thing about that is we get to kind of hand that work off to the Godot engine it takes care of it for us and when it plays we don't have to worry about it anymore that's playing like it's supposed to now since you've seen this before I'm just gonna dump in a few lines of code so for those of you have seen the previous videos this should look pretty familiar this code is pretty straightforward we've added a variable here called mouth open and we've got a input function here we're saying if somebody hits the space key which is default on the UI except button that if this variable mouth open is false then we're gonna set the variable to true and so mouth open it's going to keep track of whether the kraits mouth is open or the kraits mouth is closed and we're if it's false it's we're gonna set it to true and then we're gonna actually make that happen we're just selecting the animation player here we're gonna play the spring open 0 3 animation Wow that's a terrible name I should have renamed that in blender you know what I figured out how to rename that in blender I won't redo it but I'll show you where it is real quick back here in blender when you're in the animation editor I didn't know how to rename these guys before but here is how this works so you've got some horrible name thing here you hit the N key and you select the animation that you want and right there we've got a thing called spring open scroll down just a pinch here and there's the active strip and there's the action clip so there's spring open dot 0 0 3 right here this is the one that I need to change so that when it exports over into Godot it comes out named the way that I want back to Godot so too long didn't read if you press the spacebar we're gonna flip this mouth open variable from false to true and we're going to play the spring open animation let's test that to make sure it works I'm gonna go over to my world environment here or my world scene rather I've got a world I've got a camera and I've got a directional light where I've turned on the shadow I'm gonna select the world and I'm going to add a link to my crate dot t SC N and there it is f5 and now it's running and now when I hit the spacebar it does exactly what I'm supposed to do it plays the spring open animation and that's it so far so good let's add a little bit more to the code so we handed off the work to the Godot game engine to play the animation but how do we know if the animation is over and the easy money is to let the animation player tell us we're gonna use signals to do that select don't should probably be the subject of yet another video because signals are incredibly handy and I think they're a little weird at first once you get used to them they're they're pretty straightforward they're not bad at all but at first it's a very strange concept of where you put what where so we're gonna add a signal to this and we'll explain more in detail how these work in another video so basically we're going to click this animation player and then we'll go over to this node tab up here and what we're gonna do is look for animation finished right so this notifies you when an animation is finished playing give that a click on a double click it to connect it and then I'm going to make a function in the same script here so I've got a I've got a script here on my crate object it's it's this guy right here and this is going to be the function or the the method that is executed when the animation is done playing because the next thing I'm going to want to do once this animation is done playing this is just the crate open then I want that to be done and I want it to play the taunt animation where the tongue just kind of I need that so when I click create I'm gonna end up with this function called an animation player animation finished just kind of a mouthful feel free to rename that if you want to but this works so here's my function on animation player animation finished and it's gonna pass me a string back any time that I want to of which animation that animation player finished playing so I know that I'm going to be playing the spring open 0:03 badly named animation and I'm gonna check for when that particular animation is done then I want to play the next one in the series that code should look roughly like this so when the animation player is done playing the animation and we can see that there is a signal coming off of this by this nifty little speaker radar whatever the heck that is icon so it's going to play and when the animation player is finished playing the animation it's going to execute this function so I'm saying if the animation name that's if that's that's this variable that gets passed in and I'm saying if that variable is equal to and that's if it's equal to the springing open animation that I'm expecting it to play and this mouth is open variable which it should be because we just set it open or we should set it to true here then we're gonna play the next phase of our animation so now animation player dot play taunting zero zero two I have got to start naming these things better let's see if that works so here we are again I hit the spacebar and the mouth opens and it starts doing the extra long taunt animation now why is it playing forever we'll remember the little button that we clicked in the animation player earlier that's why somebody stopped this and it's in taunting Oh to the taunt motion here I'm gonna turn off this repeat button animation loop it's actually called and I'm gonna run that one more time so now and hit the spacebar we get the spring open and we get the taunt and then we're done which is exactly what we want the next thing I want to have happen is for this thing to close and be done back to the code and now through the magic of Hollywood animation this little bit of code appears this is again very straightforward we're still in the same function that gets called by the animation player so we're finishing but we're finishing another animation so the first time we played this the animation player sent the signal on and it calls this function and it's telling me in this variable here animation name what was the name of the animation that I just finished playing so we checked for that and the first time we check to see if it was spring open and then we played the next animation if that was true this time we're checking to see if the animation name is called taunting and if it is we're gonna play the spring open animation but we're going to play it backwards we're also setting the variable mouth open equal to false after this again so we can keep track of whether the mimics mouth is opened or closed so now we've daisy chain three animations together we should have an open we should have a taunt and we should have an open backwards that means closed opens taunts and closes the end so that's one way of getting the animation player to play through the animations that I've got um and you just need to think about what triggers you're gonna use so it may be that you've got your character entering an area that you're checking you may be playing your animations based on a collision with another object you may have your animation playing based on a timer it's completely up to you I've wired mine to the spacebar because it's easy to show this in a tutorial but the trigger you're going to use is going to be different based on game to game so the armature is done but how are we going to wire in the shape keys to play at the same time there's a number of ways to get the shape keys to work so here's one way to do it I've added this variable blend tracker I've made this a float and then in the process function all I got to do is increment blend tracker plus equal to Delta and we're gonna set this value here of our blend shapes this comes from by the way just as a refresher if you click on the mesh object we're getting that value from right there blend under skate blend under score shapes slash tongue flared so we're putting that into our set value and we're gonna set it equal to tongue tracker so as the game goes on blend tracker will increase and the mouth will open this method I would call absolute rubbish it works but here's the thing you have to actually manually do it it's a lot of work you're manually having to track somehow some way and you could do use a for loop you could use a number of different ways but you're really not handing off the work to the Godot engine you're doing it yourself and that's a lot of bother I don't want to mess with that if there's a tool I can use I'd rather use that some people will stick a timer in here and have the timer go from zero to one and that will work too but that's only slightly less rubbish my preferred method is to use a tween yep got a video for that link up here link down the trumpery so let's take all this rubbish out and add up a tween chunk and I'm gonna go to crate going to add tween let's rename that to something slightly more useful tween tongue flex nice so this tweens job is going to be much like the animation player all we're gonna do is hand off the shape key animation and let the tween handle it in much the same way that the animation player takes the armature animation that way I is the programmer I'm not bothered with having to do too much we just give it to the game engine and let it do its thing so let's stick some tween programming code up here in the ready function and that should look like this so now the tween is programmed if you haven't seen the earlier video on tweens this probably looks a pinch complicated but it's really not and I explained that in a lot of good detail in the other video the too long didn't read version is basically we're going to interpolate the property called tongue flared if you remember that's that's this guy here and the blend shape so that's blend under square shape slash tongue flared and what we're gonna do is right there blend underscore shape slash tongue flared and these three numbers tell us that we're going to animate the property from a 1 to a 0 and we're going to take one second to do it and now all we got to do is start between at the appropriate spot so the function we've got checking our animation player has been doing its thing and at the point where we've checked to make sure we're playing taunting then I want to start the tween there as well so I'm going to jump right in here I'm gonna reference the tween and I'm just gonna click start and if the circuit gods are for us this should work thou fool thou has created an error your hubris has brought you low greetings this is future barbarian you can tell I am in the future because my shirt is a different color thereby destroying any video continuity many of you have already spotted the error that I made but when I created this video originally and put a bit of this code in the wrong place let me just show you what I did wrong this little bit of code shouldn't be put here it should be put here other than that this video is completely fine but if I put the code in the other place then the Queen and the animation player would actually be playing at the exact same time which is what I was trying to show you in the first place it's good to know I still have my hair in the future and now I return you to your normally scheduled time line and if the circuit gods are for us this should work hit the spacebar it opens you know that was really hard to see did you see that it might have been there you know we're gonna do is we're gonna pause the animation and so we can just have a look just at the tongue doing its little tongue flare thing back to the code so what I'm gonna do here is couple of things one I'm going to never let it actually play the animation backwards so it'll never close I'm just gonna let it finish its haunting animation and then quit and then I'm not gonna let it tell the code that the mouth has closed now if I go to my tween here one of the things that I can do is I can set this guy to repeat so now I'll just play over and over again as soon as I start him and I should be able to see that once I launch the game so there it is my tween is now playing you know what I don't like right there is it's it's doing its iteration from 1 to 0 or 0 to 1 where I set it to and then it's immediately teleporting back to the other number and I think you should go gradually from 0 to 1 and gradually from 1 to 0 yeah why yes yes it should yikes I sure hope Google doesn't get me for adult content so how we're gonna do that let's do something unprecedented and consult the documentation so if I control click my start code here it's gonna take me right to where that is in the tween section of the documentation so there's lots of good data here my goodness it just makes me sleepy looking at it all that is a lot of stuff but fortunately it's organized reasonably well so we just need to look through some here for some way so you play that backwards there's nothing there's nothing back we're no matches rêveur no matches we want nothing okay so it appears there's no way to actually play a tween backwards unless you actually programmed the tween to play backwards so let's do that back to the code and there's many ways to do this but the way that we're going to do this in this example is we're going to use another signal we're gonna let the tween tell us when it's done playing this thing and then we're gonna program the tween to play backwards and do the same thing again so it'll just ping pong back and forth from 0 to 1 and from 1 to 0 yeah okay good something to click on the tween object and I'm gonna go to the nodes section and I'm going to look for tween is all completed so the tween is going to emit this signal once it's done its thing it's done playing it's iterated from 0 to 1 and then it's gonna emit this signal and tell me that it's finished so let me double click that I'm going to create this new method I'll click connect and now I've got this new function this new method here that will be called when the tween is done playing so I've got this variable here called pong it's boolean it's just gonna be true or false and this is gonna keep track of which direction I'm gonna play my tween from 0 1 or from 1 to 0 and that's all it's gonna do ping and/or pong so that's we're naming it I'm just gonna say if pong if that's true then we're going to program our tween thusly just gonna copy all that code dump that right there else do it the other way so this particular tween here is going to go from 1 to 0 in let's say a half a second and this tween is it going to go from 0 to 1 in half a second couple more things need to happen this gets called when the tween is done playing so this needs to also start the next run of the tween will reference the tween between tongue and flex there you are and say start also we need to change the value of pong each time this thing runs so we'll set that right here and again over here pong equals true so if pong equals true we set pong equal to false else we'll set it back to true and we're changing the direction that's programs from 0 to 1 from 1 0 and let's see if this works engage the spacebar it opens we do the taunt animation and the blend shape does absolutely this exact same thing that it was doing before we added all that code are so I have a guess here's what I think may be happening so let's stop that and let's put in some little debugging print code here just to see if it's doing the thing that I think that's going to do so if this isn't being called I want to make sure this is being called so I'm I'm only getting this I'm going from 1 to 0 seems to be taking the full second like it's never even calling this code so I'm just going to put a print statement here print pong is false and then down here I'm gonna put print is true and let's run that one more time and see what we get so it's spacebar we get the mout crate open we see the top and there it is now what we don't see down here is there's no true long is true pong is false none of that is happening so that means that this bit of code is never being called this bit of code this this method this particular function is never being called and the reason this is never being called it should be being called by this tween right when this tween is done when it's all completed it's to call this function but that's not happening so here's here's what I'm thinking if we click on the tween remember when we turned on this repeat function yeah so I'm thinking that since this thing is repeating ad nauseam that it's never like finishing right it's just looping so it's never sending the I'm done I will now call this function that's that's my guess here so let me turn that off plus I don't need it anymore I don't need that to repeat here since I'm basically doing that with all of this I'm programming the code tween to go from one to zero between to go from zero to one I'm taking care of this myself well I'm handing it to a function so the function should handle this instead of this check box so now that that's off let's give that another run and see what happens click the space bar opens taunts me and honest true pong is false the pong is true pong is false the blend shape is now being controlled of both directions by the tween so I'm gonna have to say that's for the win now I'll turn on the animation again so that we can see those both together so to turn that back on I'm just going to uncomment off this line here so the animation plays backwards again when it's done the mouth is equal to false and then at this point in the code I need to tell between to stop it because right now it's on infinite loop so I'm just gonna call the tween once again one more time between tongue flex dot stop all and that should do it so hit the spacebar it opens the tongue flare is happening everything worked everything worked really the chair has to do that every single time my recommendation is to use the animation player to handle your armature animations and use tweens to handle all of your shape keys if they're going to actually be happening and doing things in your game that way you've basically offloaded the the work and the burden of you doing anything to the game engine I'm not actually if you notice by the end I had no process loop there was no physics process I wasn't manually iterating anything all I had to do was hit the spacebar and through the use of signals and the animation player and tweens the shape keys everything took care of itself once I told it what to do and yeah it wasn't the cleanest bit of code I could have probably written in a more concise way I'm sure there's better ways and hey if you've got some suggestions feel free to leave some of your code down in the trumpery below I'd like to see your solutions as well it may help other people so by all means post them but if you're gonna ask me what the most elegant solution is to play shape keys and armature animations at the same time it's going to be to use the animation player and to use tweens to handle your blend shapes so beat meet I hope that helped and anybody else who enjoyed that feel free to leave a comment down below if you've got some other questions or requests for other videos let me know and I'll see if I can make those for you so if you guys could do me a solid favor I'd really appreciate if you could click the like button click the subscribe button and turn on notifications that that's awesome and thank you so much for all the comments and the feedback that you guys have given me in the last little bit here much appreciated I've got links to some other good video here and some links to some other video right over there so give those a click if you're interested this is Brian Carey reminding you to be a scholar and a barbarian [Music]

Channel: Savvy Barbarian

Views: 1,949

Keywords: Godot, godot engine, godot game engine, unreal, unreal engine, unity, unreal game engine, unity engine, Blender, blender guru, godot guru, foss, linux, debian, ubuntu, mint, indie games, indie game dev, indie dev, vs, godot vs unity, godot 3d tutorial, linux gamer, game dev, savvy, barbarian, savvy barbarian, intermediate, godot example, learn godot, learn blender, armatures, armature, blender armature, animation, animation tutorial, tutorial, blender tutorial, shape keys

Id: HaSom3dby3E

Length: 27min 44sec (1664 seconds)

Published: Mon Jun 01 2020