Let's Build Flappy Bird Game in Flutter & Flame - Complete Tutorial

hey do you want to be a game developer well stick around because we are going to build a Flippy Bird game with flutter using the flame engine in just few [Music] minutes the first step is to set up our project and manage assets first of all we will remove the default code that flutter has created as we will be using a flame engine to create this cam therefore we need to add the dependency for that we will go to our PSL file and we will add our dependency with the latest version number now coming back to Orman file inside or man method instead of running my app we will pass the game widget which comes from the plan package and it requires the game instance therefore we will create a variable named game and we will assign it to the Flippy Bird game now let's create our Flippy Bird game widget but first we need to create a game folder inside the LI directory and then we will create the flippy board gam do do file here we will create a flippy but game class which will extends the flame game which is the recommended Base Class to be used for most games built with flame with this we are almost done with setting up our project now let's run our app to see how it looks like here you guys can see that the screen is completely black because we are not adding any components which we will do later now the next step is to add and organize our assets in our project that we will use throughout the game there for we will create an SS folder within the root directory and inside we will create images folder and as well as the audio folder inside the images folder we will add all our images that we will use later to write clean and make things easier we will create another file name assets within the game folder and here we will create assets class and inside we will Define paths for each image that we will have in the assets folder well that's pretty much it for assets management but don't forget to add your assets folder within the pops ml file otherwise it will not work next up let's talk about the game design first of all we will plan out the components that we need within the game basic basically within the Flippy Bird game we have the background ground pipes the bird and of course the score display this stage is crucial for setting up the best for or game first of all let's create the components folder inside the Library Tre and here we will add all or game components let's get started with the background first for that we will create a background. do file and here we will create a class background which extends a Sprite component because Sprite components represent a 2D image or a texture that can be displayed and manipulated within the game after that we will create the Constructor now we need to load the background image for that here we will override the online method of type future and inside we will use the flame class to access our images and then we will use the load method to load the specified image with the file name which is assets. background in this case after loading the image we will save it within the background variable now we also need to set the size of this Sprite component but before that we need to add the has gam rep mix to our class to gain access to the game rep property which which allows access to various functionalities and information available within the game context we will use the game ref. size to specify the size of the background and lastly we also need to assign the background image to the Sprite property which will create a new instance of the Sprite and with this we are almost done with adding the background now let's go to the P but game. do file here we will also create the on load method and inside we will use the add method to add the background component to the game after hard reloading here you can see that our background is now loaded within the game now let's also add the ground to our game for that first of all we will create a ground. do file within the components folder and here we will create a class ground and instead of the Sprite component we will extend it with the parallx component because we want the ground to be in a parallx motion same as before we need to load the ground image for that here we will override the onload method of type future and inside we will use the flame class to access our images and then we will use the load method to load the specified image with a file name which is assets. ground in this case after loading the image we will save it within the ground variable as this is a paralex component therefore we need to pass the ground image to the paralex property here we will use a paralex widget where we can add multiple paralex layers right now we only have the ground image therefore we will use the paralex image and we will pass the image as an argument for the fill we will set it to none for now we also need this compony to update itself with respect to game time for that we will make use of the update method which also comes from the plan package and it requires the time Delta which represent one cycle of the game first of all we need to have our game speed therefore we will create a configuration do dot file inside the game folder and inside we will create a class config in this class we will add all the hard values for example game speed so that it's always easy for us in the future to play around with these values we will also add the ground he equals to 110 it will help us later while we are adding other components now coming back to the ground do dot file here inside the update method we will set the parallel. b.x equals to the config do cam speed and with this we're almost done with the ground if we restart our application nothing will happen because we haven't added yet to our game class therefore let's go to the flipp about game do do file and here instead of using the add method for each component we can use the add all method and inside we will add all our components after hard loading here you can see that we have added our ground to the game and it's also animating now it's time to add the bird within our game which brings us to The Next Step ending player for that we will create the bird. do file within the components folder and inside we will create a class bird basically for our bird we will have three different movement stats up when the bird is going upside middle when the bird is idle and down when the bird is falling down therefore let's create a bird movement do do file within the game folder and inside we will create an an bird moment and inside we will add all three stats now coming back to our bir dot dot file here we will extend the class with a Sprite group components because we will be using three dripping Sprites for each state and here we will pass the burn movement inside now same like other components we need to load the bird images but before that we need to add the has cam rep. mixin to gain access to the gam rep property which will help us to load the Sprite as we are extending the class with the Sprite group component now we will override the onload method of type future and inside we will use gam ref. load Sprite method to load the specified image with the file name which is ss. bird midlab in this case after loading the image we will save it within the bird mid flab variable we will also do the same for other two images now we also need to specify the size of the bird therefore we will make use of the size property and assign Vector two which stes two values as there is three different states of the bird therefore we will set the current state of the bird to the bird movement. middle lastly we will assign the Sprites that we have loaded to the Sprite property for that first of all we will check if the state is is bird movement. middle then we will set it to bird mid flare if it is bird movement. up it means that the bird is flying upward then we will set it to bird up FP and if the St is bird movement do down then we will set it to bird down flame with this we are almost done now we just need to add it to our game for that we will go to our Flippy Bird game. do file and here we will create an instance of the bird class which we will initialize that within the on load method after hard loading here you can see that we have added the bird to our game but as you guys can see that the position of the bird is not correct to fix this we will go to bird do do file and here we will also set the position of the bird we want our bird to be in the center of the screen vertically and a little distance from the left side therefore we will use Vector 2 again and we will set X to 50 and for the Y first of all we will get the size of the screen using the gam ref size and then we will divide it by two to get the center point but we also need to subtract the height of the bird itself therefore we will use size - y / 2 to subtract the height of the bird with this now the bird is in a perfect position now moving towards our next step adding obstacles next challenge adding pipes to the game basically the idea is to have the combination of two pipes one on the ground and another upside down so to specify the position of the pipes we will create a pipe position. do file within the game folder and here we will create an enum pipe position and inside we will add both positions top and bottom which we will use later to specify the position of the pipes now it's time to create a model class for the pipe therefore we will create a pipe do do file within the components folder and inside we will create a class pipe which will extend a Sprite component with mix in has gam rep to gain access to the gam property which will help us positioning the pipe sled basically for each pipe you will have two properties height of the pipe which will be dynamic changing every time and the pipe position therefore we will create a variable height of type double and an instance of the pipe position inm that we have created before and then we will mark it required within the Constructor now the next step is to load the pipe images that we have in the SS folder therefore we will make use of the onload method and inside we will use flame Cloud to access our images and then we will use load method to load the specified images with a file name which is ss. pipe in this case after loading the Mage we will save it within the pipe variable we will repeat the same for the rotated pipe and then we will save it within the pipe rotated variable now we also need to set the size of the Sprite component therefore we will use the vector 2 which requires X and Y for the we will set it to 50 and for the height we will assign the height that we have created before because the height of the pipes will always be dynamic now it's time for the logic how we can choose the position of the pipe well for this we will make use of the switch statement based on the pipe position inm if the pipe position is equal to pipe position. top then we want to set the positiony to zero and then we will also need to assign the pipe rotated image to the Sprite property which will create a new instance of this spr component if the pipe position is equal to pipe position. down which means that the pipe Will Go On The Ground then for the positiony first we will access the gam screen height using the gam ref. sizey and then we will subtract the pipe height from the game screen height and finally we will also subtract the ground height that we have defined in the confit class with this we will get the perfect position of the pipe well we are done with the logic building and also the model class now we need to create a combination of the pipes for that we will create another file P group do do file within the components folder and here we will create a CL pipe Group which will extend a position component and it represent an object that can be freely moved around the screen rotated and scaled now we will use the onload method to add our pipes to the game and inside we will use the add all method to add our pipes as the pipe requires to argument position and hide therefore for the first pipe we want it to be upside down so we will pass pipe position the top for the position and for the height let's give it some random height to see how it looks like later on we will make this Dynamic now let's go to the play game class and here within the add all method we will add our pipe Group after hard loading here you can see that we have already added the pipe and it's upside down well we will do the same to add another pipe within the add all method but this time we will pass the pipe position. bottom to set the pipe on the ground and for the height we will give it some random number to see the results after hard loading here you can see that now we have the combination of the pipes in the game now we need to make the pipes moveable from right side to the left side and regenerate it with the dynamic hide and spacing in between for this we will make use of the update method which comes from the plan package and it requires the time Delta which represent one cycle of the game here we will update the position of the pipes by updating position. X first we will access the game speed using config do gam speed and multiply it with the Delta and then we will subtract it from the pipe position with this the pipe should be moving but first we also need to set the initial position of the pipes therefore at the top in the onload method we will set the position of the pipes to the gam rep. size. X but to use the gam WP we need to add the has gam WP mix into our class after hard loing here you can see that the pipes that we have added is now moving from right side to the left side but it's only happening one time which is not correct to fix this we will go to our next step which is gam Loop now it's time for setting up our game Loop so that the pipes keep generating and never gets in to achieve this first of all we will create a variable of type timer which comes from the plan package and it is a simple utility class that helps handling time counting and implementing interval like events therefore we will assign it to the timer and inside we will pass pipe interval specific time that pipe group should be generated after we will create this pipe interval within our configuration file for the sake of the cleaner code after that we will set the repeat plag to true because we want it to repeat itself every time the time is passed now we will use the update method to update the interval according to the game Run time so that we can generate another pipe group now coming back to our on load method here first of all we will access the interv and then we will use the on Tech function which is called repeatedly at fixed interval during the game runs time and we will return our pipe group we also need to remove the pipe group from the add all method after hard reloading here you can see that we have a loop of pipes generating at specific time interval now the pipes are all the same size so let's deal with this to make our game more interesting for that we will go to our pipe group do dot file and here first of all we will create a variable random and set it to random which will help us generate a random number now within the all load method first we want to know the height of the screen without the ground height therefore we will access the gam screen height using the gam rep. size. Y and then we will subtract the ground height which we defined earlier within the config class this represents the available vertical space for elements within the game after that we will save the results within the variable height minus ground next we need to specify the spacing in between the pipes because we don't want the pipes to collide with each other we will set the best spacing of 100 units and and a random value within the quarter of the available space above the ground this will creates a variability in the vertical gaps of the pipes lastly we will compute Center Y which will Define the vertical position of the center between the top and the bottom pipes it sets the center of an element by adding a previously calculated spacing to a random value within the remaining space above the ground providing A variation in a vertical positioning now we have calculated everything it's time to pass the dynamic height to the pipe for the height of the top pipe we will access a center Point Center Y and subtract the half of the spacing this property of the top pipe will ensure that it is positioned above the center y Point by the amount equal to the half of the spacing now for the pipe that is on the ground first we will calculate the height of the bottom pipe based on the available space below the center y point this property determines the height of the bottom pipe positioning it below the center y Point by the amount equal to the half of the spacing and and fills the remaining available space up to the ground level with this after hardly loading here you can see that every every time the pipes are generating we have different highs and also the spacing in between the pipes well we're almost done with the pipes but we don't want the pipes to stack up to affect the game performance when it's out of the screen therefore we will go to the update method and here we will check if the pipe position is list than minus 10 means that it's already been through the boundary of the screen then we will use remove prom parent method to remove it from the screen and to see it removed we will use the print debug method to see it is removed successfully after hard loading here you can see there one the pipe crosses the boundary the statement is printed within the debug console well we have our obstacles ready now it's time to move the player which brings us to The Next Step flare movement now it's time to make our bird fly we will add the logic of the flare movement and interaction making it respond to the user input like tabs to keep the game engaging first of all we want to specify the velocity of the falling of our bird therefore we will go to the configuration file here inside the config class here we will create a bird velocity con and we will set it to two 10 the idea is that the bird will be going down vertically with respect to the gam run time but when we tap on the screen the bird will go up again to achieve this we will go to our BD do dot file and here we will go to our update method inside the update method we will modify the vertical position of the bird using position doy we will update the bird position by adding a product of the bird's velocity and the time pass Delta this will give a smooth and consistent bird animation after hard reloading here you can see that the bird is now falling down and is going outside of the frame now the next thing that we need to add is When We Touch on the screen the bird stop falling down for that we will go to the flampy bir gam do do file and here we will add the mixin tab detector to our class which will provide the functionality to detect tabs or touch events now we will override the on tap method to add the functionality of the bird to fly when we tap on the screen inside we will call the instance of the bird that we have created earlier and then we will access the fly method which we will create within the bird class therefore coming back to or bird do do file and here within the bird class we will create the fly method of type wi inside we will use add method to add FX to the bird inside the add method we will use the move by F class which requires offset and a controller for the upset we will pass Vector two and inside we will set xais to zero because we don't want horizontal movement for the Y AIS we will give it a gravity and we will add it within the config class for the controller we will use the effect controller for the movement effect duration we will set it to 0.2 seconds and for the curve we will give it curves. decelerate which will decelerate over the specified duration then we will make use of the uncomplete method which will be executed after the effect controller and here we will set the current state of the bird to the bird M do down and here the bird image will change after the add method we will set the current state of the bird to the bird movement dot up which will be executed when we tap on the screen with this also the bird image will change creating a beautiful animation after after hard loading here you guys can see that the bird is going downward but when we tap on the screen it Fly upwards which is great and it also have animation due to different stats now we have our bird flying we have the obstacles we have the background and everything looks great now moving toward the next step collisions well collisions can be a game changer the basic idea is to detect collisions between the bird and the pipe triggering the game to the game or scenario to achieve this first of all let's go to the pipe. dot file and here we will use use the add method which add a rectangular headbox to an entity on a gam object and is used for collagen detection in the Gams in this case it will add rectangle headbox around the pipe now let's do the same with the bird for that let's go to the bird. do file and here inside the onload method we will add a circle headbox which will add a circle headbox around the bird with this we have already added the headboxes to the both cam objects but we also need to detect the collisions between these two components for that we will add another mixing Collision call bags which will give us access to detect collisions between two components and then perform any action once we add the Collision call back max in we can override the on collision start method and inside we will use debug print to see if it works but before checking it out we need to enable the collisions in our game class therefore we will go to the P but game. do file and here we will add the mixin has Collision detections which will keep the track of all shape headbox in the component three and initiate Collision detection every day now let's try it out after how loing here you can see that when the bird strikes with the PIP the statement collagen detection is printed within the debug console but we but we don't want the game to continue once the bird collides with the pipe therefore we will create the game or method and inside we will use gam rep. pause engine method to pause the loop execution well let's try it out again so here you guys can see that when the bird strikes with a pipe the game is paused which is exactly what we want it let's try again one more time wait what what if the bird PS down and go below the pipes well we have to take care of that as well to fix this we will go to the ground. do file and here within the onload method we will add rectangular headbox inside and we will also specify the position of the rectangular headbox to make sure that it's on the surface of the ground and we will also give it a size so it happens all over the ground which is available on the screen now let's try it out again here you can see that when the bird collide with the ground our game engine is paused yay we fixed it but right now it looks quite boring because we don't have any game or text or button to restart the game which brings us to The Next Step overlays now let's work on the game's interface basically we will have to overlays one main menu screen which will be visible with the game is started and the game work which will display a final score and allow our players to restart the game first off let's start with the main menu screen for that we will create the screens folder within the lab directory and inside we will create main menu screen do do file here we will create a class men menu screen which extends a stess widget and it will return a scale aold widget for each overlay we should always have a unique ID therefore we will also Define the ID for our main menu screen we will also create an instance of the flippy board game which we will use later when starting the game before returning the scaffold we should always make sure that the game is paused because right now when we have reload our game it is automatically started so to fix this we will use game. pause engine method to stop the engine at first then we will return a container vdet to the body of the scaffold and then we will give the container maximum width and height using the double do Infinity to fill up all the available space basically we want the background of the container to be an image that we have within the our assets folder therefore we will use the decoration property and assign the Box decoration then for the image we will pass the decoration image and then provide the image part to the image property which we already have defined within the assets file after that we will also set the fit to the box fit. cover to make sure that it fits all the available space to see the results we need to do a little changes within our main file therefore we will will go to our M file after running and passing our game within the game widget we will add overlay Builder map which takes a collection of widgets that can be displayed over the game surface therefore first of all we will add the key which is main menu in this case and for the value we will return main menu screen and as it requires the game therefore we will also pass it to the required parameter we will also initialize the initial active overlays property to the main screen. ID ensuring that our initial overlay is always our main menu with this when we start our application here you can see that our main menu is appeared before the game start now coming back to our main menu file we will add another image that we have in our SS folder as a child of the container widget to make sure that the main menu looks perfect after hard loading here you can see that we have the perfect main menu but when we tap on the screen we are supposed to start the game but nothing happens here to fix it we will wrap the container widget with adjuster detector and inside the on T function first of all we will remove the overlay using game. overlays do remove method method which requires the ID of the overlay in this case we want to remove the main menu overlay and want to start the game therefore we will pass the main menu ID and after that we will use resume engine method to actually start the game well let's see if it's working or not after hard reloading here you can see that we have the main menu of the game when we tap on the screen the game is starting and we are ready for the action seems cool isn't it but when the bird strikes the pipe or the ground the game screen just hang up which is quite boring to fix it we will create game or screen within the screen folder this screen will basically use to display the final score and a button which will allow the players to restart the game here we will create a class game over screen which will extend a stess widget and it will return a material same as the main menu screen we will also give it a const ID which will be used while reing to this overlay after that we will create an instance of the flippy board game and we will mark it required within the Constructor now the idea here is to show the gam text and a button from where we can restart the gam first of all we we will give material a background color after that we will pass a centered column which is to the child of the material and then we will add an image that we have in our SS folder to see the results we need to add this overlay within our main method there let's go to the main file and here inside the overlay Builder map we will add the key game over and then for the value it will return the game over screen and we will pass the game instance to the required parameter now let's go to the bir do do file here within the game or method we will use gam ref. or. add and then we will pass the ID of the overlay which is came over in this case with this we are pretty much done let's hard reload our app to see the changes here you can see that when the bird collide with the pipe our game or screen is appeared and we have our game or image displayed now below the image we need to add a button which player can press to restart the game therefore let's go to the game over screen within the column widget after the image we will add an elevated button with the oness function and now text restart we will also give it a custom text stle to match the game theme when we press on the the elevated button we want to restart the game therefore we will pass the on restart method to the on pressed function and inside the on restart method first of all we will reset the position of the bird therefore we will go to the bird do dot file and here we will create a reset method and inside we will reset the position of the bird to the initial position now coming back to our game or screen within the on restart method we will use the game instance to access the game bird and call the recent method to reset the bird position after that we will use the gam overlay. remove to remove the game overlay to see the screen and finally we'll resume the game using the game. resume engine now let's see if it's working fine after hard loading here you can see that when the bird strikes with the pipe we have our game or L screen and when we tap on the elevated button our game is resumed and our bird is also repositioned but we have a little problem with the pipes the pipes are still here and the bird will collide with it again and again to fix this we will go to our FL Bird game do do file and here we will create a bu is hit and we will say set it to false initially now let's go to the bir do dot file and here within the game or method we will set the is head bull to true because the game is already over then we need to go to the pipe group. do file and here within the update method we will check if the game rep. is hit is true then we will remove the pipe grp from the screen using remove prom parent method and lastly we will set the is head to false again with this we're all set now let's try it out again after hard loading here you can see that when the bird strik with the pipe we have or or L screen and when we tap on the elevated button our game is resumed and the pipe group is also removed from the screen cool but still we cannot decide who have the high score in the game which is also essential therefore moving to our next step scoring score tracking is also essential we will Implement a scoring system that increments every time the bird successfully passes through a set of pipes first of all we will go to the Playard game. file and here we will create a text component score but we will mark it late because we will initialize it later then within the add all method we will initialize the score to the build score method which we will create here and it will return a text component for the text we will give it score equals to zero as we also need to set this text on the center therefore we will use a vector two and give it a custom position we will also set the anchor to the Anchor do Center and after hard loading here you can see that we have our score text but the default text doesn't seem so interesting therefore we will go to the phone folder inside our folder and here we will add a game phone we will also Define the path and family for the phont within our ppsl file now let's get back to the flip game. do file and here within the build score method we can also give this text or custom style for that we will use the text render and assign the text pad to access the style property and then we will pause the text style and inside we will give it a font size font weight and also a font family and with this here you can see that now it looks like more like a game font but it's not changing the score the bird passes the pipe to fix this we will go to bird. do file and here we will create an integer score and initially we will set it to zero then we will go to the pipe group. do file and here within the update method when we remove the pipe from the screen when it passes the bird we will call the update score method which we will create here and inside we will increment the bird score with one every time it passes the pipe we are not done yet let's go to the play bir game do do file and here within the update method we will update the score text every time when the bird crosses the pile and with this here you can see that it's working fine we also want to show the score within the game is over for that we will go to the game over screen and here we will add a text widget within the column widget and inside we will access the score of the bird that we have with a custom text style and font family after hard loading here you can see that when the bird passes the pipe our score is incremented and when the bird collide with the pipes we still have our score on our game over screen we also want to set it to zero once the game is restarted therefore we will go to the do. file and here within the reset method we will set the score equals to zero and here you can see that once we click on the restart button our score will be lost now it looks like a real challenging game but still we are missing something and to add those we will go to our next step sound effects basically sound effects will add life to our game we will incorporate audio elements for our B moment collisions and scoring using the flame audio capability as we already have created the audio folder within the SS folder we will simply add all our sound effects and then we will also Define it within our FML file we also need to add the parts of these sound effects within the SS folder so that it's always easy to use anywhere in the game to use sound effects within the flame engine we have to add another dependency to our Pol file which is known as a flame audio with the latest version number now we are all set the first sound effect that we should add is when we tap on the screen and the bird fly and it is a flying sound effect therefore we will go to the bird do do file and here within the fly method we will use use flame audio. playay method with a file name which is assets start flying in this case to add the sound effect let's test it out here you can see that when we tape on the screen the bird flies and make the sound effect cool now let's add the Collision sound effect for that we will go to our game or method and same as before we will use the flame audio. flame method with a file name which is assets. Collision in this case let's see if it's working fine here you can see that when the bird touches the pipe the Collision sound effect is played next we need to add the sound effect for our schooling for this we will we go to our pip group. file and here within the update score method we will use the flame audio. flame method with a file name which is ss. point in this case and here we go when the bird crosses the PIP you're are having a score sound effect also perfect well with adding these amazing sound effects we are almost done with our G but before wrapping this video let's try it once again to see if everything is working great wa what if the bird flies over the pipe we can score as much as we want well not anymore to fix this we will go to orbit do dot file and here we within the update method we will check if the bird vertical position is less than one means that the bird is going outside of the frame then we will simply call the Camp over method let's try it out again and here you can see that when we try to go above the PIP the game's over which is great well I hope you have enjoyed this amazing walkthrough video about creating flippy board game in flutter using the flame engine it's an exciting glimpse into the game development with flutter and also if you're looking to create apps website or backend server in flutter then have flut got you Cod because we have 7 years of experience and created multiple applications and [Music] website just visit hl.com and fill in the information to get started

Channel: HeyFlutter․com

Views: 19,753

Keywords: Flutter Game Development, Flame Engine Tutorial, Flappy Bird Flutter, Game Dev Tutorial, Flutter Programming, Mobile Game Development, Flutter Game Design, Flame Engine Game, Coding Tutorial, Flutter Tutorial, Game Development Tips, Flutter App Tutorial, Flutter Beginner, Flutter Game Design Tutorial, Flutter Framework, Flame Engine Dev, Flame Engine GameDev, Mobile App Development

Id: zcs8qRBRz7w

Length: 31min 45sec (1905 seconds)

Published: Sat Dec 02 2023