Building Your First 2D Game with Flutter and Flame for iOS and Android

1. Course Introduction Video: Do you remember the classic 2D games we used to play as kids, such as Mario contract, Donkey Kong, mortal combat, etc. Very good news is now you can also build your own 2D mobile game with this new exciting course that will take you on a journey of game development from scratch with the help of Florida and flame game engine, we will start with the basics such as how to configure a project. Then learn about creating and adding sprites. Implement user inputs such as joystick controls, set up a game loop to keep our game running smoothly. You will also learn how to detect collisions between objects and add sound effects to enhance their gaming experience. Whether you are a beginner or an experienced programmer. This course is designed to help you master the skills you need to create your own 2D games. By the end of the course, you will have a complete game that you can share with friends, family, and even publish to the App Store. So without wasting any more time, Let's get started. 2. Create a Flutter project: Hi, welcome to the very first video of the course, where we will learn how to build a game using flutter and flame game engine. So I hope you already know what is flame. Flame is a 2D game framework built on top of Florida, which we can create any kind of 2D game and run it in all the Florida supported platforms like mobile, web and desktop. With flame, we can build a wide range of games, including platformers, puzzle games, and less runners, RPGs, adventure games, and many more. So I don't want to get into the theory part that much. But at least we should know what we will be building. At the end of the course. We will build a game where a man has to collect dumbbells in order to stay fit, as well as dodge viruses so that he doesn't lose his muscle mass before the time runs out. Also, we will introduce vaccines, which you can collect an immune himself for few seconds, as well as protein shakes, which will give him extra energy. Let's start by creating a new Florida project. So go to your desired directory and open up your terminal and create a new Florida project with this code Flutter. Create. I will name the game fighter. Press Enter. Okay. We have done, we have created project k. Also, since I won't be billing for Windows, Linux, and Mac OS. So I will just remove this file just to make it clean and consume less space. Now, append VSCode editor and append new game folder. The course week for k. Okay. Now, the first thing I will do is install the required packages. So go to dev. And firstly, search for blame. Only flame. This one is required. Flame provides set of tools for building the games, including widgets for entering sprites and emissions, and managing game logics. Simply, I will copy it and paste it in the pub spec dot YAML file below here in the dependency section. Just save it. And other package which is required is this one that is blame audio. Flame audio is a package that provides tools for handling audio and games. It includes utilities for loading and playing sound effects and music, managing audio channels and controlling audio playback. Just copy this one as well. And paste it here. Save it. Okay, I guess it's working nicely. We have the packages. Then next thing I will do is create a new folder, assets in the root of our project that is here, I will just create assets. Here we require two new folders, audio and images. This is the proposed folder structure or fake flame game, that is visual structure. Our folder, asset folders like this, that is audio, images. And I have attached the necessary assets in this video, as well as in the last video where we, you can download the whole, that is the complete source code. I have these acids. I will just copy it and paste it in our project folder. As you can see, we have the background, dumbbell game logo, different types of player physique, protein shake vaccine as well as the virus. And for audio we have dumbbell sound, protein sound. That is, if we are collided, are collecting the stuff, then sounds will get played. If you want to search for your own images, you can directly search online for man lifting dumbbells, cartoon vaccine, I can PNG, protein shake, I can PNG. And for audio, you can simply search free to do game audio. Now, we have the folder, assets folder, but we have to make sure we specify the newly created folder locations in the Pub spec dot YAML file. So here you can see below, you have this inner line 64, you have this assets. So just remove, go to this line and just remove press delete two times, and go below and press two times. I hope you know that this trial is very sensitive. Any extra space or tab will throw an error. Here are simply mentioned, assets, images, and the other one is assets audio. And save it. That's it for this video. In the next session, we will create our game class. Thank you. 3. Creating a Game class: Hi. So now we will learn the concept of flame game class. This will be the heart, or you can say, entry point of our game. We will create and manage all our other components from here, go to main dot dot file. And let's remove, just remove everything. Okay? I want to remove everything here. Let's make a separate class for our game class that is separate folder in their lives. Simply create a new folder and name it games. And inside it create a new file. Weight. Fighter game. Nor dart. Playing game class implements a component based game. It has a tree of components and calls the update and render methods of all components that have been added to the game. So to create a flame gained class, you simply have to create a class, this F8 fighter game, and extend it to the flame game like this. This is how you create a game class. So it has an onload method, or the method set is as well, but unload. And here I will just simply make it future. And a sink here I relate a sink components that is any other images background. These are all components that, which can be added to the game class directly with the help of this unload. And here we will use the add method just to add that component for our class. And this onload is executed only once during the startup of our game. So this is the flame game class. Let's talk about that game widget. Every game you run with flame is rigid. In our Florida application, like any text or button, the game widget is flutter widget that is used to insert this game inside the Florida widget tree. So it is very simple. Just go to main dot dot file and remove this code that is my class and other unleash left is main class. We can directly pass the game widget here in the Run app. And it requires a game instance that just call the object of our game, like this final fight their game. The game here. Simply pass the variable. And to make sure that it is ready. We will write this florida, a widget Florida binding and unbinding, not ensure initialized. So everything is initialized by the flutter. Now save everything up, open up VR device, that is, I'm using an emulator, but you can use your own device as well. Now, wait, this. Simply start debugging. It might take some time. Let's see what is the error? I don't think there is any error here that okay, I forgot to give a slash. It's a very silly mistake. Now simply develop the application. These are very small and silly mistakes, which happens. So as you can see, there is, our app is running, but it will do nothing. We just say black empty screen in our device. As we know that we already have the assets audio add images inside asset folder. But instead of calling those files by name everywhere, Let's create a separate file for it. So let's create a folder. Name is constants, and inside it create a file. Globals dot dot. We will store all the asset names in static variables. This approach avoid any misspelling as well as it is convenient to change any asset later on. Let's create a class global. First thing I will do is just make that constructor private so that we don't have to create an object or instance of this class. We will directly call the images using this static static string. Bag ground. Sprite is equal to the background sprite name is background dot JPG. Dense, that thick. Glanced. Bring dumbbells bright. Is it going to do dumbbell dot PNG? Then static, const, string player. Skinny. Sprite is equal to layer skinny dot PNG. Now just copy it and paste it like this. Then next we have player sprite. It will be player fit dot PNG. Then we have player muscular Sprite. It is muscular dot PNG. You have a fever. That is if he has been attacked, then we have layer fever that PNG. Then we have the sprite for virus. Virus. And the spray name is virus dot PNG. Pasted some more time. Next we'll be vaccine, vaccine that PNG. And then we have proteins sprite. And the name is protein ik dot PNG. These are the images. Now it's time for the audio. Just paste it and it will be Number sound. Sound name is Number, sound MP3. As copy it, paste it four times. Next one is wireless sound. It will be y less PNG. Next vaccine sound, sound dot. This is wave, that is wave. And finally, we have the protein sound. Here it's protein sound dot, mp3. Yeah. So our constants are ready. It will be very convenient for us to call any asset later on in our application. And Q 4. Adding Background and Player: Hi, welcome back. In this video, we will create our first component. Components are the basic building blocks for aflame game. Any entity or object within the game can be represented as a component. It is quite similar to widgets in Florida. Everything we see on top of the screen, that is all components, e.g. background image, older characters, objects on the screen, et cetera. So let's go to lib folder. Create a new folder called Come ponens. And inside it, if new file and name it background component k, simply nets create a class. But ground component. This will extend sprite component like this. So now in that blame game engine, a sprite component is a graphical object that represent a 2D image or animation. It is typically used to represent characters, items, or other objects in the game world. Sprite component can be positioned, rotated, and scaled, and can be updated to different frames of an animation. Here. This has an onload method of its own. So every component has unload, unload, update. All these methods are pre-built. We'll just write sprite, that is the value of this sprite component. Here. Now just understand, this is just the component and we have to add this component in our main game class. So definitely we have to have some reference which can be done using a mixin called that is width, has game like this and the game name that is fistfight. Their class. This is the game class that has game reference is used to indicate that an object has a reference to the current game class. That is, this has the reference to the current game class. This is useful because many game objects need to access global variables. Any variable which is here in this class, e.g. scores or anything, input handling audio playback. So in other words, we can access the properties and methods which are in this game class from this class, as simple as this. And we can access our send or load stuff using this game ref, the party game ref dot, loads bright. Then which sprite we want? Global start backgrounds. Sprite, this one. And what should be the size of this bright? It should be the size of that game. That is the complete screen. Okay, now, if I save it, nothing will happen. Okay? I hope you understand that this onload is the lifecycle of this component. We are using the onLoad event to achieve the same thing as this game class. That it will make sure that everything is ready when it is called for the first time. And game dev dot size takes the complete width and height of the user device. Now, to show that component in them, in that game, we simply have to use this add method, which is used to add a new game object to the game world. So the add method is useful for adding new game objects such as enemy player or when a new level is loaded. For all these things. Ad is used. We just have to write background component like this. Again, I'm dealing this is called when the game is loaded for the first time and it creates a new instance of the background component. Now let's save it. We have the game rigid fit for their game is their scheme reference? Yes, Is everything I will just dominate. And start again. I think I should have refreshed adding multiple times. Let's see what happens if Fred and again, see we have that background image. So that mistake was this. We had to remove, restart or sometimes stop and start our application since we were not using the Hartree load. Similarly like this background, Let's create a sprite component for our player as well. Simply go to components folder, create a new dot file. Layer component. Dot, dot. Yeah, similar like light layer component extends bright component and has a mixin that is here as game reference. Like their game, like this. Cave. Now, we have to use the unload. My dad said it future that unload. Then. Similarly, we will use the sprite property of this spread component because we want the sprite to be loaded. This load sprite and which is the image name, global start player. Global lot. We have the player skinny, this one. Then. Now there are other properties of a sprite component as well. That is what should be the position of this, right, of this image under game. So we should put it, we'll just put it in the middle of the screen. That is, we take the complete screen and divide by two. Let's show it in the center of the screen, x-axis and y-axis. Now, what should be the height? We will just mention the height here in a variable so that we can change. Whenever we want. Sprite, height is going to be 100. Simply write, height is equal to weight is equal to psi. So the heightened, which should be the same anchor. Anchor where where. So the anchor of a sprite components refers to the point within. Thus that is used as does sprites origin or center point. This is, it is used as a reference for partitioning, rotating, and scaling the sprite. By default, the anchor point is located at the top-left, but right now we have changed it to the center. Now. Now let's save all. And similarly, we have to add this in our background component as well. So we will add layer component like this. And also remember, components are added in this sequence. We mentioned them, that is, if we write background below player, then we won't be able to see that player component in the screen. And also, I will just change this globals. Since the filename is globals, I will just change it to globals and make the changes. By. Now. We start the app and see, you can see the player component in the middle of the screen. And when I say size or position, it is x-axis and y-axis. I hope you have learned how to create your first components. In the next video, we will work on adding a joystick in our game. Thank you. 5. Adding movement with Joystick: Hi, welcome back. So now it's time we add some movement to our player component. Plane gives us different input options such as keyboard, gestures, drag, et cetera. But since we intend to create a mobile game and most mobile devices do not have a keyboard or hardware buttons. For this reason, we will create a virtual joystick, which flame? This can be done using joystick component. So let's create a new folder inside lib known as inputs. Inside it create a file. Joystick dot, dot. Now, simply create instance of joy stick component. Joystick is equal to joystick component of k. Joystick component is made up of three main elements. That knob, background and the margin. So let's than knob now will be a circle component. Then EDS will wait 30. Let's paint it. Basic palette, that red dot with alpha two and red paint. This is the inner circle which the user will drag. That knob is that one. Then we have the background. Background. Again. I have a circle component. Radius will be bigger than 80. Paint. Basic, palette dot red. Let's change some kind of its opacity, kind off that paint. Okay, Now, this one is the outer circle. You will understand it when it is being rendered. And then finally, let's have that margin. Const edge insets. Edge insets that only I require only. Here. Left will be fought. D modem will be for T. So this is what, this is the position of the joystick. Position of the joystick. So this is that joystick component. Let's save our file. Let's add this joystick in our game. Go to the F8 fighter file here. Click below the player component just right. Joystick. It is imported from the inputs. And also remember, we have to use that has draggable mixing in the main game file, in the main game class when we are using any kind of choice, the components, so like this width has dragged this because since you also understand it, we are dragging the knob here. Let's go and check out again. Okay. Sorry again, I have to refresh. See. We have it now. I just didn't like the outer circle color. Let's go again. Outer circle should be handwritten. It is looking so nice. Now, let's add this move went to our player component. Go to the layer component file. First of all, we will have a joystick component variable. That is, we will accept that joystick here. In this file. Layer component required, this type dot joystick. Okay? So we have to send that joystick here. Also. Lets mentioned the speed at which the player will move. It will be 500. Now, we will use the update method. Now, update is a kind of game loop. We have two game loops, mainly update and render. So we will use the update method most of the time. The flame calls a component's update method once every tick off frame of the event loop to redraw each game component that has changed. It is similar to flutters. Build My turn. We will add logic here in this update, my director position, the character, or the movement of the characters. The update method takes a single parameter, which is that delta time. That is this one d t is measured in seconds. That delta time is used to ensure that game objects move and behave consistently across different devices and frame rate. E.g. if a player is supposed to move at a speed of hundred pixels per second. And the elapsed time since the last frame was 0.02 s, the object should move at two pixels in this frame. That is 100 pixels per second multiplied by 0.02 second. In this, game, developers can create games that feels smooth and responsive across various devices. Now, let's add it. I will. First of all, I will just check if joystick, that direction is equal to direction, joystick direction that idle That is nothing is going on, then simply return from here. If the user is not dragging the knob. Hard elsewhere is simply change the position that this, this variable dot add. We will add joystick relative delta into spring festival. I will show you what happens if I do not multiply the delta. So we'll just send a stick like this. Let's check out our application. Now. If I drag it upwards, see, it went so fast. But if I go to the player component in here, if I multiply d T as well, then you will see it feels so smooth. The movement. It feels so nice. So our movement is happening properly. That's it for this video. See you in the next session. 6. Screen Boundaries to Player: Hi. So as you can see, our player is moving nicely, but if he goes near the boundary, then he surpasses it. That is, he goes through the boundary. So we have to make some or implement some logic so that that user cannot move the player pasta boundary. That is for here he has to stop. Here, he has to stop like this. So we have to make sure the player is only able to move within that device screen. Go-to player component. Yeah. First, let's create a boundary variables for all the four sides. Late, double, right bound, late, left bound, bound, down, bound. Now, since it's late variables, we obviously have to initialize it in the onload. Right bound will be game OF that size, NOT x -60. So I will explain you this value. So this is the right boundary. Okay? So first of all, we did what game rho f dot size x, the x axis. This side. We took the whole vertical or horizontal size here then -60 so that it doesn't go this side. That is, I don't want it to be teal here. If I only give game ref dot size dot x, it will be Delia, so I give -60, so it will be stopped here. We are subtracting 60. So it will stop here. So this was the logic for the right bound or left bound. It will be simply 60. That is, if we write zero, then again the same concept. It will go till the end. But I'm just giving some kind of, you can say margin 60. Upper bound will be same. 60. Since y starts, y starts with zero, we are just adding zero plus 60. Here, since x direction starts with zero. And here we're just subtracting. I hope you understand the complete size of the screen -16. And left starts from zero up and then we have that down. Game ref dot size dot. Why did this go till the vertical direction, go till the bottom, and then subtract six. Cave. Now we have the variables. In the update method. We will just check if the x-axis and y-axis of the Sprite goes out of buying boundaries, then we will make that x and y axis values constant. That is, is that value which is the edge of the boundary. I will implement and explain again. So below here. And we'll just said, if not ideal, then check not of boundaries. Check if x axis of the sprite component is greater than equal to highlight bound, then the x axis to the right bundle, these don't add any more value to that location. Again, I would like to explain. So that means here the player access the x-axis is zero. Then it starts increasing, increasing, increasing. Then it is in the right bound that is here. So now we're just make sure that the x axis doesn't increase. We're just assigning the XX, right bound by alluded is this value is being assigned to him again and again. Similarly. Let's check for if x axis as less than equal to left bound, then x is equal to left bound. Now, if y axis is greater than equal to upper bound, then y is equal to bond. And if y is greater than equal to down wound, then y is equal to now unbound K. We don't have to change anything here that's restarted. Now, if I tried to go to any direction, see that boundaries are working perfectly. Now. Here, as I said, if x axis is greater than right bond, then just make sure x value is right bound. Okay? Now I will just change the valence. Show you what is the difference. If I press last time that if I just e.g. if I write it, what will happen if I go directly to write exists c, okay? It was too much value, okay? If I just write bound, I think it should only plus, it should be minus -60 more. Let's see. If I go C. We are pushed to -60 here. This is -60. But I want I don't want a -60. That's why I just want the x-axis to the, to the end. That is this one. That's it. Same goes to any other direction. I hope you have understood the concept. If you just build one or two apps, then you will just get used to these concepts and all. Thank you. See you in the next video. 7. Adding Dumbbell Component: Hi. Now let's create a new sprite component for that dumbbells. Inside components folder create a new file. Ponens component, dot, dot. Okay, So similarly we will plus lastName. Come opponent extends sprite component. It will have the has game OF mixin fit for their game. K. Numbers, right? Size will be played. Height is equal to 60. Let's have the unload my total. Again, that's sprite. Value will be await. Game ref dot load sprite, globals dot dumbbell sprite. Height will be equal to weight, which will be equal to 60. That is the sprite height variable. Partition will be vector two is just the x-axis and the y-axis. I will just give x value at 200, 200. We will change this later on. And anchor will be anchor dot center. Save it. Now let's add this dumbbell component in our game. Go to FIT fight tariff. By. Then below the layer component. Just add here like this dumbbell component, k. Let's restart the app and check it out. See, we have the dumbbell here. Obviously nothing will happen if we touch the dumbbell right now. But at least this, our game app is somewhat looking nice. People can see and say, okay, this is some kind of game. So that's it for this video. In the next video we will work on that collision detection. Thank you. 8. Adding HitBoxes to Components: Hi. So now it's time we work on the logic that whenever the player goes near the dumbbell, there should be some thing happening in the screen, whether we should be able to grab them both and all. These functionalities can be done using the concept of collision detection. Collision detection is needed in most games to detect and act upon two components intersecting each other, e.g. an arrow hitting and any other player picking up a coin. So to detect collision on any component, there must be a precise bounding box around that component. And technically it is known as hit boxes. Now let's implement it. So the first step is enabling collision detection in our main game class. And in this class we can do it by adding a mixing call. Has collision detection, simple as that. So it will make sure that our game now we'll listen to any collisions between components. Now to make sure our components can collide with each other, we have to add the mixin known as collagen callbacks. These things you just have to remember, that's it. Again, same thing in them. Layer Component Collision callbacks. Now, we have to add heat boxes to a component. That collision detection system supports three different types of shapes that you can build. Hate boxes from. This shapes, our polygon, rectangle and circle. Multiple hate box can be added to a component to find the area which can be used to detect collisions. Without adding the head box, that component will have no idea that they can collide. Our interests, intersect with each other. Now, since our dumbbell is that the structure of our dumbbell is kind of rectangle. So we will add the rectangle box to our dumbbell component. We can simply add it like this. When the onload function, it is very similar to any adding any other component. Go to player component and do the same thing. In the onLoad. Simply just add tangle head box lady. Okay, now if I save and go to our app, you won't see any difference. But we can, at least in that debug mode, use a facility given by the lemma engine. That is, we can switch on the de Beauvoir to true. It is a tool that allows developers to visualize and debug collisions between objects in the game world. When debug mode is enabled, collision objects are highlighted, are displayed in a way so that developers can see where they are and how they will interact with each other. Simply go to dumbbell. And here, just write debug mode is equal to true. And same goes to the player. Below here. Just write debug mode is equal to true. Now, save and restart. Now you can see some kind of rectangle box. Now you can at least visualize the head box. So this is the head box. Obviously. Again, right now nothing will happen. We have to do some more functionalities to make sure that the collision is going on. But at least we know that we have implemented the head box. And see here if I go, the x-axis is two-ninths, one, if I go here, the x-axis is obviously zero, but you cannot see it. Same goes for the y-axis. See here. Also like debug mode that hit boxes have a field called collision type C, like this, collision type dot, we have active, inactive, and passive. Passive refers to a type of collision object that doesn't move or react to collisions. Example. Let's say we're creating a game where the ball is bouncing around the room. The walls of the room will be collision type passive. Then we have collision type active defaults to a type of collision object that can move and react to collisions with other objects. E.g. in a game where we control a spaceship flying through space, there are lots of bullets that can't collide with each other. Line towards the spaceship. Spaceship will be set to collision type dot active, but the bullets will be set to collision type dot passive. Then we have the inactive. Inactive, on the other hand, refers to a type of collision object that is not currently active in the game world. This can be useful for optimizing performance since inactive objects don't need to be checked for collision until they become active. Adjust one YouTube. I just wanted to let you know that this concept is available so that in future games, if you see some kind of collision type dot passive and all, at least you will know that this is connected to the collisions and hit boxes. Thank you. That's all for this video. See you in the next session. 9. React to a Collision: So now the next step is to get notified in case of a collision between two components. Flame does that checks for you on every update loop. As soon as to hit boxes, interact or intersect, it will call the on collision method that we have to avoid. This overhead is possible because of this collision called back mixing. Below onload, just right on collision here. Like this. So we get two parameters on this, on collision method. One is a list of points that overlap between the hit boxes, that is intersection points. And the other is the component which this component collided. That is dumbbell with, collide with it that player. Now, we will simply write the logic. If that other component, other is clear component. Then simply remove this component that is dumbbell component from the parent that is from that game, simply make it disappear. Let's try it. I'm moving towards the dumbbell and see. It disappeared. So it gives a feeling or an effect that player has grabbed, that dumbbell, collected that number. You can say. Our collision detection is working perfectly. We can remove this debug mode as we don't need it. Now. Start again and see if I go towards it, it disappears. So this is looking nice. Now let's play a sound when the player components collide with them. Dumbbell component. The flame audio package, which we already added in our project dependency, is a tool designed to make managing audio much more easier and more efficient. That way it is done is we have to pre-load all our audio files in the node method of our game class that is going to fit Fighter game. Here in the game class, in the onload method. Simply write flame audio, audio, cash, dot load all the resolving. It simply means we will load everything into memory, the cache memory. This accepts a list or an array that sound names are globals, dot dumbbell sound. Globals. We have the virus sound. Then there is global dot vaccine sound. And finally we have lovers dot protein sound. Okay? This loading is recommended because if we tried to play sounds directly in the game that haven't been added to the cache. There, then, there, then there might be some delay in playing the sound. That after that, play the sound. This is done. Let's play this sound in the dumbbell component after collision. Here. We will simply write before you moving, right flame audio that play. And the name we want to play, the dumbbell sound. K. Let's test it out. If I go near it. Yes. Does sound is working properly? I hope you were able to listen to that sound. This is also done. Thank you for watching the video. I hope you are enjoying building this game. See you in the next session. 10. Random Dumbbell positions: Hi, welcome back. So until now the position of the dumbbell component was fixed. And after the player collides with it, it gets disappear. Let's modify and allow dumbbells to appear at random positions. So that when the player picks up that first, then we will remove that dumbbell component and create a new dumbbell and place it randomly in the screen. And this will continue till the game over. Oh, go to the dumbbell component dot dot file. First of all, create an instance of the random class. It is that that gives us the math library which can be used to generate random numbers. Simply random like this. And see, you have this dark matte imported. Let's create a new function which will return a vector two object, that is x and y values and get them audition. Now, first, we will get the x value, that is, x is equal to random integer next int. Okay? Now, if you see the description here, even understand that we have random next intense. So value is greater than equal to zero and less than equal to ten. So this is how we get there, random integer, okay? We will just get that random integer of X as game ref dot size dot x dot to int, and make it double. Okay? So this means the x axis can be from zero to the end of the screen value any random integer for the x. Similarly for the y, we have random dot. Next, int, game Raf, raf dot, size dot y. Integral since it except integer, but we have to change it to double again. And then we will return a vector two object with the x and y. So I hope you understand this is just to get a random x and y value. That's it. This next thing, t-shirt, you can understand me here as well. What does it do? Now we have to call this function inside the onload method of the dumbbell component here. Now when we are assigning the value, this position here, we will simply write get random position. Okay? Also, after collision, we will remove the present dumbbell component, and then after that, again, add a random dumbbell component to that game OF this number will be at a random position by default, as we have already mentioned this logic here in the onload method. Now, let's save everything and see right now that umbrella is here. And if I do it again, refresh it again, it will go there. And if I take it, see, it is just generating a random positions. Now, this is fun, I will say. And obviously does. Dumbbell sound is playing. But since I'm recording the screen, you might not be able to hear it, but I am sure that you are able to hear it in your own system. I hope you have understood the concept of collision detection. That's it for this video. See you in the next session. 11. Adding Virus components: Hi, welcome back. So until now, the game is very simple. The player can easily grab the dumbbells without facing any obstacles. We need to add some kind of challenge to our game. We are going to add two viruses which the player has to dodge. So now inside components folder create a new data file. Virus component, dot dot here. Similarly, like before, Great virus component, X dense sprite component has game reference. Fit Fighter game. We have the sprite height. Is we will mention the sprite I-T to end. And we will take the start position as an argument. It is vector to start partition. And we will take it that constructed it is, it is required like this. Now, the onLoad my third yeah. Await. And I think in the layer is there. Yeah, and I just forgot the right debate. S flight will be game ref, dark loads bright. Blue dot dot y. This sprite position will be the start position which is being sent to this component. Then weight will be same as height, which will be displayed height that is 200. Let's see how much is 200. And n is equal to anchor dots center. Now simply add this newly created virus component to the game class. Simply add wireless components. Start position right now I'm just hard-coding it. To value. We have to send and read and 150. And similarly add to why this is here. X will be size dot x -50 and size dot y -200. You can just play around with these values and understand what it does. The whole k does, right? Height is way too much. Let's give it 100. It is also very big. Let's give it a d. T. Then. If I give it 60, obviously. Yeah. '60s looking decent. No2 and it was looking very bad. Yeah. We have the virus on our screen as well. In the next video, we will work on the movement of this virus components. Thank you. 12. Adding Movement to Virus: Hi. We can see our two viruses in their corner of the screen, but they are not moving anywhere. So now we will work on adding movement to them so that the player has to dodge them and grab the dumbbells. Let's start it by going to the virus component dot dot file here. And let's create some variables. First will be laid to velocity. This will be the velocity and the speed. They will move it, 300. Obviously, we will multiply it by D, D and L. Let's create a function. To which way they turned a vector to move. Right? Now, the first line of code will generate a random angle in radians by null. Then the angle is equal to the random class dot next double into two. In Dubai. Then we have to write Kool-Aid. The sine and cos sine of the angle. Sine angle is equal to sign. And manga final cos angle is equal to cos random angle. Now, final value of velocity at x is equal to cos angle into speed. By another. Double velocity at y is equal tos sine angle in those speed. And finally, we'll return back to this will be, well, let's see d x, d x, well, let's see DY. Save it. So what is this funtion? To move a sprite in a random angle, we first need to generate a random angle. The angle is typically measured in radians, which is a unit of measurement used in geometry to describe angles. One full circle is equal to two pi radians, which is approximately 6.28 rad. So to generate the random angle in radians, we can use a random number to generate a number 0-2 pi, like this. Random dot. Next double is that my tech to college, and that is, it generates a random value between 0.0 and 1.0 by multiplying the result of nextDouble by two and Pi, we are effectively generating a random angle ingredients 0-2 pi. Once we have a random angle, we use the trigonometry to calculate the x and y velocity is the x velocity is calculated as the cosine of the angle multiplied by the speed. And the y velocity is calculated at the sine of the angle multiplied by the speed. So I have to say that this one chain i2 have Google and search through StackOverflow and all. So you just have to remember this line of code. And obviously if you want, you can research for that as well. Now, next thing we have to do is on the onload method will just write velocity is equal to move sprite. So we will get the velocity that is at what angle it will move. And now we have to create an update method. And in debt when third, we will change the position to the velocity, velocity multiplied by d t. So as you know, by multiplying the velocity variable by d t, we ensure that the sprite moves EdTech at them consistent speed, regardless of the frame rate, e.g. if the frame rate drops to 30 frames per second, that the T parameter will be one byte packet of the second sprite, we'll move velocity into one by 30 units in this frame. And similarly, if we increase it to 60, it will be into, that is velocity multiplied by one by 60 units. This just ensures that the game behaves consistently across different devices and screens. Now, Let's save everything and restart. And as you can see, the viruses are moving. So that's it. For this video. In the next videos, we will work on giving boundaries to the virus component as well as collisions. Thank you. 13. Boundaries to Virus Component: Hi. As we can see that there are viruses are going out of boundaries. Let's make sure there is some collision detection between them. For that first, add heat box to wireless component as well as the game class. So go to the virus component here. And here below velocity over just add circle hit box. In the fit Fighter game file. Here. I will add screen hit box. That is, this one is new. It any collision on the bounds of the viewport. Inflame. Screen hate box is an object that represents the bounds of that visible screen area. It is used to determine if our other game component is within the visible screen area and should be rendered to the screen. Now save it. Now in the virus component. In the wireless components. On collision method. First, we will check if that collided object is a screen heat box or not. So simply we go at the bottom. On four, on collision. We have to add lesion callbacks. And then on collision. Now we will check if that is screen hit box. Here. We will get the intersection points. As you know, there's this one. With the help of this, we will check conditionally in which direction on the screen collided, and then we will change the velocity opposite to that. Here. Let's do it like by another vector to collision point. Is it going to do intersection points, dot files? That is the first intersection point. That is as soon as it, as soon as it collided with the screen. We'll check if collision point dot x, x's value is equal to zero. That is, at the very left. Then I will change the velocity of X axis to minus velocity x-axis. And velocity dot y axis. The same one, that is velocity dot y. So I will just change the direction of the x-axis. Similarly, if lesion point.xx is equal to game ref dot size dot x, that is at the very right side. Then I will do same thing. Velocity dot x is equal to minus velocity dot x is just change the same velocity value. Velocity dot y. Is equal to velocity dot y. Then I will check if coalition point dot y is equal to zero. Velocity dot x will be same. But velocity dot y would be negative. Velocity dot y. And finally, and remember this one is at the very top of the screen. If collision point dot y is equal to game of.size.y.xy and two minus velocity dot y. Okay, Let's save everything and check out our app. Href is equal to zero. Let's see what's going on here. So that top is working. Okay, This one is not working. Let's see. C was working okay. Left, that is at the very right is not working. Is greater than equal to, let's see. Then I'm changing. Now velocity K. No, it will not be. In this section. First point. It does see it's not lesion intersection points that first this one. Okay. So left and top model working right side. And the standard it, this calculation is not correct here. Set of Dulles. As I said in bottom. The bottom is also working K. As you can see. Bottom, I'll say they're working on it. The right side is not working. It should not be less because obviously, let's see. See game ref, dot size k. Some small mistake. It should be greater than equal to this. Let's see, -60 cc. Right now it's working because -60 is the edge. As we have the sprite head at 60. That this is why. So these calculations are a little bit complex. I won't say much, but yes. So as you can see, it is working perfectly. Our viruses are colliding and moving all over the screen. Thank you. 14. Collision between Virus and Player: Hi. Now it's time we work under functionality. To flu is the movement of the player. As he got fever after he collides with any of the two virus components. We already have the fever sprite and the virus sound asset. Now, let's create some variables inside that player component. Here. First of all, let's see. They laid bright component. Player, skinny, bliss. Any notes? Let's write player skinny it first. It's bright. Layer fever. I am writing the player skinny and fever here because we will change it according to the collisions earlier we were just outputting the sprite here directly. Now on the onload method, I will write player skinny is equal to this one. Right here. Player fever is equal to same thing but only the sprite we'll change. That is, layer fevers bright. And now in the main Sprite, it will be skinny at the very beginning of the game. Okay? Now it's time we write a logic where the player will not be able to move for 3 s. After he collides with the virus. We will change this sprite image as well. Let's create new state variables as well as function for freezing and unfreezing the movement of the player. So here I will add FASTA file when Boolean virus attacked is equal to false. And I will use it. Dimer. Dimer is equal to 3 s, so it's like frozen for 3 s. We'll start this timer when the virus and the player collides. So now, let's create a function, void, freeze player plus the fall. We will check if y this is true. And we will write, no, I will post alpha level check. If virus attacked is false, then only freeze it because if it is true then already this frozen. First of all, we will play the sound global start virus sound. Play the sound at lesion. Then we will write virus attack is equal to true. Then we'll genes does right to layer fever. Change the sprite image. And finally we will start the timer C. Okay? And also we will create a function to unfreeze layer as well. We will simply change the virus attack is equal to false. And change this to player skinny again. I hope you understood these two functions. These are very basic and straightforward. Now, in the update method, we will check conditionally if player is being attacked by a virus or not. That is, if the boolean value is false, then allow the joystick movements. And if the value is three, that is, if the value is true, then update that timer and call the unfreeze player function after 3 s has passed. So here, first of all, we will just check if virus attack is false. If it is false, then only allow these codes. That is, all this code. Just cut and paste it here. Because if it is, if, if it is not attacked by a virus, then only allowed the movements. And as we will update that dimer, that is, we'll check that seconds. And if dimer is finished, that is 3 s has passed, then only colder and freeze function. Now this is also done. Finally write that on collision method for that player component. We already have the collision callback. So simply here the sleigh on collision. And we will just write if that is why this component then simply called a freeze player function. Okay. Now restart the app and see the sound. Is there. Player image, sprite freezes and we cannot move for 3 s. And if it takes the dumbbell, then it's working. And again, if it hits then its movements are restricted. It is looking very nice. I hope you have understood the working of the application as well as enjoyed building it till now. Thank you. 15. Text Component for Score: Hi. Now our game functionalities are working perfectly, but we need to let the user know how many dumbbells he has grabbed in the form of score, as well as how much time he has left to finish the game. We don't want the game to run forever. For that, let's go to the main, this big fight, their main game class. We have to create two new variables. First one will be score, which will start from zero, then late dimer, dimer, then nt. Remaining. Time is equal to 30. That is, we want the game to be off 30 s. Now we will use that tax component from flame just to output the score and time to the user. The next component, dime text. Now, in the onload, we will first mentioned that timer mode. Make it a bit repeat itself. Through on this, on every repeat. On every repeat, it will check. If remaining time is equal to zero. If it is true, then pause the engine that is paused, the game engine, everything will get stuck. Or else we will we will deduct or decrement the remaining time they distracted during 28, 27, like this. And when the game start, we will start that timer as well automatically on the onload method in NCL. So in the unload, after everything is edited, this virus component, all the timer will start. Now, let's create a text component for displaying scored and position it at the top-left. So that this text component, that text will be score audition, where they're due at the very top x-axis for d, y axis for t. Anchor will be anchored dot. Left. Decks render, text, paint. These are the properties of the text component you just have to remember or listings style, dec style. We will change that color. Basic ballot, black dot color 25. And after this, we will add the score text component to the screen. Let's, it is started. And as you can see, we have the score component on the screen. Obviously it is zero and it won't increment right now. We have to write some more logic in the update functions, which we will do in the next video. Thank you. 16. Updating score and time: Hi, Let's continue and create another text component for remaining time left here. Similarly, right? Time text is text component. X2 will be remaining dying. Seconds lesion. There too. We just said days of desk green minus four d. And for DDT is at the very right side. Anchor will be anchored top right. And then there will be text, paint paint, and then hair style. Style color, similarly basic ballot. Now, black color. Font size will read quantifying. And after this, simply add that component to the screen name text. See, time is there as well, and I will just color in here. 30-second. We can see the score and time remaining texts on the screen, but the values are not updating. Let's work on that. In the fleet Fighter game. Create the update function. After the onLoad. Create the update function. Obviously it will work similarly like any other component. The first thing we have to do is update that timer object. Then we will update the score, that score x dot x is equal to, we'll just say score. And since the score value is automatically updating here, that is in this time or not in this time where obviously we will do, we have to do something in that dumbbell component to update it? Decks to time, meaning time. That can. And here it's real time text, the text. Okay? Now in dumbbell component, when the dumbbell collides with the player, we just removed it. But now makes sure we increase that score value that this game ref dot score plus equal one. And the score variable is located in the main game class which we are accessing with the game will have as usual. Now, let's restart and see the second set, 26, 25. And if I grab the numbers, it is increasing. If you're not able to hear that sound, it's fine because I have just disability. But in your system, I am hundred percent sure that you are able to hear your sound. So that's it for this module. See you in the next video. Thank you. 17. Game Over Menu: Hi, welcome back. In this video, we will work on overlays and overlay and enables any Florida widget to be shown on top of a game instance. This makes it very easy to create things like pause, heads-up displays, or an inventory screen. So this management is done via the game dot overloads that ad and game dot overlies dot remove methods. So let's create a new folder, screens inside lib, and create a new data file. Game over menu dot dot. This screen will act as an overlay screen. Import. My TTL glass game over my new extends stateless widget. We have double method. Here. The first thing I will do is create a ID that is const. String ID is they're going to do Game Over Menu. This overlay ID is a unique identifier attached to each overlay in that screen. It is used to identify and manipulate a specific overlay, such as adding or removing it from the screen or the game. The overlay idea is usually assigned when the overlays created and Canvas string or integer value. Then we will take the game reference fit Fighter game, game href as a parameter to the constructor. You just say const. Gameover menu. Super dot t required these dart game ref. Now in double my third, let's return scaffold. These are all florida widgets. I hope you know that body. We will have a container. Then declaration will have Declaration image. Will have Declaration image. Then it will accept an image. This will be a box decoration, so they boxed equation and here it will be declaration image. Image. We have the background image, assets slash images slash blue balls, globals, backgrounds, sprite. And fit will be Box fit, dot cover. This will be the declaration. And then that child have the container will be center. Child. Then column matrix is alignment, alignment dot center. Then in that children, first thing I will have it is a text widget. And remember this is not a component is deserve flutter widgets. Game over style, style, font size 50. Other texts will be score, which will be game, game ref dot score. And here's style will be const, textile on size. They've gone. So we will give some space size, boxed, height 200. Then we will have two buttons, one to play, one to allow the user to play again, or to go back to the main menu. As I say, is the box. We will wrap the button size box just for the width and height. Width 200, height 50. Child. Elevated button. And press. It will do nothing for now. And we'll go const text layer again. Style, text style, font size, unifying. Then have a sizable just to give some spacing here, again, size box height during D. And below this size box. We load this size Vox. Let's have another size box for the button. Height. 50. Child elevated button. On press. And again, child const text. Main Menu, decks. There isn't one size 25. So that's it for the game over menu. We will display this output, this menu later on. In the next video, we will work on the main menu screen. Thank you. 18. Main Menu Screen: Hi, welcome back. So we have created the game over menu. Now, let's create another screen and name it main menu. The main menu, dot, dot. Let's start with importing material. It will be stateless, rigid. Name it main menu. And return is scaffold. In that body. Let's have a container. Let's give it a box decoration. Similarly, we'll give it a background image. This image decoration image. Simply a set image. Assets slash images slash globals. That background sprite. And b box with dot cover, mosfet dot over k. Now, the child of the container, let's have a center. Then. Give it the column main mic. X is element matrix is m dot center. That children that's have it than that is have one text that is the name of the game and also play button. And remember this is not an overlay, this is directly one screen. That is, this will be the first screen the user opens the app and sees const budding. This is just the styling. You can do whatever you want. It's all up to you. Edge insets, symmetric, vertical 50. Then child with the style textile. One size 50. Okay? And after this padding widget, let's have a size box. They give some spacing. Since I already know that you are. That's why I'm I can directly write this padding and heightened all. Obviously when you are trying to build something from scratch, you have to try and test Alda UI widgets and all. I do hundred. So this will be, this is just a button. I prefer the child elevated button. On press. Let's do nothing right now. And in that child, we have a const. Text to x is simply play and style, dec style on size 25. So that's it for the main menu as well. In the next video, we will create the gameplay screen and connect all the screens together. Thank you. 19. Game Play Screen: Hi, welcome back. So instead of calling the game widget directly in this main dot dot file, we will create a new file inside screens and name it. Gameplay dot, dot or material. Than is less rigid. Limit fit. Their game. Now we will not name it fit for diarrhea. We will just name it game play. Okay, we will name it gameplay. Then it will turn a game widget, like this game widget. And obviously we have to send an instance of a game. We will initialize the Street Fighter game here. I never fight deadly game. For the game like this. And we will send it here. We're not initializing this directly here because if we save or anything happens or if that bill methods gets called, then we lose all the data because it will again create a new instance of the fruit Fighter game. Okay? And now we will work or use the property of the game. We did that, this overlay building map. Here, we just have to assign overlay, ID, screen, Bill, contexts, context, game, game rref. And this is the game over menu. In our application, the only overlay screen is the screen, so we're just assigning the id. It's green. That is what we have to show when this idea is being called. Now we have done this. Let's go to main dot dot file. And here in the app. First of all, I will remove this initialization material app. They move the banner and the home page is the first screen will be main menu. And now go to main menu. Here. When the user clicks on the Play button, should navigate to the gameplay screen. It is navigator of context. The push replacement. Let's have the game play. As you know, gameplay. Let's see, play this, this game. The game will start. Now let's restart our app. As, as you can see, the green is the game intro screen, that is the name. This logo is already there, already there in the background. And we have the play button. If we click on play C, We can now play. Okay. I will just pause the game engine. Now we have to take use of the overlay scheme, that is game over screen. We have to call it after that timer or the game ends. So go to weight fighter game here. And here. When we are, when we are cutting the pause engine simply overlays dot add. And we have to give the ID game over menu dot ID like this. And this will show him Game Over Menu. And also, let's create a function at the very bottom to reset the game. That is, if the user wants to play it again, then we will just start. We will just assign that score to zero and remaining time is equal to 30 s. Finally, go to GameOver menu and allow user to play again as well is go to main menu screen. Here. When the user click on the Play again. In first stop, we will move the overlay. It is game, our menu that id. Then we will call the reset function, which we just mentioned are created. And after that, we will resume the engine. That's it. These are the three steps. And what if the user wants to go back to the main menu? We will again, first of all, remove the overlay GameOver ID like this. Then we have to call the set. Then we will resume the game. But after that, we will simply Use the pus push replacement and send a user main menu. Like this. I hope you can see the code. This is the code. When the user wants to go to the main menu. Let's restart and check all the functionalities. If I click on play. And let's see after 30 s. So what happens? This final, I will say. Now, see, we have the game over menu. We can see that score. And if we simply click on play again, then the score is zero. And we have that dimer. Again starting that is from Tatu. And now again, what happens if you click on Main Menu, then we're sent back to the main menu screen. That's it. That's it for that game. Overlays. See you in the next video. 20. Change Player Sprite Conditionally: So until now, when player grabs it, we increase that score. But why not make it interesting? Let's change the sprite image as well. The more he scores, the more muscular he becomes. Since everyone knows weightlifting belts, muscles. So let's try to implement that. Go-to player component file. Let's create two new state variables for other sprites. By layer. Weight. Late sprite, blair, muscular, k. Let's load the sprite image in those variables. Have the onload here. Just copy and paste two times. Weight will be player fits bright and clear, muscular Live Player muscular sprite k. Now, instead of calling sprites here, directly, this here. And also in the freeze function. Here we are changing the sprite image. Let's create the function which conditionally rendered sprite. What I mean is at k, Let's create here wide player sprite. We will first check if attacked by a virus. Then sprite will be player fever. Then we will check if game ref dot score of greater than five and less than equal to ten, it is 5-10. Dance changed to player for it. Okay? Similarly, Jack else-if game ref dot score greater than ten, then change the sprite to player muscular. Or else finally, sign the starting sprite, the display skinning does sprite. Now we have mentioned this function, let's call this function in order to render the sprites everywhere. First, go to the onload method. Here. Instead of calling sprayed like this, simply call the function. Then go to update. We'll just make sure we're calling the function here. That is, if it is not attacked by a virus, then it will check that score and that function will be called again and again. Then go to unfreeze here. Let's call that function. So after the virus attack is false, again, the sprite will change. Similarly go to freeze. Here. We will change the sprite image like this. And also why not decrement that score when attacked by the virus, which means that he will lose his muscles after getting beaver or cold from that virus. Since the score will decrease, as well as the sprite will also change too skinny. In the end. Who we will just check if game ref dot score. If it is greater than zero, then only decremented, it will go to negative. Like this. As simple as that. Okay, let's refresh. Or you can set a start. And let's check what happens. Okay, see, the score went down. But now I am six then my sprite image change to fit. And obviously I see, As you can see, the sprite image was changed and also it again got changed. And finally, the game over. But now you will see what will happen if I play again. Most of the time. I will show you what I mean. Weight. Go to FIT, fight that again. I will remove the virus or ones. Let's see. I will show you they have that muscular sprite right now. Wow, if there is no address, then we can score so much. But now, what happens if I click on Clear again, see if we replay or go to Main Menu, then the sprite image is not changed to default. It is the skinny. At the very beginning. As when gaming Genie's past update function stopped working for every component. To fix that issue, let's create a state variable for Player component. Grades. Go to our code. Go to fit by delta. Here. Let's grid layer component, player component, okay? Then onload. We will first off, initialize the player component like this and then add it so that we can change this layer component directly since it's a state variable not inside the function. Okay. Let's change that sprite image to default in the reset function. Here. Let's reset player component dots sprite is equal to await loads bright. Let's make it a sink. Globals. Skinny sprite. Lead series started. And let's check that game again. Let's say 4/32. Just bear with me. I will create a high score like this. Okay, now, let's wait for the timer to end. Now, this time, if I click on Play again, see that image is again reset to skinning. So I hope you have understood the concepts, why I'm doing this, why I'm doing that. And again, I will uncomment the virus component. So that's it for this video. See you in the next session. 21. Create a Vaccine component: Hi, let us make the game more interesting. We will add a vaccine component at random interval and vendor user grabs it. He will be immune to virus for few seconds. This sounds so interesting, right? Let's implement it. Inside components. Create a new file. Vaccine component, dot, dot, copy and paste complete code from the virus component. So let's go copy everything. Paste it here. Let us see. Let's change it to vaccine component. Sin component. We have the vector speed in the onLoad change, thus bright to vaccines sprite. Position, start position. Weight is equal to height, okay? And that is all to anchor the center. Okay? Everything is good. That code is very similar to basically divide this component, we will only change the sprite image and that collision detection part rating is same. Okay, we have the Move spray, this is also same. Let's go to the collision. Here. Below the green hate will just check if there is layer component. Then remove this from the parent, will just remove this vaccine component. Okay, Save it. Now, let's work on the collision between player and a vaccine. Go-to player component. We have to make changes here as well for the vaccine to work. First of all, let's create a state variable. This boolean is vaccinated, is equal to false. So here we will just check if player is vaccinated, which means immune to why this. We don't have any we have on collision and this Yeah. If there is virus, we will just say if he's not vaccinated, then only frees him. Adults don't freeze the player because he is, he already grabbed the vaccine. And we will also write, if there is a vaccine component, then we will create a function inject waxen. Let's create functions for vaccines. The very bottom, I will write wide, and I will create this inject vaccine. Plus the four levels. Check. That is, just write the comment first. Don't execute if y, this is if blade is raised by the virus, it is if not attacked. Not why this attack, then James is vaccinated, is equal to Drew. And play the audio. Globals vaccine sound 0, K. And another function remove x in. We'll just change, is vaccinated is equal to false here. Nothing much. So, yeah, we have done a lot of changes. So that's it for this video. Let's continue making more necessary changes in the next video. Thank you. 22. Add Vaccine at random intervals: Let's continue and make the necessary changes in the game class for the vaccine component to work. Let's go to Fit Fighter game. We have to create new state variables. First of all, I will initialize the vaccine component. It is fine. Vaccine component, z component. We have just mentioned the start position. I will just write vector two, x axis to enrich y-axis 200. Then I will write in vaccine immunity, dy is equal to four. This means vaccine will give immunity, or you can say we'll work on that player on leave for 4 s. After that, he will be affected by the virus than late vaccine dimer. So this is the timer object for the vaccine. We will check that is for second is over or not. And then we will have vaccine time. Parents will make it more interesting because we will gave random time for the vaccine to FPS. So even we don't know when the vaccine will appear on in the game. And every time it will appear in different, different time you can say because that gamer is off parties seconds. Now. Let's go to the onload. Here. In the onload we will just write vaccine. Time appearance is equal to random dot next int. And we will write remaining time -20 plus 20. This way is that time for the first vaccine will appear. See here, as you can see, random next gives a random integer. If we directly write the value here that is ten, then it will give a value which is greater than, equal to zero and less than ten. But since the game is of 30 s, I want the first to appear anytime between 20/32 so that we have still time left for another vaccine to appear. Suppose here the vaccine, if the random was chosen 5 s, then in the whole game, only one vaccine will appear. This is my own choice. It's up to you. And here see what happens. If I do something like next in the hundred plus 50, value is greater than 50, since I've also added 20. So value will be greater than 20, and here it will be less than 150, the addition of both. So suppose here remaining time is tagged t minus 2010 plus 2030. So I simply, this calculation means it should be greater than 20 and less than 30. Now, after this, we have to make changes in that previous timer object. Here, this timer object. And check if that game remaining time is equal to the random vaccine appearance type. If yes, then add the vaccine component. So what I will do is I will first check if the remaining time is equal to zero. Pause in Qian, okay? Well, I'll just put it out. Here I will check else, if remaining time equal to vaccine dimer parents. Then add vaccine component. And we have the vaccine component and that top like this. Okay? So suppose the mania, that virus vaccine time, that is this one was supposed to Indy five suppose. So when that timer ticks 302-920-8206, then when it goes to 25, we will add the vaccine component to that game. And also, let's create a new timer object for vaccine. Here. Below this timer. Let's write vaccine timer is equal to one. Repeat on ****. Should be true. On every tick will check if vaccine immunity time is equal to zero. That is, the vaccine is over. If not, then decrement the vaccine immunity time by one, the taste for second three, second two, second 1 s. And if it is over, first of all, I will write player component that remove vaccine function. That is, I hope you remember. C, We will change each vaccine that is equal to false. Okay? After that, I will again write vaccine immunity time is equal to four again. Then I will add vaccine. Appearance, tying the test vaccine time and parents is zero. This is done for the conditional check. We will do later on to again show the vaccine. Here. Again said immunity, time for remove. Vaccine function in the player class. Okay. Then I just want this timer, vaccine timer to stop. That is I don't want it to again and again go forever. Okay. Now, finally in the update method, check if player is vaccinated and if VS then keep running that timer object. And if vaccine time, a parent's value is zero, that means that immunity effect is over. That, again, create a random time for the vaccine to a pair in that game. You will understand, Wait, let's go to the update function. Will check if component is vaccinated. Then we will just update the vaccine timer. This week. We'll way then it will have Enda functions. And else-if vaccine die appearance is equal to zero. Then we will just check if remaining time of the game is greater than 3 s at least. Then again ADA. Then again, add the vaccine to the game that is random. Dot next int. Remaining time -3 s plus three. This new vaccine. Parents. Rents time. Okay? So here we just read at least the time the game should be greater than 3 s. At least. Here I hope you understand again. So greater than 3 s and whatever the remaining time is supposed to in this second or whatever. It will again get a random number. And because of this, we still have this timer and it will check if remaining time is equal to vaccine time and it will again at the vaccine component. So the loop will go on and on until the game over. And in that reset method we are giving the score layer. We have the remaining time. Let's write req seen. Immunity time is equal to four. And we'll remove the vaccine component from here. K lot of code I know, but you have to understand the concept. Finally, go-to player component in the inject vaccine. Will check if it is not that okay. After playing, will simply write game ref, dot vaccine timer, dot start. I hope you saw that. Here. We write the vaccine timer, but we're not calling it here. That is, we are not starting the vaccine timer. We will only started if top layer component is collided with the vaccine component. Let's say, Well, okay, let's run that again. Let's see, we are getting any editor or the game is working. Let's keep our fingers crossed. Let's play. See, we have that vaccine component, but since I was attacked by the virus, it didn't work. But let's wait. I guess there will be another time the vaccine component will appear. It they're paired with again. Let's play again. See. Now I have the vaccine component and nothing is happening to me. But after 4 s, again, I'm being attacked. So that means that we're at least the vaccine component. It is working perfectly. Let's see. Does the vaccine appeared again or not? It's not necessarily okay, It appeared. See finally, this functionality is working flawlessly. I hope you have enjoyed as well as understood that concept. If not, please try to check that codes again before moving to another section. Thank you. 23. Work on Protein Component: Hi, welcome back. So the last twist we will add in the game is a protein component. As muscle building and protein intake goes hand in hand. Basically here, a protein supplement will appear at random time for only once per game. And if the player graphs it before it disappears, then he gets random bonus code increment that can be any value 0-8. This will create curiosity. So let's do it. Let's create a new file inside components, namely protein component dot dot care. Copy and paste the complete code from vaccine. Here. Just copy everything and paste it. Obviously let's change it to Protein. Come for an n, k. And in the onLoad, we will have dub proteins bright here and end up on collision. We will simply write if other is Player component, suppose. Then obviously we will remove this component or object from the screen, but we will also increment the score. So to get the random score, we already have implemented this so many times. And I'm bonus score is we'll do random class dot next int nine. So here, 0-8. Since nine is excluded, 0-8, it can generate any random bonus. And we will simply increment does called Game ref, dot score, plastic coil, random bonus. So just imagine the user don't know that he might get unlucky zeros core, depend upon his luck. Now we have to make necessary changes in the game class again. So let's go to Fit Fighter game. Here. Let's create new state variables for protein. So here just like what the protein component. First of all, let's initialize it. Protein component is equal to and let's give the start position. Similarly as 200.400 K. And if you want, you can also generate random start positions, but you know how to implement it, It's up to you. Let's write Protein. Protein. Time. Left is equal to four, which means protein will automatically disappear after 4 s. So here, the user has to grab it within 4 s. We'll have a dimer of protein as well. Today. Dean. Dimer. Then let's have dy. My parents, this will be random time for the protein to be. Okay. And finally, we will just say protein bonus. Let's see. What is the protein bonus so that we can keep that track, keep track of any bonus so that we can display it to the user later on. That, how what is the exact bonus amount he got? So here below the vaccine time, my parents, Let's write protein dimer parents is equal to random dot next int, remaining time minus five plus five. Which simply means time should be greater than 5 s and less than 30 s. Okay? Similarly, this happen. Let's make it fine. Routine time my parents here. Similarly like before, we'll make changes in that game timer. Object to check. If that game remaining time is equal to the random protein appearance time. If VS, then add the protein component in the screen. So let's go here. First. We are checking as if remaining time is equal to vaccine. And here again we'll check else-if remaining time is equal to routine time appearance. Then add the protein component and we will also start that protein dimer. Okay? Now, let's create the protein timer. All this works the same way we have created the vaccine dimer earlier. One repeat is equal to true. On tick. We will check if protein dime left is equal to zero, that this time is over, then simply remove the protein component. But the next game just said put in time left is equal to false, r is equal to four. We shouldn't make it final. And we will stop the protein timer. If it is zero. Else-if simply decrement that I imagined that these 4321, like this **** left minus equal 10 k. So we have implemented to add that protein component. Start the timer at dimer will start. Let's update that dimer if protein component is added to the game. Here. We'll just write if protein component is loaded, that is, it is in the game. Then protein timer dot update DT. Okay, and then we have to make some changes. Now it is set. Because we really said that protein time left, remove the component and also assign a random time for the next game play. If the player played, again. Simply, VS Code is equal to this open component, vaccine component. That's here like Dean, time left for protein component removed from parent. Routine. Diamond Princess is equal to random. Nextint, remaining time minus five plus five. I hope you understand that we are again resetting the time because if the user plays it again, then the onload method will not be called. That is the reason. Now, after that, Let's say when go to protein component, we have to dub dub protein timer. If protein collides with the player component, play the sound and also update that bonus value in that protein bonus variable. Here. If it is, then we will play audio, play globals, the proteins sound. Then we will simply stopped up protein timer. And since we are, since the protein will appear only once, that is why there is no issue of stop and start timer again and again. And we will just say game OF that protein bonus is going to do random bonus score. And we will display that bonus value in that game over menu. So let's go to the game over my new below that score. Below that score. Let's say text. Inside that decks. In the biosynthesis emulate protein bonus. Then game OF protein bonus. Give some form says const. Textile on size 20. Make it small. Let's save everything and see if the protein is there or not. And just for simplicity, I will remove the virus vaccines or a virus so that it's easier to test. The game. We have here is here. It's checked out. I will play, let's say obviously King. But I took delta x in C. The protein component is there. And if I take it, I got a very good score, I guess. And this we can check. In the game over c, I get the protein bonuses eight. If I play again. Let us see this. Obviously if I take the vaccine also nothing we see. Now I guess protein bonus was zero, I believe. So I have to say it is very fun. See, protein bonus was zero this time. So it's all up to his luck. I will play again. And this time, if I don't take the vaccine, Let's see what will happen. We'll just wait for the vaccine to appear. Okay, By mistake, I took the vaccine. Vaccine, sorry, protein. So protein was for I believe this is enough. Everything is working very nicely. I'm satisfied with the game. So that is all about that game. In the next video, we will simply work on the splash screen just to make it look beautiful. Thank you. 24. Add a Splash Screen: Hi, welcome back. Our game is completed. Let's add a few extra stuff, like a splash screen. That game will look beautiful and professional with this small add-ons. Go to bob dot dev and type animated splash screen. Here we have this one. Yes. Copy the dependency and add it to the Pub spec dot YAML file. And anyway, that splash screen package inverter is a pre-built solution that provides a customizable animated splash screen for our screen. So far that thus greens simply create a new file and name it game. Glass. Green dot dot import material. Then create a stateless rigid naming game. Splash screen. Here we will return the animated splash screen. So some of the common properties and arguments we might encounter when working with animated splash screen, our duration, a duration value. Iteration value specifies how long the splash screen will be there. So let's write the duration to 2 s. Then. The next is slash, any widget that specifies the image, logo, or text to display on the splash screen. So splash, we will simply write image, dot set, then assets, images, game, logo, dot PNG. Then we have the next screen. That means where to navigate. After that, the duration of the splashes over after 2 s. With some go to const main menu. Then this will change the icon size, 25250, and change the background color to colors dark black. And also let's write splash transition. That is the effect or less pleasant transition. Let's start with scale transition. Okay? Let's assign this menu into the home. Simply write game, splash screen. Let's save all and check. See, does splash screens there and after 2 s, our gameplay menu is there. So I will again restart and see this was the effect rituals and it is looking very nice. I will say, if you want, you can try different transitions. It's up to you. And you can also change the app logo or any background or that color. Obviously, it's your own creativity. So that's it for this video. In the next video, we will change that launcher icon, enqueue. 25. Change the launcher icon: Hi, welcome to the final video of this course. We will work on changing the app name as well as the launcher icon. So if you go to the app and if you go out, then you can see here this is the app name and this is the launcher icon. To change the name of our app in Android. Go to directory Android app than source, than mean. Then Android manifest file. And here you can find this application label here. Just change it to weight fighter. That is, it has space as well as capitals. So this was for the app name. Now, to change the default platter app icon, we will use the package name is plotter launcher icons. So let's go here. Right? Launcher. Now I'm sure I can. It's a recommended approach that does all the heavy lifting of updating the app launcher icons for different platforms. So let's simply go copy the dependency in your puffs back that YAML file. Simply, simply paste it. But remember, we have to paste this inside the dev dependencies and not under dependencies. So here below lottery lens, simply paste and save it. Now. Okay, Wait, it is still getting okay, instant. Now, to make it work, we have to add some Florida configurations inside this Pub spec dot YAML file. So below, here, we have to go exactly below that dev dependencies. Remember, and write letter icons. And I'm telling you again and again, this Pub spec that YAML file is very sensitive. If you do any extra space and all, you might get us. Now, click one space. Our we'd give tab, okay. Give tab. And write Android to do iOS. Through image. Part that part of the icon. I will decide assets, images, the game logo, dot PNG, and then minimum as the K and ride. And we'll use 21. And I get these codes in the Read Me section. C. You can understand how it's done, how it's in the dev dependencies, this flood, Florida icons and all 0, k. We have save everything. After setting up the configuration, all that is left it is to run that package with the help of a command appended terminal and simply write, obviously we have this platter get again and again. And after this simply write letter. Bob. Run, Flutter, launcher, icons and presenter. Oh, hey, let's see. I guess I believe it's done. I'm not sure Wesley successfully generated launcher icons. We have to stop that debug mode and then run again. Let's see. Daikon is updated or not. If I go see we have the fruit bite, their app name, and the icon tack and is looking really beautiful. I will say, if I go, obviously we can play the game. Obviously I have a move that I will say that again. The virus components, this is the game we can play. We have a reading. So that's it. For this course. I hope you have enjoyed as well as learned a lot. Keep practicing. And I will make sure to make code more courses on lame game engine and build beautiful games. Or you can say more interactive games in the future. In the meanwhile. You can also check out my other courses as well. Thank you. Have a nice day. 26. Test the Complete game: Wow.