Godot Card Game Tutorial: Part 3 - Drawing Cards Animation

hi and welcome to part 3 on the designer card games toriel so the end of part 2 just quick recap we had it's the cards took their place and I like nice rotation effects what we're going to do today is we're gonna have them finance it automatically so for example and we'll the first card you should go right in the middle not down this side over here okay we also wanted to animate nicely so I click a card both money go from here flip around and take this place nicely what I'm doing right now is just quality of life improvements basically one with the game as clear as possible if you want to skip this those gestures get to part 5 none next work on putting the cars into play again get into attack etc ok let's get started first thing I'm going to work at is have it to the cars now if you take that place actually animate from where the deck is to a wanted to go in order to do that I am going to head to my card base under a few new things here so far this script is fairly bare ran out of uses to it what I'm gonna do I'm gonna use the state's function the finite state machine where each card can have this you won over I think it's five or six unique states it can be in so for example your card could be in your house it could also be moving from the deck to your hands if I want is even on the card top in other states if you want to put it in play there not be another state as so on and so forth so if we can make these stays nice and discreet they can really help us organize our codes to do that we go to my card base we are going to add an enum as we're gonna clean up all my states so I think I want six states the card in my hand which is the base base is sitting there doing nothing could be in play so let's add a function I think Oh needs a big visit to process problem process mark too much for this game first thing to do I'm gonna match my stakes so dependent on what state we're in hotel which bit of code to eat I want you to say what my staff is gonna be so first date I've seen my default states are put it in now is gonna be in hand each of these so I could be in hand I'll just Castle of these and I'll do this for all okay so I'm gonna work on like now there's gonna be moved wrong card to hand so it's gonna animate from the deck to my hand and it's awesome to work on finding the right place so I'm going to want I'm gonna want something like this I'm gonna say finest position that's going to have some sort of star position and I want that to interpolate so kudos is built in and it is called linear interpolate and that is gonna be hmm going to the target position I need a time variable I'm just gonna call T let me just quickly have these affairs it's all these I'll put it define in the place based code some of the good Oh doesn't do this let you batch define theirs which can be a bit frustrating to have getting a code looking a bit succinct it's why the only might like ten bears here just all just post you doing nothing okay well should you specify how long I want to do this interpolation so I've been new there which I'm ready for all time I also wanted to take one second to draw that card and I'll get into this code and say if my draw time is little F equal to one I want you to interpolate and I don't want to say if the time is less than equal to one one is interpolate and then I want to increase my time so time will increase by Delta over here I haven't used gloss time yet the way of work for this linear interpolation function is it will assume you're starting at time zero and you're finishing at time 1 so this will always be a 1 the way we make it last longer is a vaunted wartime to the two you would have to basically stretch this time so we would divide this have to be divided by floating one has to be a whole number of full time so basically what this does this makes T take on at half the speed of basically the game speed so in fact would be two seconds in terms of game speed thus we can fudge it to work when this guy's doing four times one I don't have L sleep if I've done all that stuff I want to make sure in my target position so occasionally say time jump the heads like one point zero zero two might be slightly offset you have that as a quick correction I will then want to say the state is going to be in hand one time at its position and I want to enhance state really important if you don't forget this you know how to reset this Tyler reset it to zero so next time if I blow it again with that time I draw I'll be messing up okay let's add some scripts that will work on the play space so I need to find a star position and a target position so this was my rec position that is now going to be at my target position and I also want a start position so my new card it's start position I wanted to start from this deck here let's get my note as a deck that's just all's position hopefully that'll be working quick check and it has gone who renders oolong which is always the way yes so I haven't done I haven't told it here that it's state needs to be the one that lets me move drawn contact okay otherwise I'm just at the enhanced eight just need to do nothing here we get a slight problem I'm not the best fix of it I've got a fudge here just know what moved wrong card to hand is that's because I'm using the finer my ena in my card base function I tried to find it's a global variable I've messed up or it doesn't work that well so there's enough fudge it for now I was a copy this defined email plug into my main play space okay I'm finished clusters work this time there we go so takes one second to move and that works for all the cards I need to do once like the thing you can see we're starting these colors were coming from here rather than coming from here we need to offset our cards to make sure they appear from the top left to do that I want to shift it by the card size size up here I was new to the deck position - the card size up ruining the center so I wanted to have this and I think I can correct this as well I mean this should actually just been car size with a load better let's see if those work yep that seems much better okay next thing we can do we want my card to not appear at the correct tilt ones appear at the same tilt as the deck base which basically rotation zero and then change it by the time it gets to the card hands soon it's a card base and we're going to have another interpolation function one is like downsides of this new interpolation is only works in vector twos and what I want to interpolate now my rotation which is just a number Kate do that in order to get a website looking with some basic code or how to do that so the exact same thing with representation that is going to be a full of a start rotation or start rods and you'll find that by one minus time and you want to add the target position so target rotation times time okay and that will offer quick explaining it when time is zero and T equals zero this term will vanish this will be one so when you start with a start position at the Ang's T equals one I think that one minus one is nothing so exist ten vanishes and then its target ation and times 1 so in tears want how about my target position is widest code works again we need to find some more variables to be like now also I should have defined the last year bear waters vector 2 is just what they are okay that's your working great what's down and like a loop that when it's finished like def not to be exactly at my target rotation so if I play space let's add that in here let's just copy these two lines my start rotation should be 0 it's just since I've any rotation at all and my target rotation I think we define that yeah there's a five-way yet let me do that anymore because so I run it to a nicety of rotation to space as well okay so those the first half of this next thing I want to do is on to add a card back to it I want anybody draw the card bases or see the card flip around this feeds a very straightforward trick first things first I'll go into my card base I'm gonna add another sprite and this would be much higher back like a supply toughing those warning assets card card borders back texture just be the back of the card obviously there it is and as always make sure we have not set up offset first I'm going to do is we're gonna sort out the size so we've done that absolutely turns if I go to my ready functions murders yep I just want to read you this bit of suspense but this time of card back in car I think to explain this best I'm going to okay I'll quickly explain how this is gonna work cutaway to segment on tablets assets card card borders just back texture back the cards are you see there it is and as always make sure we have not sent up offset first I'm going to do is we're gonna sort out the size so we've done that app so you turns if I go to ready functions murders yeah I just want to redo this bit but this time I think to explain this best I'm going to okay I'll quickly explain how this is gonna work cutaway to segment on and sip on that tablets assets back the cards obviously there it is and as always make sure we have not sent up offset first I'm going to do is we're going to sort out the size so we've done that app so you turns if I go to my ready functions where it is yeah I just want to redo this bit but this time I think to explain this best I'm going to okay I'll quickly explain how this is gonna work cutaway to segment on and so fun that tablets I feel original scale really flick forward it's just gonna be the red scale X if I don't do that it will basically go wrong so I want to change it with reference which original size so VEX scale is going to be the original scale and we're gonna times that by this following function and it's gonna be just absolute value okay if another should work we're getting a slight error which is that our scale isn't defined just declared in my ready function and that's confusing it think if I just take this here mine isn't on ready instead and then it should work okay let's give us a quick check yep so you see the cars now rotating we want to change now is when we get a halfway point would have quit really goes invisible if that instant we want this one says delete the image off the card back back to my card base function it's got a quick if loop so it's T just bigger than or equal to 1/2 this will only occur once so let's have a test with us as well we'll say if card back invisible we then wanted to check if the time is greater to the heart and if it is we don't want to make that bearish let's go to the simcard back I want to changes visible must both know it's more sense if I just say that so if you can see the card base check if x greater than 1/2 hour which point we want the top we want the card back to vanish so now when we run it we see the halfway point the car back vanishes and also died looks like that card is flipping over okay we're getting there last I'm going to do in this part is how's the cards and automatic take their place so it mister first car to always go here rather into the right-hand side let's get on with that we are gonna do a couple of things in my play space I just saw that was angles gonna be let's get rid of this for now I'm gonna add a quick little function it's gonna automatically make it work okay to work out the angle the fair bit of work I'll come to a click a quick explanation of it so now when we run it let me see the halfway point the car back manages no so that looks like that card is flipping over okay we're getting there last I'm going to do in this part is how it's the cards and automatic take their place so it's the first car to always go here wrath into the right hand side let's get on with that we are gonna do a couple of things in my play space I just saw that was angles gonna be let's get rid of this for now I'm gonna add a quick look-see function it's gonna automatically make it work okay to work out the angle the fair bit of work I'll come to a click a quick explanation of it so now when we run it we see the halfway point the car back manages no it looks like that card is flipping over okay we're getting there last I'm going to do in this part is house the cards and automatic take their place so it's the first car to always go here wrath into the right hand side let's get on with that we are gonna do a couple of things in my play space I just saw that was angles gonna be let's get rid of this for now I'm going to add a quick look-see function it's gonna automatically make it work okay to work on the angle I'll come to a click X quick explanation of it so now when we run it we see the halfway point the car back my light is flipping over okay we're getting there last one to do in this part is house the cards and automatically take their place so it's the first car to always go here so you want to do PI by 2 plus the card spread so card spread is basically how far apart these cars want to be which I've defined as 0.25 from the end of Part two and we're tied up like this especially here for Lotus otherwise it won't like being divided by two and the number of cards in my hand / - and then - what part number we are let's define these bears quickly part number is one higher however this code we don't need to do that because when I create a card it will always be the last card so factorizing card num I can just have a number of cards hand again so look at our very last card what I want to do is then add some organizing script so it's just before I add that new card I'm gonna go through all the cards I have so for each cart in which is a child of cards so I'll be every cards and what I'm just about to create an out of mixture that gets reorganized do that I both need to redefine all the stuff here okay define its new angle rather than number card hand tap is gonna be the other thing number and going to make sure that each time we start this for leap we have the fact that Harlem is zero okay from here I can copy all the stuff across so the angles are fine with this and I can also define their start position target positions and same rotations okay let's see how that works now I do one more thing first osteo update its state I'm gonna say state I am now gonna have to reorganize my hand which is up there is that one outdated state I run it now I'll do nothing because in my card base there is nothing and we organize hand-eye racing what all this took again copies through with the exception I don't want to do any see card rotation stuff so let's see if that works so one card is fine two cards now we're getting this slight mistake will seem to want to go here which means I'm obviously to find a my angle incorrectly if I go to play space yeah what I've done here I haven't increased a card number it's run on my one - you fix it so first there's the middle let me get two then we get three so on and so forth so it's really nice however that is it's like bugging it divides your cards are really quickly it gets a tad confused what's happening here is I got a card base I should be in a move draw card to hand loop however because I clicked evolve this loop is end when our switching to reorganise house and the main thing that messes up is that suddenly all the scaling stuff isn't working properly Lattimore news today is just quickly fix that bug so we're going to say if the carts plate is in can't do if the car do nothing is just in my hand then all the stuff is fine and I want to change any of that let's go to past that for now however else and I think help is if is currently being sworn into my hands soak our stateís moves on carpet hands do they want to change a few things here first things first in this case I'm not going to say reorganize my hand and look at exchange little States and I'm going to keep it in the same state so it's this bit of code only wants to occur when I'm here also I don't want to redo my position movements okay so that's always gonna cause a problem so I'm gonna have this bit of code in here the main problem having right now is if I run it yes a lot better now we got some weird jumping acts so promise I've got some my card deck here and if I draw a card it's gonna happily go along to try and get to this position here I must say I draw a second card when I'm at this point here that's gonna change a few things it's now got a new home and we'll say it's new home is here however no anything special in code it's going to assume he was actually along this path is dead and I was on an equivalent point on this path here so some of the position will jump the pretty better fix that I've found is we're going to say we're going to create a false starting position so I saw that's me finish position but let's say for example I have done 90% of my journey but not putting one left to go until journey I'm then gonna create a new start position which basically pods along the right line in such a way I've got an open one left of the false stop this is Jade do we want to redefine our start position based on a fake start position let's add that now I want this start position to be as we just said the target position - the target position again - its current position and then you want to divide that what portion of the time left we have to draw that card so let's get that notation we need we have T and it should take more time to do it actually no it shouldn't anything one to do it so I'm going to wanted to find that by one - card type okay Arlis in brackets goes wrong okay and that should be it that was interesting well I didn't want yeah there we go that should be target position there goes looking a lot better so find your two cards kind of go into the right place we have a slight problem with the time is being slightly off that's caused by the fact we're busy Harper who drawing a card and then we shift the last cut it's already in place so Tommy's don't quite match up properly we can't fix that I'm not going to right now she had a basic idea all I want to do now is I don't want my cards to reorganize at the same rate that they draw between my card base I'm gonna have a new thing called reorganize time I don't say one ought to get half is dead there's not my car to be organized in half the time it takes and to be drawn actually all you do that's working and if it is we can call that a date yes you see the cars are moving a bit faster than they're being drawn so we'll leave it there in part four we're gonna have it so if you mouse over card that car will zoom in especially with a text a lot more clearly and also habits too can pick up and drag a card about okay I've graded part five was like an actual gameplay implemented as always thanks for listening

Channel: Adventures in Godot

Views: 4,160

Keywords:

Id: fNda4mRzHIo

Length: 26min 31sec (1591 seconds)

Published: Sat May 16 2020