Gift Grab Game
Gift Grab Game - Sorry, we just need to make sure you're not a robot. For best results, please make sure your browser accepts cookies. Sorry, we just need to make sure you're not a robot. For best results, please make sure your browser accepts cookies. The blind die squishy can be rolled, tossed, spun, or even bounced!
Source: giftgrabgame.files.wordpress.com
Gift Grab Game
No more tearing up pieces of paper to write numbers! With Flame, you can create your own 2D games while controlling the modular approach to coding in Flutter. The Flame Engine provides out of the box components such as images, sprites, inputs, animations, collision detection, and more.
Today, I will show you how to create a simple 2D game called Gift Grab, where Santa must collect as many gifts as he can in 30 seconds. To dive right into the code, the entire project is available on my Github. Feel Jump to the fork and play around.
Also, you can watch this whole tutorial on YouTube, (if you want to see my handsome face instead of just reading the text). Last but not least, I encourage you to download the actual game for Android and iOS; see if you can beat the score of 20. Before we jump into the project, I'd first like to shout out two YouTube channels that I watched while developing this app.
Enter The Characters You See Below
They gave me the understanding I needed on how to use Flame, and did a great job of explaining everything. Those two channels are DevKage & CraigOda; make sure to follow their channel to see how they made their game well. With that said, if you're not familiar with Flame, let me give you a quick heads up.
Flame is a 2D game engine that allows you to create your own video games. It integrates perfectly with Flutter, so you know that it is very modular in its approach to development. This framework is the first that I have ever used to make a game, and the process was super simple.
So without further ado, let's jump into the code. First, we need to download our package from pub.dev. We need two packages, Flame 1.5.0 and Flame Audio 1.3.3. Flame is what we need for live game development, while Flame Audio is an additional package needed to play audio files.
You can download the package below. Go into your pubspec.yaml file, and add both packages. Also, make sure you specify the directory of your audio and image files below. This is where we will save the sound files to be used for the game. The assets for the game are the images and audio files that we will use.
Enter The Characters You See Below
You can download the assets for this project from this project's Github. It contains images for several Santas, ice blocks, gifts, and a snowy background, while it has frozen sounds and grappling sounds for the audio. First of all, we need to create a Game.
At this point, you should have an empty Flutter project, (if not, run the flutter command to create gift_grab, then open the project in VSCode). In the game directory, create a new file called gift_grab_game.dart. Create a new class called GiftGrabGame that will extend the FlameGame class.
Source: i.pinimg.com
We then need to modify the file main.dart. We will instantiate the GiftGrabGame class, then pass the instance to GameWidget. Now if we run the app on our iPad Pro simulator, we should see a blank screen. A blank screen is nice, but we don't want Santa playing on a dark canvas.
Instead, let's add our snowy background. We can do this by creating a new BackgroundComponent. In order to determine the path of the background image, we can create a list of constants to make it easier. In the constants directory, create a new file called globals.dart.
Shout Outs
Create a new class called Global. Here, we can create a constant string variable that will represent the path to our image and audio files. Next, in the lib directory, create a new directory called components. Create a new class called BackgroundComponent that will extend the SpriteComponent class.
It will also include the HasGameRef mixin, which will allow us to have a reference to the Game property, as well as other properties to display the image correctly. We will then determine the sprite of this class, as well as determine its size. Now let's go back to the GiftGrabGame class.
We can create an instance of BackgroundComponent, and then add it to GiftGrabGame. Now if we run the app again, we should see the background has been applied. We can not have a game where Santa collects gifts without Santa himself right? To do this, we first need to add a sprite for Santa.
Source: www.mytuesdaytherapy.com
Back in our globals.dart file, we will add a path to the santaIdleSprite, which will be the image when Santa is standing still. Then, we create a new component in our component directory called santa_component.dart. This will have the same properties as BackgroundComponent, but will include a few more such as position, width, height, and anchor.
What Is Flame?
Now if we run the app again, we should see that Santa has been added. Now, Santa is just silent, (no pun intended). We need to give him some movement so he can actually grab the prize. We need to create a directory inputs, then create a new file called joystick.dart.
This will provide our JoystickComponent, which will be the joystick we use to navigate Santa throughout the game. We can specify the size of the knobs as well as the color. Let's go ahead and add a joystick to GiftGrabGame as well. Remember that to use the joystick, we also need to add a mixin called HasDraggables to GiftGrabGame, in order to use gesture detection on the joystick.
Now if we run the application again, we should see that the joystick has been added to the bottom left corner of the screen. It's time to connect the joystick to Santa so he can move. We need to go back to our globals.dart file and add two new sprites to represent Santa moving left and right.
Now we need to go and modify our SantaComponent. Let's go back to the santa_component.dart file. We are going to make some adjustments to this file, which include; Finally, we can update GiftGrabGame and move the joystick to SantaComponent. Now if we run the app again, we should see that Santa is moving when we tilt the joystick.
christmas grab bag exchange games, gift exchange games for groups, fun christmas gift exchange games, christmas party gift exchange games, grab bag gift exchange game, unisex grab bag gift ideas, free printable gift exchange games, gift exchange game ideas