FLAPPY BIRD • FLUTTER FROM SCRATCH

[Music] yo what's up guys so today i'm going to continue going down the rabbit hole of creating games with flutter and the game that we're going to clone today is flappy bird i've been wanting to make this game for quite a while actually um especially after making some of the other ones like tetris and and snakes and pac-man i've been wanting to make this because the difference between those games and flappy bird is is flappy bird has like this element of gravity to it right like you need a jump and the bird has to fall in a really natural realistic way so that has an additional challenge compared to some of the other ones that i've made on the channel also fun fact about flappy bird like i remember i think it was like early iphone days or ipod touch days when this game came out and everyone was playing it was just so popular and addictive for how simple the game was that it was generating a lot of ad money and just interest in general to the point where the developer who made the game i think he was from malaysia or singapore or something but he basically didn't want that much attention on him so he i remember this was a controversial moment because he decided to take the app down from the app store and i can remember this so clearly because like you can imagine in the in a time where you know it was like the peak of all these kids being really addicted to this to this little phone game um and then you know you can't download it from the app store anymore and what's more crazy about what's even crazier about that is i remember people were selling their their phones that had the app already installed um they were selling it online for like a lot of money because yeah because you just couldn't download it on a new phone or if you hadn't downloaded it already then yeah you're not going to be able to get it so um yeah that's a crazy time that i remember it's also more opening for how simple the game was actually it's such a simple idea but yeah basically today i'm just going to show you how to how to code that game completely from scratch so let's get into it okay so i opened up a new flutter app and the first thing we're going to do is just delete everything that's already in there because we are we're gonna try to code this from scratch okay so we'll just leave this uh we'll just leave this main function to run my app and below that we're gonna create a stateless widget called my app and we're going to return material app just a couple things inside here we're going to check this married banner to be false which is just this debug banner and for the home i'm just going to call it homepage let's come to the right to the library and create a new file called homepage.dart let's import the material and over here let's create a stateful widget called home page and instead of returning a container we're going to return a scaffold cool let's come back to the main and now you should be able to click this and import the file that we just made okay sweet so if i just reload that onto our simulator it should just be blank all right so that's what we're going to start now in the home page in this scaffold let's go body and let's create a column and inside the column we're going to have some expanded widgets and let's just give it a color for now blue oops just save that let's just give this to be green okay so two expanded widgets should just evenly halve this half the screen um this first widget though i actually want to make this a bit bigger so flex let's say three let's see what that looks like um yeah i think that's good maybe just two yeah i think two is fine okay so we're gonna have the flappy bird jumping up here and on the bottom we'll just have um some text displaying like the high score and just things like that now i'm going to import an image you can choose whatever image you like but i have this flappy bird image and we're going to just create a folder call it images put the bird in the image and we're going to put it inside our library folder okay so make sure it's in library let's come back over here go to your pubspec yaml and this is where we have to uncheck something so we're going to have some assets to import so let's uncheck these guys and the path that i put it in is library slash images slash okay so this will import all the photos that we put in which is just the one bird image that we have okay so i'm going to come over here and in the new file let's create another one called bird bird dot dot import the material let's call this a stateless widget and just call it mybird and we're going to return image.asset so this is where we can locate our image and as a string text we're going to say library images and what did i call it just flappy bird dot png so flappy bird dot png okay now i want to show you this right in the middle so let's say child my bird oh yeah when you see my bird and we haven't imported yet i think if you press tab it'll automatically import yeah it'll automatically import that file for you so um so yeah there's that let's see what this look like okay so there we go so that's huge so let's make this a bit smaller so i'm going to put this inside a container and let's give this a fixed height and width so let's say height 60 and width also just 60. let's see how that looks okay that's a bit more of an appropriate size now since our container over here which is blue um it's just wrapping around the bird right so that's why it's kind of gathered in to the middle so one way to fix this is let's just put this in the center widget for now okay there we go whoops okay so now um what i'm going to do is i want to add some movement to this bird so if i click on the screen let's try to make it jump or at least uh at least full and what i'm going to use for that is i'm going to use a widget called animated container which is really helpful so um so container you've got the centaur so i'm just gonna get rid of this it's gonna call it animated container and you should be able to find an alignment property and basically with this alignment we can specify where on the screen this bird should be so in the alignment they require two um two numbers so like a pair of coordinates and these numbers are between negative one and one so we need to specify like something like this so minus 0.5 and actually let's just start with zero zero i think zero zero is like right in the middle and we also need a duration so the duration is let's say let's just say zero okay so this shouldn't change anything because you're in the center anyway let's see if the changes if i do this no that's probably because i have a center widget so let's let's get rid of that center widget beautiful so you can see like the first number is the x axis so horizontal position and the second one is the vertical position okay and these numbers are specified between negative one and one so for example for the horizontal direction negative one is the left most side so if i say negative one zero negative one on the horizontal that's all the way to the left and zero in terms of the y is in the middle so if i if i change this also to negative one then the y coordinate is also negative one which should be up here okay so negative one to one horizontally it's negative one to one like that okay so this is what we're gonna do we're gonna say four flappy bird the bird is always in the middle right oh actually i should change this one the bird is always in the middle and what changes is the vertical position right we'll just keep jumping up and down so the vertical is the one i'm just going to add a variable okay so instead of fixing a number let's call it flap oh wait let's say bird y axis and we're going to create this variable up here and i'm going to call it a double and at the beginning let's just make it zero which means it's just in the middle and then what we're going to do is let's add a gesture detector to this to this expanded widget or this animated container let's say gesture detector and on tap so if we if we tap anywhere on this screen we want something to happen so i want to say just call it jump for now which means we can create a method so void jump and just to illustrate how this animated container works what i'm going to do is i'm going to say set state and bird y axis um minus 0.1 okay so take whatever the value of the bird axis bird y axis is right now and we're going to keep subtracting 0.1 every time we tap the screen okay so let's see how that works so yeah so we're going minus actually going the the up direction right we're going up so you can see every time i click we're going to go up now we want to make it so that when you click once it performs a jump right so this is where we have to use a little bit of a little bit of maths okay because the problem is like i said at the beginning of the video um with flappy bird this whole jumping and falling motion we want to make it very smooth right and realistic so if i do something like this right like say let's just copy this guy we're going to later use a timer which you should import oh yeah it's already there so timer dot periodic [Applause] and we're going to say just 100 milliseconds for now and paste that same thing in so if you watch what happens right i put a timer on so it's going to happen automatically every 100 seconds so it's going to go up like that now the problem with that is it's a this is a linear motion right every 100 sec 100 milliseconds you're adjusting the number so if i just change this around just to illustrate it's going to be a very unsmooth unnatural motion let's make this a bit longer like when it falls we don't want it to just fall in a linear way like this because we want to mimic gravity right so with that i'm going to have to use a little bit of mass and put in an equation that involves gravity and yep so i'm just going to jump to that right now okay so i'm just going to quickly show you how i'm going to go about finding this equation that incorporates gravity now if you don't care about any of the math behind this then that's completely fine you can just skip this section and just copy the equation that i code in okay you can just copy my code but for those that are interested then this is great because i always find especially for learning purposes like understanding how the numbers work behind your code can kind of enhance your creativity and you can actually create more things when you understand this stuff secondarily i just think this is really fascinating so um so yeah if you think about like the motion of when when you jump up and down or even better if you like chuck a ball in the air and you watch it it's journey um you'll realize like it's not going up in a linear fashion like it doesn't go up at the same rate and what i mean by that is it doesn't just go up like this and then come down like that what you'll find is it'll start from the bottom and then it will reach a certain maximum height and slow down and then eventually it will just fall and then come back down to the ground okay so this equation is the one that we're after so this is the shape of a parabola whoops so we can get rid of this guy and this equation is the one that we're after that describes this motion okay so to do that there are actually two variables that we need to consider so the first one is so we have these two lines here the first one is the height which i'm just going to call y and the second axis is time so wait that's what we're doing we're calculating the height over time right so how we're going to do this now we want to mimic the feel of gravity right so if you've done any level of math at all um or like any level of calculus then hopefully you should be able to understand what i'm about to show you but if not that's fine i'm just going to quickly go through it so the first thing is we want to consider right the acceleration of our object or like of our bird and the acceleration for all of us just existing on this earth is the same is minus gravity okay so y is the height and the two dots just represents uh two derivatives down from y which is the acceleration of this object and g is just gravity which is just some number and we have a negative there because the gravity is pulling us down okay now if we just do a bit of calculus and we integrate what we have then we will find the velocity and so basically we're integrating with respect to time with respect to t okay and g is just a constant so y with one dot uh representing velocity is going to be minus g t plus some initial velocity which we're just going to call v this v is just basically how strong the jump is and lastly if i just integrate this one more time then we're finally able to find the height okay which is represented just by y so y equals to minus g t squared onto plus v t usually we would add an initial height over here but since um we're just jumping from our starting point for us it's just zero we're just jumping from where we are okay so this is it so this is basically the equation now we can substitute some values in here to so that we can put it into our code so what i mean is we can say something like like let gravity be 9.8 which in reality it roughly is 9.8 and for velocity uh we can find changes velocity later on to fit our screen but maybe let's start with just five like five meters per second which means we can have our final equation that we're going to put into our code so therefore y equals to this is minus g on 2 right and g is 9.8 so minus 4.9 t squared plus 5t okay and this guy here is the equation that we're going to substitute oh sorry that we're going to use in our code okay so the bird is going to follow this motion and basically for every value of t like at each t value that we sub in it'll tell us how high the bird will need to jump okay and that will effectively mimic mimic gravity all right so let's put that into our code okay so let's come back to our code and let's implement that gravity equation that we just derived so currently just to just to remind you if i click it it's just going to go down constantly and at a linear rate okay and so now we have a gravity equation and what i'm going to say is i don't want this to happen we're going to need a few variables right so i'm going to come over here i'm going to say double we need a time variable and we need a height variable and also let's just make a initial height variable as well okay so and also this negative one let's change to zero which just places the bird in the middle there we go okay so what i'm going to do is every time i hit jump first of all i need to know where your initial height is so initial height is equal to bird y axis oops and from the initial height we're going to add and subtract the height after you jump okay so how do we do that well for each frame let's make sure our time is moving forward maybe just 0.1 and this is where i'm going to implement the height um the gravity equation that we derived earlier okay so i'll just type it out and kind of explain as i go so we had y equals to minus 4.9 and it was minus 4.9 t squared right so t times t plus velocity times time so velocity i just chose to be five which we might have to tweak later on um but let's just see what this looks like so at every frame we're going to calculate the height right and each time the time each time you calculate it this actual t value is also going to increase by 0.1 so to set the state let's say bird y axis is equal to the initial height minus the height that we calculated so let's see how this works this might be a little slow because it's every 500 milliseconds and you're gonna come back down yep it's coming back down okay sweet so it's actually working so this is where we can tweak some of these numbers so it's every 500 milliseconds right so maybe change it down to 100 milliseconds let's make this a little bit more precise 0.05 and it went off the screen so the velocity must be too strong i'm going to call it two hey okay so we're getting closer and closer so you can see it kind of jumped up and went down when you go down just because of how gravity works it actually goes faster and faster okay so that's the main thing we need to mimic um i think the gravity could do a bit of a boost let's say 2.8 and let's calculate this every 50 milliseconds okay i think that i think that for now we can tweak these late numbers later on like i said but i think for now that's good enough um yeah maybe if we can make this something like that okay okay now because we didn't put in a stopping condition it just can it's just constantly going down right it's just not stopping the calculation so just constantly going down so let's just try to catch it and say if bird y axis is greater than let's just say zero which is the middle then set state we're going to oh wait i don't think we need to set the state we can just cancel the timer right away so let's see if that works hopefully it just catches itself yep so there we go okay so now what should we do um i want to make it so that when i um click the screen multiple times it just continues jumping now the problem is is when i call this jump function it's going to create a timer [Music] again and again so i don't want to create a timer for each time i jump i just want to have one consistent timer and the jump will change some of these values so what i mean by that i'm going to create a new method called start game and this is where i'm actually going to copy the timer and place it in here and um so initial height is the bird y axis yeah so i'm going to say that up here third y-axis and set state okay so whoops so what i'm going to do is i've got to change that to static i'm going to create a boolean which just means a true or false value and i'm going to say start game or should i say game has started and obviously at the beginning it hasn't started so we'll set it to be false and if i come over here to our gesture detector instead of just constantly always calling jump we're going to execute a bit of code and i'm going to say if game has started then do something otherwise do something else so basically if the game already started oh if the game already started that's when we're going to call the jump function if you haven't started yet then just call the start game function okay so the reason why i need to separate these out is because the start game is the one where i only want this method to execute once because i only want to have one timer throughout the whole app okay and so what i'm going to do here is if i start the game it should just start jumping and well actually you know what let's just test it out see what happens so there should be a lot of issues here okay so the jump is at the start game but if i hit jump again yeah it's not going to do anything so start game we're going to change the game has started boolean to be true since we've already started it and actually when you cancel the timer we'll say game has started to be false okay so once the game has started we're going to execute this create a timer and it's going to do this first single jump and then after that every time i click the screen it's going to execute this jump function and in the jump function all we need to change is we just need to say time equals to zero and your initial height is bird y axis okay so this time is referring to the time in the jump so every time we hit the jump button we want to start a new jump right so we're going to start at zero and the height at which you execute that jump which i'm going to call initial height is just wherever you are currently okay so hopefully that made sense and hopefully this works let's have a go cool so you can see um actually i want to change this back to zero is the middle of the screen so i want to change this to greater than one which is at the bottom of this container so hopefully i can just continue jumping now yay so you can see every time i click i'm just jumping i can probably go off the screen as well but yeah this is basically the mechanic behind flappy bird right now we just need to add some barriers and get the map moving maybe add some high scores and things like that um yeah and then we're good to go cool so we've done the we've done the hard part let's come down over here and let's create some scores okay um let's in the green maybe just change this to a nice brown color in the child let's give it a row um let's create two columns children and let's have two text widgets so text let's say score and under that let's say let's just put a dummy score in for now i'm just going to say zero copy this column put it in again and and this side let's put best or let's say yeah let's just call it best for best score put in like 10. okay let's see what that looks like okay so we're squished over here which means format the document let's say main axis alignment i want this to be in the middle and i'm just going to copy this guy and do it the same in the columns all right cool um comma comma format the document let's put a little sized box so that there's a bit of a gap height maybe 20. yep that's good let's copy that over here as well let's make these white so style text style and over here for the score let's make it colors.white and the size like 20 or 15 maybe 20. and let's give the same size for the best but for the actual scores to make it look nice we can change this to like 35 make the numbers a bit bigger yep like that and actually the s for the row the main axis alignment let's just say space evenly i think that will look better okay sweet okay we're getting there slowly now um just gonna add a quick container over here put a height of like 15 color green okay sweet so we can have our little flappy bird now now it doesn't look like we're moving at all like we're just jumping up and down but we want the map to essentially move for us right so this is where we're gonna have to include some barriers okay so what i'm going to do is let's create a new file let's call it barriers dot dot import the material and let's create a stateless widget called my barrier and basically for the barrier um let's make a constructor so i'm going to say final um i'm going to use the word size create your constructor so my barrier this dot size which means we can pass through a size that we choose every time we create this mybarrier object and for the container i want to fix the width to be say 100 and the size wait the height of this let's just put in size also let's make this a bit prettier so decoration box decoration put the color in i want the box to be or the barrier to be green and let's just see how that looks so far okay so i'm gonna have to make a stack so whereas it's an animated container and let's grab this gesture detector and i'm gonna make a widget called stack and basically what stack does is as the name suggests it just stacks widgets on top of each other so put the bird back in and also underneath that let's say container and in the container i just want to say a little text widget and i want to say tap to play oops sorry um for the alignment i'm going to say 0 for the x-axis which is right in the middle and for the y-axis let's say minus 0.5 see what that looks like okay cool so there it is i think it can go a bit lower maybe 0.2 two point five or three yep i like that um i think we can make this a teeny bit bigger style textile font size say 30. oops okay so oh that's a bit too big maybe 20. okay so we have tap to play let's change this to white okay now once i tap the screen that is going to trigger that is going to trigger the start game since our game hasn't started and once that happens it changes the boolean this game has started bullying to be true right and after that so this text here i'm going to say depending on game has started i want to put in the text as nothing and otherwise put in tap to play so hopefully once i tap it it goes away yep good so that's a good way to make it kind of enticing for the user to play the game right so you have this screen at the beginning tap to play and it's just floating and then we can start clicking and playing okay cool now one of the last things i need to add now is the barriers right so actually we already made that here and now that we have a stack this is where we can start to put in our barriers so um so now we need to uh we made our barriers files here right and so um let's bring that in here now so at the bottom of the container let's say my barrier okay and make sure it's the barrier file is imported um in the my barrier the only parameter we need to decide is the size right let's make it 200 for now and see what that looks like okay it says type integer is notice is not a subtype of double oh just put a point zero it wants a double cool okay so there's my barrier now i want to be able to position this wherever i want right so this is where the alignment comes in handy so we can make a container but i'm just going to make an animated container because that's what we're going to need later on for the barriers to move and in here we're going to specify a duration say just 0 duration is basically how long you want this animation to occur and i just wanna i just want it to happen immediately and we can also put in an alignment property so alignment let's just say zero and 0.3 let's just see if that looks right okay so now you're there i think it's good to say just one because that will just stick it right on the bottom okay perfect now i want to make this a bit prettier let's come back over here i'm going to add a border so in the decoration we have the color to be green there should be a border yep border [Music] and let's say border dot all border border.all is what i'm going to put in here width is 15 or maybe just 10. color is the same green but maybe darker is there another one need to do no the last one style which i don't need to do let's see if this changes it okay so we have a border there and also uh i really like this um radius property you can change the radius of the border makes it a bit more rounder yeah like that maybe 15 okay cool and the alignment this one let's just make it 1.1 the reason why i make it 1.1 is i just want the edge border to go down a bit okay yeah i like that look better okay so we're getting a bit closer and closer so with the barriers i'm just going to create just a random map like a really small one and i'm just going to cycle through it like i'm going to put it on a loop okay so let's say animated container create another one but let's make it minus 1.1 so this would be the same thing but it would be above here yep and let's just create a couple more change this to be 150 maybe 250 make it higher and change this to be minus or 0.5 0.5 and this one is minus 1 one okay let's see how that looks okay so you can see like we have a a few barriers and just to illustrate the main point that i need to show you on how to get this to move is we don't want the we don't want the y-axis to move we just want the x-axis to move right so in the first container let's call this a variable which we haven't made yet um let's call it barrier one barrier x one so the x value for the first barrier and this one i'm gonna call barrier x2 barry x2 okay so we can come to the top and let's create these things so double barrier x two equals to one and barrier x one is equal to zero oops and basically every frame here yep so once we start the game every 60 milliseconds we are changing the frame so here let's just pop in barrier x2 oh sorry barrier x1 plus 0.01 that should make it move pretty slow so barrier x2 plus equals to 0.01 as well yep and copy these guys you should actually put them in the set state over here because we wanted to rebuild the widget all right now let's just test if this barriers are going to move oh whoops i made it go the wrong way yeah let's change that so over here you want to say minus minus it was going pretty slow so i think we can speed it up to like i don't know five times what it was so tap to play and yay our map is like moving now okay so what you want to do right you want to make it so that as the first barrier exits the screen we can increment a score and then change its location back to the the right hand side so it has a constant loop um so obviously the complexity of the map is up to you like how much you want to just customize it but i'm think i'm thinking maybe three of these different barriers is what i'm just gonna show you in this video and then you guys can make whatever you want um so let's do this so i'm gonna say barrier barrier x2 is just barrier x1 plus 2. change this to static i think that will make this one a bit further away yeah like that maybe that's a bit too far maybe just 1.5 yep um the other thing is i don't really want this to start at zero so i want this to start at one or maybe maybe we can just even put it off the screen no let's just start like that so yeah we can just start whoops and then we can just play like this okay sweet um we're almost there now just couple things before i wrap up the video let's get this thing to loop loop and cycle through okay so let's go to the barriers and i'm going to put in a condition so instead of constantly just moving to the left i want to say if um actually let's do this outside of this state method so if barry is one or is it barrier one if barrier one is gray is smaller than minus 1.1 so -1 is at the edge so minus 1.1 is maybe a little bit off the edge if you're smaller than that so if you're more if you're on the left-hand side of that value then then let's make barrier x1 equal to um plus two otherwise barrier x 1 is minus equals to 0.05 okay so hopefully it makes sense what i'm doing so basically i'm saying if the barrier is com is very on the left hand side like off the screen then let's add two which will make it jump all the way back here actually i might need to add more than two because it's minus one to two two is just a full screen so i might have to add like 2.2 or something and otherwise if that's not the case just continue moving left so i'm going to set state put that in there and let's do the same thing for barrier two barrier two all right let's see how that turns out one thing about the barriers that we should we need to actually fix is the stack it treats it from bottom to top like the the one on the very bottom of the stack when we list it out is the one that is most um on the top from what we see so what i mean by that is because i've got these barriers like below the other guys it makes it so that i can't tap it so right now when it says tap to play it's only looking for the blue part because that's the only part that i put the gesture detector on so that's why it's not working here but if i click there it starts to work now i don't want that to happen so i'm going to take this gesture detector i'm just going to grab this logic get rid of this gesture detector and instead put the gesture detector on just the scaffold itself which is this whole thing um so yeah this is a pretty neat trick gesture detector put in the untapped and i think everything should still work fine and i should be able to tap this okay there we go you can see that it works now okay so let's see how the barriers look when they are looping can you see on the left how it's maybe looping a bit too soon like it's exiting the screen a bit too quickly so that means we can just change these numbers a bit and say if the barrier 1 is less than -2 and less than -2 then we can add a bit of a bigger number so this video is becoming a bit long so i just went ahead and added a couple functions like this show dialogue and just updating the scores and fine tuning some of the barriers which i've done i've done this high score something similar in a lot of my other videos so i'm just gonna skip that part if you want to check my the full code to this of course it's in the link in the description so you guys can just check it out there but hopefully you just understood the main like the main idea on how to get this to jump everything around it i think it's probably good for you guys to try to try to add that stuff in but this is what i ended up with so just the flappy bird game looks like the holes between the berries i made them a little bit bigger so yeah and then if you hit the barrier then you're gonna die so the score is one so we want this best like the highest score to update and we'll just continue okay so um yeah i'm just going to wrap it up i'm just going to leave it at that for this video so thanks for watching guys and if you have any questions just leave it below i'll try to get around to them and also if you have any other suggestions for other games you want to see or just any apps in general you can just let me know as well cool so just follow me on instagram you know i put my daily updates on there and other than that like i said thanks for watching and i'll catch you guys in the next one bye

Channel: Mitch Koko

Views: 50,998

Keywords: flappybird, flappy bird, flutter, createdbykoko, mitchkoko

Id: vgmVPpFP0fI

Length: 51min 59sec (3119 seconds)

Published: Tue Sep 08 2020

Reddit Comments

[u/kali876]

Awesome! Thanks for sharing :D subscribed! I love quality content!

[u/bawaaal]

Good one

[u/thkp_jon]

This is awesome!

[u/5h4d0w85]

Flutter Bird...

[u/nikgeo25]

How efficient would flutter be for games though?

[u/eliDans]

Great

[u/shahmeerahmad1435]

Awesome

[u/Rift3000]

I am trying to build something similar to this. Can anyone tell me how to detect collisions in a Stack? For example when the bird hits a column.

[u/ifndefx]

This is great and unique compared to other flutter tuts.