Pi in the Sky Game using Flutter and Flame (Flutter Game Developement)

foreign [Music] guys um welcome to this video so in today's video we're working on the game a 2d game using flutter and Flame um so this video this game this story is inspired by um by the coding train based on the game he made called Pie in the Sky which he made on Pi Day last year 2022 yeah uh so if you're watching this on March 14th happy Friday if you're not watching this on March 14th well happy regular day that's my point uh so uh let's let's get started let's get started all right so the game looks um something like this where you know you can see the pies dropping from the sky and use the plate to catch them so the catch is you have to catch the pie in the in this sequence like an order so like the the number Pi 3.1415 something I really do not know the rest so now I already picked a a one now you can see to the top left you see 3.1 now to the top right you see four one so what I need to get now it's a four and then after I fall I need to get a one so let's look for a four that's a four and that's a one you can see it's updating 3.141 now I need the five uh effect I think it's a five and now after five I need a nine uh ninth name I think nines are difficult to find okay that's oh there's too many okay that means a three nine so after the nine I can get her two after the two I can get this six uh okay please I I think that's all for that's all for me so uh so the game goes on till you get the full number of pipes and when you get the phone number if you can I guess you win the game so let's let's start building foreign so to start building I already created a new projects you can see uh it's basically the demo a flutter app I added Flame I added flame uh plugin so uh popsic.cmo also I already have some assets uh you can see I say it's I have a in assets slash images I have the sky PNG depletes the PNG then I have a folder called pies so this assets were created by the coding train I didn't create them so all credits goes to the coding training for the for the beautiful assets and you can see the pies we have from zero to nine blue color from zero to nine then we have orange color runs from zero to nine we have pink from zero to nine we have a yellow from zero to nine so we have four colors for nine ten numbers zero to nine so now to start um I I think we should probably run what we have first Mac OS uh so to start with we definitely need to clean up the default code that comes with uh with a new project in flutter and let's create a new files called Pi in the sky game oh that's a very long name and um you create a class I and the sky oh the sky game and of course it's going to extend the flame game okay and um here we can take this Pie in the Sky game okay here let's clear up this code uh we need some we need to have a a game which it's game widgets and you can have this in here yep so uh now we can continue our code let's try it around this and see if we get anything on the screen up we just we basically just get the blacks the blank screen and um next thing I need to implement the unload okay um [Music] actually it should be easily on the load where can I find that foreign [Music] class uh we can go ahead and create the first thing which is definitely going to be our background um so let's create a new file let's call it back grounds so background.darts and paint to be class background [Music] extends Sprites components asking riff I and the sky game that's a pretty long name okay um of course so here we also need to implement the onward I think I will just copy the code right here and put here so we need to implement the unload and to do this we'll need to do uh okay we need to load the image into the Sprites Sprite image so uh let's see final image this goes to our weights yep Flame dots images let's load and the name is Sky .png so yeah let's run okay we need to add the background into the unlock so let's have a Act background so add the background to the game so ever run this uh let's say shoes okay I think we need to set the size of the image of our Sprites uh so gameriff that size aha now we have a sky well our Sky though um the next thing will probably to work on let's say the plates for example so we work on the plates the movements of the plates uh so of course we're going to create a new class for that also let's call it plates and also the same thing plates uh let's see extends Sprites components yep also we need the same unload I think I'll probably I'm not really sure why I understood is not suggesting we unload function for me so I'll have to keep doing some sort of copy and paste from them from the classes so yeah um as as game ref Pi in the sky game and then actually with this you should just probably use a position components because we want our plate to move around and here we're going to have the exact same thing as the background when Singleton image I have a size so I'll just okay uh this time around it's plates that's PNG click the PNG our size should probably be vector two 80 the width and then the lengths as the Y let's make it as 15. and um uh okay right since we're using it positioned component a position components we can't have uh it can seem to have a spirit here okay let's have a position though like in fact that's also we can probably add the Sprites so at all oops Sprites oh yeah Sprite components surprise components Sprites Sprites and size also size size so we're using the size here the Sprite components so uh let's run this and see if our plate is not in the screen I think that's because we are positioning is wrongly let's try to position it down okay first middle of the screen that should be camera with that size slash divided by two size this x yes divided by two external in the screen uh the Y same with the size that's why 0.95 huh we can't still find this through oh okay I think I forgot to add it to the game I hope very common mistake um so we need to add the plates here so let's change it to add all Waits so when we reload this yes now we have the plates here uh it's though it's not exactly centered we need to be actually saying that uh for this to work I think we need to subtract this uh half of the side of the plates from the side of the screen so now I think it's really in the middle of the screen okay so that's that's good but now we need to move the place into the new way that when we drag the splits it moves around so I think flame really Slim gives us some some things that we can use to achieve this so in the in the flame game we can add um as Dragon Blues and then the plates the plates we can have um retractable okay I think that should be kids now we kind of have on drag why is otherwise Heidi you know give me exactly what I need drugs starts yep which gives us which drag info tracks start info so all we need to do here we need to set the position to position to actually the position of the of the horizontal components X to the info that's lens position that's uh in that's X minus the size of the of the size of the plates I think that should work and on drug updates we can have it's that same thing foreign tracking around oh nice that works so now you can see when we drag our plates it's actually moves around but it only moves around the you know the x-axis it doesn't go up it doesn't go down just right or left okay okay um all right so now that we have our plates we should create next thing uh the pi so we'll start by creating just one pie on the screen hi uh class I extend [Music] and Sprite components let's ask him ref um playing the sky game okay also we need our own load I can't believe I have to keep copying this code okay okay yeah so unload now of course we need to load an image and so Sprite components so yeah so it's kind of this is tricky parts since we have um if you remember we have a bunch of Pi images here A whole lot of them and um that basically mean that we will need to do some randomization but first we just let's just load just one Pi just one of this we can take this blue eight for example have a price here it's the PNG uh let's add the price uh Pi in the sky gamed class [Music] um foreign Ty 17. we start oh I have something smaller at the top uh top left corner of the screen um no what we need to do is to find the way to randomize both this number and also this color so first let's create a random and here uh crazy High number all right number and also let's make it late and now so let's create a lists list of colors uh we have I think we have a few colors here we have blue we have orange we have pink and we have yellow foreign list of colors uh we have a list of colors we have a we have our image and next thing is to try to randomize this so let's click the three functions because it resets I so all we need to do is in this reset Pi we need to actually do all our random uh randomization uh first of all let's try to randomize the color and the pi and the pi number so uh so high number what's my number next things and someone's from 0 to 9 and then we need to randomize the color string color is equals to colors [Music] random bits next Kings there are four colors so um now that we have this how now we need to kind of overwrite this here with the image so I think what we need to do here we need to have a rates leads image let's call it image it's image image I think it's on the darts here I I hope or not actually I don't think we need this I think all we need to do is use the pi number okay I think we actually need this so let's get it back uh oh we should do here should be image because let's mix this sync I'll do let's do this so we can Thai blooms override this with the color and then override this Roots but by number which I think that should work and then call the reset price somewhere here and let's try that if it's really not working okay let's set this right to the new image foreign I guess we can kind of just bleach that for now let's try to randomize the position of the pie in the screen we'll come back to the images later um position it's close to random foreign that's size that's X and it says that's X okay okay I think I'm not calling this method here oh better and I'm better uh something is wrong okay oh zero message here and that's better access game randomized position what um something around something so we're going to position the starting position should be somewhere at the top of the screen actually should be way above the screen so I think I'll make that minus 500 so yeah it's okay so now the pie is actually uh spawning somewhere at the top of the screen now we just need to make it fall and to do this let's have a variable let's call it let's call it a Double C velocity and we can assign maybe 150 to this once this are some 150 for now and updates still not sure okay let me check the right methods okay it's here velocity times 3T and then let's try this okay now it's the play is literally falling from the and Yep this is good this is really good uh let's try something else let's try this in a way that once the pipe Falls once it falls down from the screen you should go back and restart again should basically respond and start over so we'll do this position that's why let's begin with what size does y plus the size of the the pi itself um the height of the pie itself then here will be set so let's watch what happens random pink three pie crops and another one should probably fall uh so yeah and that one is zero I'm not sure the color I don't want you to fall again let's make this more interesting let's randomize the velocity also uh so they don't all have the same speed foreign [Music] between 150 and let's say three on let's say 258 actually so let's make this to 50 and 150 close so now we have this very fast one there and then not so fast a very slow one so now we have a we have our PI I think we have our pie now it's really starting to look very good so what the next thing to do is probably hard let's probably add more pies so we need to add a we need to add more pies to our our game here I'll I'll use a loop inside Let's cross to zero minus less than pain please don't equal to 10. I plus plus so here we should probably have the role of Pi dropping from different position at different speed at all times okay uh yeah so I think this is good this is this is starting to look really good the next thing we can do is to add a collision Collision detector protection to the game so to add the Collision detection to the game we need to use a as let's add as a position detection to the came to the pike himself playing the sky game itself and then we need to have so we need to decide what our works is colliding right so first of all we need to detects the collision between the pi and the plates right could that be said this since the price on this printed plates down okay this uh so now we use the calculation using the pi and the plates so for this to happen we need to add a hitbox rectangle its box to the plates to rectangle its box from the edited plates uh and then and the pi we definitely need to do this exact same thing I should be a circle Circle it works let's add the videos um and also here we should have a Collision callbacks Collision call works so now here we can have on collision stats on collision stats yes and here what we need to do is to check if the Spy if the Spy is actually colliding with a plate because we don't want to we don't want to do anything if it's colliding with let's say the screen for example it has to be the plate so here you can have if other is plates so if other is split what do we want to do foreign States what do we want to do let's just have a pranks right let's just have a prince for now let's see collided and let's see so let's see you can see collided right here in the console so that means the Collision detector is working and now here from here we can build on to checking if uh if we are touching the right value or if we're not touching the right value and stuff like that so uh next it will definitely be to work on the two the two texts that are supposed to be okay so one is going to be on the left side and the other one's going to be on the right side uh the one on the left is going to be the current Pi score that you have and the one on the right is right the next Pi values that you should aim to get all right so first we need you should work on this score um which is which is the one on the top left so let's do this score the darts and of course plus score next things texts components which has skin riff uh I in the sky game and striking late streams score uh of course we need our own load again uh let me just try to write the story around future for it on your face sync okay and then return super good Okay so by default our score should be zero right and then let's kind of print that it texts let's see the position should be somewhere at it top left corner of the screen so let's see Victor two but all 20. so 20 x 20 y that should give us somebody top left of top is gonna connect our screen and then click the texts the text now let's do Pike so let's import the math what am I typing I to string yes uh yeah this is good this is good this is good uh but then we need to render the text so foreign foreign Style no text style C font size is giving 40 because it's pretty big color color is the black and surrender address that takes the position textile can be assigned to text Style so this will be it what's going on here foreign is going crazy here because this is not supposed to be an error is it textile I'm using a textile uh let's just kind of run it and see if anything happens yeah the console does not trade any error which I think it's my IDE perhaps I should restart my ID uh give me a second to do that I just restarted my IDE and I'm still getting the exact same thing the code works but uh the the red lines I just did uh so let's add the those cards the name oh wow okay I think I see it now now I'm getting the error where's the score it says to UI okay I think I should import material oh yes that was a problem the button starts UI um so now I have this here oh think it's probably shift it up a bit small so 15 that's probably better okay that's it for this call now let's have a the next pi value that's called that let's go to the next five fairly oh right I did make a mistake there foreign should probably use the exact same thing we have here extend uh actually I'll just kind of copy this Imports all the import tables uh yeah so now the difference would definitely be around X should be size game ref the size of x minus 15. and then the Y should probably be 15. and the color here should be green okay so dark uh let's have this in our game foreign something is wrong something is wrong this is so weird shows here let's try 100 then what is the size that's X let's just add good songs for now we figure out what's this green one very soon okay now we have school let's have a next value next value um foreign [Music] [Music] score foreign so the next next value will be before two inch dots cars dot texts change zero and one foreign figure out what's wrong with the positioning came with size that's it's minus C let's change this to otsu and zero oh great I think we should apply the same thing here yes so the question is now better than before and we have our our score which is all done okay now wins at the updates um this is exactly what we need I believe score oh I'm in the wrong file yeah I'm giving five that will be further updates here and then take such something here for the score itself it's going to be to plus core zero so we have three points we have one we have a four uh now let's go to a pie game again let's kind of make these things meets core means next pi value next pi value and then score is cost of this final is close to this then up here now the next one is to actually make sure this current updates as it's supposed to and today that's going to go back to the pi the Collision uh to Collision detection and the pi which is on collision starts and now we need to check a few things if check if they um the pi number is equals to the next pi value which means that the pile number we deleted here if it's equal to this next pi value which is here which is supposed to be 1 in this example in this in this uh in this scenario one uh so if it's if the pi number and the next pi value is the same then we want to increment the score with not pass the next pi value and score here okay uh weights core cool final next required call and here we can have required thanks everybody next to play value then we can set the score of course here to be car confirm I'm doing nothing next I'm not sure why my ID is not automatically feeling of these things okay so here we can now oh let's go back to the play game there is an error there yep score the score on the next five value next time okay good so now you can check if the next pie value that's next five next value is equals to Pi number we can print uh correct and else trains say rung so let's try this so we need a one first you can see once you touch something else that is not once wrong another one this is correct you could touch one against this correct and let's see if we can get another one correct nice uh so I think it's working just fine now we just need to increment the value um score that's scores point also next foreign here so once uh once we touch the correct the correct pile I wanted to go back and restart its life cycle that is why I added a reset Python so let's look for one so is it one see it's going back up to restart its life cycle and let's say four exactly what we need uh we need another one it's a one exactly what we need now if we touch the wrong thing instead of just printing wrong we need to kind of have some sort of game over uh so let's see it came with let's pose engine so now we need a one you get one you need to fall if I'm to go for something like this you can see the entire game freezes which is we're pausing the engine so um here typically you can have let's say a model sheets model a model I use it for like a pause menu a pause menu or something like that but I don't think I'll be doing that in this tutorial maybe in the next hopefully uh for now this tutorial I just missed her just for just so people can see how you can achieve something like this so for pause menu and other things you probably see that in like next tutorials oh I think oh yeah my next as well so uh thank you for watching thank you for coming uh I hope to see you again please like And subscribe uh don't forget to share to your friends also thank you and um bye see you later

Channel: JideGuru

Views: 769

Keywords: flutter, fluttergame, flameengine, flutter game developement, flutter games, flutter flame

Id: jpiKsuC5Pv0

Length: 50min 55sec (3055 seconds)

Published: Tue Mar 14 2023