Building Game with Flutter using Flame engine | Pair programming with authors of Flame

[Music] hello and welcome to another session of flutter original this week we're going to talk about gaming in flutter with flame one of the most famous uh flutter gaming engine that is out there and i have two amazing authors with me the authors of this package or maintainers of flutter flame package or plugin so i'm going to welcome them and let them introduce themselves so hello every and one all right thank you thank you for inviting us to this i'm eric i have been working on flaming uh for almost two or three years i think hey and yeah that's it's very excited to to do some gaming with you on this section yeah thank you so much for inviting us uh i'm luan i'm the original creator of flame and i've been working with eric and many many other people for a long time on this project very glad to be here well that's that's very cool that's very cool um so luan maybe a question for you why have you started this project at all are you like kind of into game development or something like that and then tell us the story a bit that that's a great question uh i'm definitely into game development uh i never like worked professionally uh in making games but since i was a kid actually what got me into programming one of the things was making games right so i've always been you know using stuff out there to make nothing huge but i just always liked it and whenever i start a new thing i like to see if i can make games with it and i remember you know back when flutter was starting to get traction i think like three years ago when we started i don't remember exactly how long ago so my mentor at the time told me you know look at it it's like flutter it's a nice new thing it's going to be big like you should investigate and i started learning and i thought well maybe i should make a game of it to see how it goes but turns out that back then like i couldn't find any game engines for flutter but i started to look at the flutter code and i realized that flutter was kind of ideal for making games like it already gave you a lot of what you needed out of the box so i started making a very simple game and everything that i that i saw that i could be like a helper that could be extracted i start putting into this package that i call flame and like it started with a simple collection of a few methods that will help you out you know but then it kind of blew up and it got really famous and a lot of people start to help and now it's a fully flat engine with everything that you need that's perfect so there there is actually it says on the website flame is a 2d game engine so if you want to just uh tell us a little bit because i am not into game development at all so i have very little knowledge about it i understand 2d and 3d and stuff like that but if you want to just mention like why 2d why not 3d and what is the limitation and what is even 2d compared to 3d and things like that a little bit that's also a good question because it doesn't mean that you can't do 3d basically what it means is we use what flutter exposes to us which is the canvas and the canvas is basically an api where you can make very low level like gpu calls to draw stuff and if you think about it everything is 2d right your monitor is 2d so in the end you're always rendering a 2d image so technically that's all you need however when you do 3d you basically have a 3d world and then you have a camera and you kind of render a section of that world that's a 2d surface right you have to project the world and normally any actual like 3d engine the way that works is it delegates all that to the gpu by using low-level 3d calls so you don't need to actually do all the hard math of making 3d in your game like that's all done by the gpu and the canvas api does not support those advanced 3d functions so flutter doesn't give us access to do like a real 3d in a sense that be fast and performant in using the full capabilities of the gpu what you could do is do everything like in the cpu and like compute it yourself right so you like get the 3d world and see your angle and so people uh eric can talk more about that have done some really nice like 3d like things but it's definitely not ideal for like a full 3d game it would be more suited for something smaller or a 2d like top-down or platformer okay so when if you want to start like now developing a game with flutter should we know a lot of things uh from game development world or even without limited knowledge as i do have limited knowledge so it's okay so we can just jump in and just quickly start building the game so how is the learning curve we try to design flame to be really easy to learn even for people that don't don't have any game development background and what i think is nice about flame is that you can learn a little bit like the car concept like the game loop and you don't need to use anything that you don't want it's very modular right so you can start very slowly and kind of teach yourself as you go along the things you will need with flames so i think some basic darts experience because just that that's the language you don't really need to know a lot about flutter actually because you don't need to use like the widgets unless you want to add like menus or other parts of your app and i don't think you need to know a lot of game development because you can kind of start from scratch and learn your way with flame that's interesting so i bet that this project now is as you said is pretty famous and pretty popular so you got a lot of contributors to the project i think one of the contributors or maybe one of the main contributors or authors right there right now is eric right how did you how did you eric how did you come across this project and you know started contributing what are you doing at the moment for the project yeah so basically i i met lua personally we worked together a couple of years ago and i was already doing gaming development at that time but at at that point i wasn't tired about flutter yet so i was doing game development if javascript html5 and things like that and i started to work together with lua and research talk he mentioned that he was doing a game engine and we both have interest in gaming development so we start to do games together and eventually i got into contributing to flame and help and make a lot of contributions right that's that's fantastic so as of now i've checked the pop.dev and i see that you already you are not even in version one but i see there is a release candidate and quite far actually 15 or 16 was something in release candidates so you're gonna actually release version one you wanna tell us like what will be the main difference between the current version and merging one what are you bringing for us and everything that you should tell us about this package v1 is taking a long time longer than we expected but that's because we basically we did all the the the way that the flame components work so v1 will be very very different from the the the previous i think you are on the twenty nine five something like that and yeah we have many many more features like it's way more flexible than we originally uh developed uh we have many more types of components that we can add to our game and they work in a more flexible way like so yeah to build very very different from from the previous releases but the current release candidate is probably very close to what we want from you one that's very good so then today we're gonna pair a program together and we're going to build um a game right so i have a coffee app which is very famous and i will show you shortly so we're gonna we're gonna build uh some small games that you can show me how we can work this flame and we can implement that together so do you recommend that we start using version one release candidate right instead of like okay that's that's very good and another question is that or maybe my last question before we jump into pair programming is uh regarding the platform supports so i know that you support already android and ios out of the box but how about the other platform or do you have a plan to support desktop or maybe web or something like that we support uh both mobiles like like i mentioned and webview works very well already we even have examples running online that we can access and test with many small examples of our features uh desktop you will also support but you know it's a little more unstable than on mobile and web but we do a lot of tests and and and it's working i mean quite well but it there is always this bug that we don't know if it's on flame side that's come from flutter side but the plan is hard to should work everywhere that flutter works because we are it's built on top of flutter it's all using flutter so the only thing that will not work out the box is if you're on audio that's a separate plugin called flame audio and that has native code that has to be ported so we have it for mobile and web so if you want desktop for example you need to implement flame audio or audio players for desktop all right that's good all right are you ready for pair programming yes correct yeah all right very good so let me give you a quick tour for my app this is my app and as you said we probably don't really care about my app right now how it works because we're gonna we're gonna make a game and we don't really care about the app right but what i have in my my head is that when we sign in and we see list of coffee i i thought that why not adding another button here and adding a 2d game so if people are get bored they can just go to the tab and start playing right that's the plan what i'm going to do here is that i'm going to change my initial page on initial route to an empty widget which let's create that together let's say i'm going to create like a game dot dart in my screen and let's say okay i'll leave this empty for you and then let's go and have my router somewhere here and say initial route go to like game let's also create a game route here let's call it game and game and that's going to build my game screen for now that's enough for me let's just create this widget quickly uh yeah i need an estate let's widget let's have a class gamer screen which is going to and then i'll leave this to you what you want to implement and let's return for now just a text let's say game all right so just want to do it uh this way because it's easier whenever we refresh it just comes to this page instead of any other page and let's just how to restart and make sure that it's working and let's continue okay before while it's restarting what should we do from the beginning so the documentation on your uh repository is it available somewhere because i see actually at least in pop.dev there is not much documentation so on the website i see actually there are some documentation so where do you recommend we first of all for the documentation where should people go and and look at the documentation if they want so we have two kinds of documentation the first one is if you go to our website and click on docs or if you go to a repo and go to the docs folder uh that's a more like high level set of markdowns that will kind of describe how flame works and how things interact so that's a better place to start and then we have the api docs which you can get to pub or like in the actual code where you can see like details for each method and each class but that's once you're ready like are you into it and you want to see oh what does this matter a little bit you can read that that that's more like fine grained okay perfect right so the game page is ready for you um do you want to continue doing that yourself and what should we build as an example for this coffee app you are the master uh here and i don't know anything about yummy so i have a coffee app i want a 2d game very simple one something with coffees maybe what can we implement in less than 30 minutes let's say i think you could do that classy example that we do about the the flappy bird clone this that's okay okay so let's let's do that then um should i add your package to probably pop espece.yamify right that's the first thing we should do and that's going to be flame is that correct okay okay let's just make sure that we have this package all right um i will open my game screen page and i will leave this to you both of you here we go and just tell me what should we do all right first thing we need to create our game class and i think i can get this initial scaffold called then so we have two three important things on flame so first is our game class so i'm gonna i don't know coffee game this is our most basic uh class for for starting a game with flame and then this this will represent our game we need something to insert our game inside the widget 3 so we have a game widget for that which we just passed an instance of our game and i made a mistake of actually and if you run this we'll see nothing just a black screen but there is a flame gaming running inside rvg3 the way that that flame works this this flaming game at least is that we have components just like flare has widgets we have components so first video we could create is a component for our player and for this we use the position component which is a component that will have like both coordinates and a dimension inside the game space and since this is we'll make the afterwards changes to a sprite or something like that but let's just handle my square here so component is something that can have its state and then the two important methods are render and update in render you must grab the current state and tell the canvas how to draw your component so for example eric is just draw a rectangle using the components the position components dimensions uh and the update is where you get an amount of time that has elapsed since the last update and you must propagate the state to the new state so for example if your component is moving you need to update its position so it's kind of similar to a flutter where you have you know the state and the call set state the difference is that our update is always been called every frame right because the game is dynamic and it's moving so you you don't just update when there's an user action you're always updating isn't it also the place that we should take care of the responsiveness of the app let's say if we're rotating the mobile or or in bigger screens so these are the the sizes and spaces that we should take care at that point right or it or that's that's working differently for that we also have another method which is called own gain resize so that method you can listen to changes of the game size and you can you know respond accordingly what you want to do another option that you can do is you can we have a concept of viewports so if you don't want to care about game size you can set a viewport and say my game is 600 by 800 and then all your components they will be like you you compose them in this space and at the very end flame will scale that to whatever size your device is let's see what eric is doing so you created a position component as you call it player and then you're gonna render something to the canvas you gave a paint as a color that's okay and then you also created a flame game which we already created uh in the beginning and then you're going to have an unload what does unload means here yeah unload is where you should put all the initializations for your game so like loading assets adding components to your game and everything that it's need to be done the peninsulization needs to be done there all right if you run this we should see a white all right so then you defined a width and height for your player right so you can add as many player as you want right yeah yeah you can have many as many components as you you want sure so then uh okay so we have now something in the screen yeah and now we need to to add some interactivity we want you to do that alone yeah sure um [Music] so if we're doing a flappy bird um when we click we want it kind of to jump right but then we also want it to be falling down constantly so those i think those are two things that we can do [Music] so for the click in the flame game we can use a mixing which is called cap detector i think and that once we have this mixed in maybe not that detector do you remember the name eric yeah it's that detector you need to import it from the gestures library i can import it yeah here we go so then we get the method on tap that we can override okay i'm gonna copy it here from the definition of that detector let's let me see if it's it's uh it's not imported now now i import it so then we're gonna have like an untapped here yeah here we go on tab is coming on tab down for example right so whenever we tap down i want to do something so the first thing i need to do here is i need to hold on reference to this player component so i can access it and we know that uh own load is only called once so we can use a final here league final so whenever we tap i want the player to jump so create this method on the player because i'm trying to keep the state within like you can have state on the game but whatever i can put inside the components let's put inside and if it jump makes sense inside the component here in order to make the player fall we need to know its velocity right so i create a state here which will be the player velocity and i use this vector2 class which is just a vector uh like a mathematical arrow and let's call it velocity and we can start it with zero so on jump we want to give you the velocity up let's give it a boost so not in the x coordinate but in the actually you know our thing only moves on the y direction so we we could just use a number we don't need a vector because x will always be zero but i'll just leave it as a vector in case we ever want to move it forward like we can use the same the same vector and so zero let's say uh minus a hundred i we will need to calibrate this values like i have no idea how much this will be in practice a negative because it's going up so the flutter coordinate space starts at the top left of the screen and then down is positive and up is negative however this will do nothing by itself we also need to now so right now we only have the render method uh so there is no update which means our component is just staying still and never does anything so we need to override the update method to actually do something uh and there are a few things we're going to do so the first thing is we wanted the position to be modified by velocity times time so this is this is the time since the last update uh so this just means you know velocity equals time over if you equal space over time that's just basic uh physics and we're just multiplying our velocity by this by this number so if we run it right now what will happen is it's going to start still but then as soon as we click it's going to go up forever and never stop so what we also want to do is we want to make it constantly going down so for that we can modify our velocity and kind of add like a gravity force down that's always pulling our rectangle so in order to do that we need some more a little bit more advanced uh physics formulas which is the new velocity we're going to sum up uh gravity times time and the position is acceleration [Music] squared over two is actually minus velocity times time plus uh sorry gravity times dt squared over 2 that's the you know formal wave acceleration and this gravity we can create a constant here and again 0 on x and y you want to grab it to be down so let's say 10. so i think that's it uh we should probably run it just to make sure they make any mistakes so it should immediately fall once we restart well it's doing the other way i think it just goes up instead of falling let's just have a look but even even if you don't click well something happened here it was weird because it i didn't do anything and it just went up maybe i had maybe i it reversed the player doesn't render anymore maybe this should be negative but i didn't tap that's that's interesting i didn't tap i think the farmer should be like this maybe yeah grab this backwards yeah here we go yeah now it's enough but it's super slow so let's make it a little bit faster party okay now what if you tap well if i tab it just goes backward yeah i think that 100 is too much yeah let's make it like 10. okay okay if i tap then now it just slows down you see so too little so let's make it like 25 oh okay if i tab now goes off okay that's uh i see another thing we can do is to center it on the screen so to do that i'm going to use the unload method so similar to how the game has download the components you can also specify initialization code and the reason i'm doing on unload is because i need to know the size of the gate to center it and to do that i can use the has game graph mixing for the game and that gives me a game wrap which is just the instance of this game so it's a way to access the game stuff so if you want to access another component here for example you could do game half top player but we want to access the size of the screen and i want my initial position to be centered on the screen now by default our anchor is top left so this line will put the top left of our component on the center of the screen if we change the anchor to be center this means we're putting the center of component in the center of the screen so this will center the square and we'll start like in the center of the screen i have a question here so now it's actually drawing a box here can i change it with something else like well usually you don't want a box right you want something else like i don't know a bird a coffee cup coffee or something like that yeah definitely you wanna do that eric yeah do you have any assets on this program anymore i i do have some assets uh let's let's figure out so we have yeah well should be can we use svgs or should be jpeg or png yeah by all flameone supports images but we can use svg if we add another pack we have a flame svg package okay okay one question before we do that now the background of this uh widget or this page is black so can i just change it with a picture or something like this picture that i just showed you you see in the screen yeah i mean we can probably you could for example add a component that has this image and it stays on the background statically but given this is a static image i would recommend like just alter our gaming screen page and do that on flutter side because this is a stat so i don't need to render every time so that would be more performative yeah okay so like can i this game widget here can i just wrap it with other widgets right now like scaffold and then a back okay okay that's that's again which is just another flutter video that can compose if anything you want the only piece of important information about the game is that it it don't clip the canvas by default so if your gaming renders outside its area it will show the game components outside its area so that's the only gotcha about the game widget okay sounds good all right so what i'm going to add here is going to be a png of a coffee cup so i will add it quickly then as a png let me just do that here is the assets is this is the uh it's a cup let's say cop okay can we now just replace the box with this cup maybe let's see well how we can do that all right so first thing i'm gonna to do is we don't need more the deposition component can use now another component that we have specifically for sprites or images that's called sprite component so the difference between the positional component and a sprite is just that one is drawing some kind of shape but the sprite is just rendering like image or something like that right yeah actually the position components don't define any hinder method so we had to overhide here so we could handle anything a shape and anything we want but this one does implement i had the metal fit so you can just get rid of the previous implementation we had we don't need this anymore as well and now we can just on our own load in each day sprite attribute we're gonna get we have that load sprite and put put the name of it's cup right it's a png i don't remember yeah it's cop.png okay so but i think this this will not work so on flame we by default look for all sprites on the images folders inside the assets folder just though so we don't need to to keep repeating assets slash image so for now we should probably just move this image to a images folder all right images for that where so i do have an assets for lister like do you mean another folder here called images yeah exactly okay so then let's say images and then move this to here and then possibly i need to change that to year two so okay now we need to restart okay let's uh i think you need to do a slash after images so includes all the uh here you mean one more slash here you mean so now this load sprite is actually loading everything from assets slash images right is there any way to just tell this function that i have different location or this is by default is there yeah we have a configuration a prefix configuration for that i don't remember how exactly how to change that but you do have a configuration that you can pass and it will load them different all right let's let's continue then then now it's going to if i just restart let's finger cross that it will load oh it doesn't load anything just because we have not done anything yet right or should it load the picture yeah this code should render a picture instead of the white okay square let's see all right oh that's cool okay now the game let's say you need to tap and it just let do not let this uh copy uh cop goes down so then your game over let's say right i'm not sure what you want to do but can we here do like um a restart or something that whenever you game over then again you restart uh so something like that that's quite common right yep all right uh we're going to do or can i so that should be fairly simple so on our update method we're updating the position and in particular we care about the y chord right and we want to know if the y coordinate is past the bounds so we can say if position of y is greater than the game graph dot size dot y so basically this means the center of our square will be below the uh the like bottom of the screen so if this happens uh we can reset so create this new method we set here so we know that we have to do so what i'm thinking as well like if the game just starts and the box starts falling that's kind of jarring experience to the user so what i'm thinking is let's have a boolean [Music] call is reset and i'm gonna start it with true and then if this is true we don't actually update and so when we reset we set this we set back to true and we need to center again so let's copy this here and then we can actually call reset here so whenever we set we set this to true and we re-center and then when we actually click if it's reset we set it to false so the first click will like awake the box and it will then start falling so can we pass that yeah let's let's give it a try um all right so you know sometimes when we see these 3d games i immediately think of those you know i don't remember the name of the game but you know we have some balls uh on top of the screen and then or maybe some uh something on top and then you have a ball which going to uh go and and have a bounce back from the ground go up and then you know just try to uh get rid of some of those things on the top of the screen you know i i don't remember exactly i think those are called breakout games where we actually implemented a breakout game in flame recently and me it was really fun yeah that's what i was thinking like if it's possible to have some sort of like a bounce back here when it just comes there then it doesn't go all the way and you game over it just bounce back and go another direction probably randomly or another direction you know what i'm saying it's very random these are the things that definitely is possible in flame right oh yeah definitely like uh it would be like instead of resetting i guess technically we said we should also set the velocity to zero and i forgot about that before so instead of doing this and this like we would keep the position as this but then we need to mirror the velocity so it's kind of like pillars where depending on the angle uh the the velocity is like the same angle on the other side so that's just mirroring like either the x or the y uh coordinates of the it could be random right when whenever it just touched the button then we randomly say some x and some y so it just goes in another way so this is could this can't be something random and i have one question here is that let's say we implement this and then this comes there are some balls here on top of the screen if you just touch those balls they should be disappearing from from the screen these are also the things that are quite common like two players collide with each other to do something can we have an example of that yeah so right now instead of setting to zero let's say that the new velocity is gonna be a random x and minus the y so instead of going down and go up and then it will also get an angle for this random x here which you can use uh i think it's random yeah from the dartmouth no please help me i was gonna say that my like suggestions are not showing up i need to import from dartmouth yeah i just i can import that all right here we go and then you can do rando x dot next next thing to next yeah it's just been next uh what should be double in or next double like this because it's between zero and one right so let's say minus minus half times like 20. and then we remove this we don't we also don't want to reset to do this so if you restart now once it hits it should go back up to like some random angle let's see okay that's good we're getting there i think but do you have examples on the website like maybe some advanced examples so i want to actually show it at the end of the show so let's let's play with this right now and then we can go back to okay oh sorry we need to add back the on the unload position equals because i've removed it from reset but like the first time i still need to do this we just don't want to do it every time yeah that's cool let's see yeah sure yeah i think my training here was too low yeah sure let's do that yeah it's just changing the right now okay that's good now we are talking about cabbing so um sometimes we are like let's say you can now actually build this for web as well and then in web it makes sense to play with keyboard so how does that that work in flame yeah just like we had the tap detector mixing on gaming we can have the if my memory serves me well i think it's keyboard handler oh we have like you have uh other mixing for all the different events right like different uh okay uh that's cool i think it's all handled okay handle we probably may need to to reserve two documentations through proper remember uh okay event maybe a question for you while eric is uh typing luan is that you see this box now is going offset off the screen yeah that's because we only checked the bottom of the screen so we also want to check the sides and potentially the top but you can easily do that uh here right like we're checking position that y compared to game graph size dot y you can do the same thing for x yeah sure sure i see oh that's cool this i mean this is uh like we're basically doing at this point we're doing like collision detection with the bounds of the screen by hand right so it's a little bit like you have to specify all the cases uh but if you want there is a built-in collision detection system flame that you can use and you can also use forest 2d which is an implementation of box 3d which is a full physics engine so those are two options as well if you want to get more advanced these are like an extension to flame or is it built in into into flame framework the simple condition detection is built in so you can just use it the uh forest to the it's a package called flame underscore first 2d that you can use you just added that and you got a full box to be support i see um yeah sure let's see what eric is doing and maybe for the last part of this show um [Music] i really want to see when two objects two players here are colliding and then different possibilities here like whenever they collide if is there any method or a callback that we do something we can get rid of one or we can maybe um i don't know something whatever yeah so i think that that's a great opportunity to showcase the simple collision detection that we have and you see that we don't actually need to do much to to have them you're done eric right so this is the key event so then that's technically what we can do in like if i compile that to web then people can work with the keyboard as well right exactly it also works on android if you have an external keyboard oh re really okay let's see then if i just press the space button yeah i don't know if it'll work on the emulator but i mean like if you have a keyboard connected to a real device ah yeah yeah sure sure yeah the emulator i don't think it will work um so yeah for the simple collision so right now we only have one component which is the well my screen is jumping all over the place now which is the player component so let's say we create another one let's just call it like circle component that should be something different and in order to collide we have i mean sorry in order to use the sympopulation detection of course you can do collision by yourself right checking this kind of stuff like if this intersects with that but there is a built-in way which is you add hitbox to your component and also collidable to tell that they can collide with others now in order to use this simple collision detection we actually need to mark our game has collidables that's just telling our game hey check for all the collidable stuff uh which of course is not free so you have to add that so you don't so normally games on water doing this check but we're telling hey do the check because i'm gonna have collidables right so this also has to be hitbox and collidable so by default if you have a hitbox you can do [Music] add shape between this rectangle this will just tell a kind of shape maybe it's a hit box actually uh so this is basically telling hey this is sprite component is a position component and a position component has a position and has a size so this is just saying grab that position inside and make a rectangle right and similarly on our circle we can say add hitbox circle shape or rectangle shape like probably won't matter too much if we use two rectangles right because like uh it just be slightly more precise we could implement a render here and tell it to draw a circle let's draw a circle it's draw all the way i think yeah i wish i had like the suggestion so i could see there's draw circle offset 0 radius let's say 10 let's just create a bank here it's white yeah you you should actually use height or which there so the handler mats the size of the component yeah you're yeah i mean that's just say with and we'll make sure it's always the same never forget to call the separation of your methods right so flame can do its own stuff so here we can say size equals to like 10. so this will be a circle of radius 10 right and then we can just create some circles on our game so here we're adding the player we can also add some circles so we can do a for loop maybe like 10 circles wait a second where are you typing uh line 92 92 yeah i'm back on oh here we go are you back in the game okay yeah because i created a circle component right now i want to add uh these circles to random positions let's say x so we can kind of copy our renault x here except this time i want this to be within the bounds of the screen so be zero to one times size dot x let me just make sure i set the anchor on this circle yeah i forgot to set the anchor here on the circle component so the anchor is also the center so so this should add 10 circles on random positions and then since they're both collidable so what we're going to do if they collide do you want to like destroy the circle but wait a second there is some kind of error here first of all this one the method is it says maybe i should import it no yeah i probably need the same part in geometry package um i doesn't seem that it recognized it maybe that's not the name of the players i don't remember it exactly maybe it's just rectangle yeah it seems it's rectangle uh no i think that's from flutter let me add the import manager here it's totally interesting rectangle you just missed the hitter box before yeah oh here we go yeah it's coming and then i bet the other one should be hitbox circle yeah sure okay now now it's it's working so should i refresh and see what we have done so far yeah let's do that uh wait a second there is it's probably colors yes yeah good so then we're going to see some circles like 10 circles and then this box yes we'll see but that's very cool so apart from position and a sprite component do do you have also any other like components yeah there are many many components we have some external packages that add some dependencies like flame tiled that will have like a tired component uh forest 2d will have its own components if you want to use that on the car flame i think we have like the main ones that you want to use would be sprite sprite animation component uh if you want to do like a running animation or like if you have like a sprite sheet with several frames of your animation relax component so now we have these circles and then we have this box what we are expecting nothing let's remove then on collision yeah so in order to actually handle the collision we have our collidable mixing has a method which is on condition i'm just going to copy here so if we override this method we know that it collided with something else so we can say if order is player so if it collided with a player we can just remove from parents which basically will delete it where are we going to set this right layer component yeah yeah this is a player component yeah i mean we don't actually need this because right now it's impossible for a ball to collide water ball because the balls don't move i guess they could they could spawn on top of each other because they're spawning randomly so it's possible that one would spawn on top of each other so this will just prevent that yeah sure this destroy should be should we move and yes because we named it's that simple so if i now refresh or let's say play then whenever these two collide then it will remove the circle that's yes exactly so that's what the collidables give us it's just checking collision of all collidables all components that have collidable well that's that's very cool well as far as i see i mean starting developing a game in 2d it's not as scary as i was thinking i know that there might be some physics and mathematics involved but i think that's the only hard part of it the rest is just programming probably let's see yeah it's cool and that's now automatically handled by the framework so i don't do anything manually with the collidable whatever you set yeah just remember that the collidable the simple collision detection it will just detect collisions and then you have to implement on collide on collision and do what you want right in this case so you're not like bounce back if you want it to bounce back you have to implement that on collision and then for example right now let's say if i just removed all these 10 circles is there any method or anything that tell me oh there is no more let's say circular at the moment or or is it something that i should actually handle here like i should have an estate here let's say circular state state for circle and then just count it every time something is removed and once that's can for example i just say your game over or you are let's say you win or something like that is it the way that we should work or there is a better way to do it you can't have a state but it probably should be on the game and not on the circle component because it's not like the circle counter would be something on the game level not something that every circle has but you don't have to have that because the game has a list of all its components so you can just count how many circles there is it's called children oh really okay so yeah on game you mean on a coffee game right now that we created here where should i actually count similar to components the game also has a render and update method uh by default it will just call render update for every component but if you want to add some custom logic you can override updates yeah don't forget to call super otherwise it will not do anything else and then on the update you can do if children dot you can use so children will have our player and the circles so you can use where type i see i should children is available here because it's a flame game okay yes now i see okay then i can count it here and whatever the children's of one particular player com like component is like at some point some numbers then i can say something let's say and this is the way that it usually would work you can use an overlay to show like a pop-up widget sure yeah sure oh that's cool oh that's that's very cool all right then i know that there will be a lot of other things i mean 30 minutes or 45 minutes is quite short time to get into the whole framework for sure but what we've discovered now is working with flame is easy creating a 2d component with flame is easy and it's not as scary as i i people are thinking actually so i think this is like a misconception from among developers that actually creating games might be difficult it is difficult it might be difficult for sure but uh it's not as difficult as what we are thinking well at least with flame ray flutter and what we have it seems pretty easy we just need to sit and create something [Music] a couple of question and then let's end this show and one one question is that you're still actively contributing to this project right uh what is the road map what is the plan uh the things that you want to tell us right now in the show and probably makes us excited yeah so yeah we are still active in maintenance and working pretty hard to to get everyone done and we will have uh a conference tomorrow about about flame actually where we will announce a lot of of the news so we are hoping to get the v1 release soon we are planning to that we are hoping that this release candidate is the last one we are just right now basically testing things make sure everything works collect feedback from the community to make sure that the apis that that how we design the apis are are good but hopefully this will be the last release candidate and then we'll go to view one and then there is always a lot of more work to do right and we have many actions to add support like um more more support for for physics through for h2d we have a recent ad support to block player block so you can have an alternative to managing states and svg and anyhow that rife it's also on our old map there's a lot of goods that we're hoping to bring to flame ecosystem oh that's very cool so if i want to create a do you know mario game so perhaps you know right it's like a simple game can i create it with flame and and uh it seems like a 2d at least to me so is it possible sure yeah milo one actually the first game starts to work in tragedy is a platform kind of like mario so yeah it's totally possible really okay that's very cool all right um so um one more thing is that if you want to actually name one of the coolest feature in the framework that's usually i ask from all others there are lots of cool features in the in in the framework or in the package so but if you want to name maybe one or two your favorite that actually makes you excited and you implement it and you are proud of this which one could it be maybe you can say each of you can say one this is a very hard one but i think what what i most love about flame and flutter is that most game age that i worked before flaming it was very hard to make the white part of your game you know like it's i mean game all games have some kind of ui like you have a game over or a menu or a stage selection screen and the way that flame joins with flutter is so natural and it's super cool to mix witages and games and components i think that's my favorite thing about flame i really like the the simple collision detection that we have i think it's such an easy way to to get started it's not a full physics engine so the other thing that i really like is the box to the integration which you know if you like physics that's like your thing but i really like how we how modular it is right like one you can do it yourself right two there is this like easy but not too complicated not so powerful simple collision detection that you can obtain and three if you want like the full thing you can opt into the box cd so the way that you can just like pick and choose what parts you want to use if that's really powerful in flame right that's very cool um usually at the end of the show i show the repository of the package and i will tell everyone that this is the repository that they can just go maybe hit the sponsor button or star luckily i already started this project or a4 can contribute there will be a lot of issues and you know pull requests that the team the maintenance luan eric everyone will welcome you to send uh you know and fix those issues send the pr and fix the issues especially these months which is october and octo october 1st let's say so and feel free to support this amazing project and keep these guys motivated if you're watching right now and you like this project as i do um anything else that you want to share with us at the end of the show uh luann or eric anything hidden from the framework that you didn't talk or you want to say something about it or whatever now a stage is yours last words and let's end this show afterwards i just want to mention that we have a small community around flame we have our discord server so everybody is welcome to join we are almost uh almost every day there is a very on the day there is somebody online that can help you questions and also people showing the things they did a flame so be sure to if you like game development like flame and join us on our small community and we can help each other yeah and leave us issues prs stars on github we have the hacktoberfest tag so if you want to participate with that you know we always love people bringing meaningful contributions because in the end it's all about the community and everyone helping each other absolutely i will put all the links and you know documentation everything in uh to the to the show notes or the comment uh section below so apart from that then thank you very much both of you uh it was so exciting to see that i can create a game and although this was like a baby step for me to learn and i think it is also for many but it was quite useful and helpful to understand where should we even start because sometimes getting you started is the hardest part when you know then you can just move on right and now we know how we can start creating our our simple 2d games or even advanced 2d games so we're going to go and do that and i'm sure that people will reach out to you on discord or your github issues and everywhere so to ask questions or anything else do not hesitate to come back to this show whenever you have something cool to share everyone will love watching you again and programming again together thank you very much both of you thank you thank you thank you very much

Channel: Majid Hajian

Views: 7,874

Keywords: Flutter, game, flutter game, Flame engine, Flame, Flutter flame, Flutter gaming, flutter game development, flutter game engine

Id: J3ZZyzKS-rg

Length: 72min 19sec (4339 seconds)

Published: Sun Nov 21 2021