Flappy Bird Code
Keena Wiegert
It has pixel perfect collisions, accurate quadratic physics, and smooth color animations, all in 457 bytes worth of purely independent offline Javascript code, shown ungolfed here in greater detail and explanation:
Certainly not the prettiest entry, but it captures the core mechanics of flappy bird: The bird accelerates downwards, pressing a key makes him jump up, touching the pipes or the edges of the screen ends the game, score is the number of cleared pipes.
In this tutorial, I will demonstrate how to make a basic 2D game in Java by writing a basic Flappy Bird game. The time it takes you to complete the tutorial is almost wholly dependent on your Java skill-level. My goal is 1-2 hours for you to accomplish at an intermediate skill level. If you're a beginner, don't be alarmed! I provide all code you need alongside conceptual explanations to guide you through this process.
I hope to show how simple a basic game is to make when you have a few hours on your hands. I go into every programming project with the desire to learn something new - this project taught me a few tricks. I hope it does the same for you.
With that being said, let's dive right in, starting with a demo of the game you will make! (without the music, of course) You can download the .jar file (and project source code) at the end of this step to play with.
This is always the first stage of building any game. Here you make sketches and draft ideas on your game's functionality. Never start a game by programming. Your code will be written and rewritten wasting a significant amount of time. Take time to put together a "95% model," which has everything you think your game will need on the conceptual level. You will inevitably think of added functionality while programming, so have the vast majority of the concept finalized beforehand.
Because my game idea was remaking the popular Flappy Bird, this stage was limited to designing the graphics to be used in the program. I designed a static blue bird and a pipe for the obstacle. I rotated the pipe 180 degrees and used two separate images for the top and bottom pipes. All three images are found above and they should be named as follows:
I wouldn't grab the step's images above for your program. Instead, extract the images from the .zip I include below this step to ensure you have exactly what is needed. You should place the images in a folder called "resources" which you will place under the bin folder in your program's files. This is only necessary based on the code I provide; however you may change the folder name to something of your preference.
I used Photoshop Elements to design the images. One important factor to remember in designing your graphics, should you choose to do so, is to use only interlaced png images and remove the background from your images. This ensures the transparency of everything besides your graphic.
In the concept building phase, you should also get an idea of the GUI layout and general gameplay characteristics of the game you will write. For example, in this game, I envisioned the game to begin on a splash screen. The background would be the same as the game's background (moving pipes from right to left). In the center of the screen will be a button to click when you're ready to play, and every time a round begins, you will fade to and from a black screen. This can all be seen in the demo video I provided in the previous step.
Your game needs several things to function: the player, the enemies, the obstacles, ability handle user input, and detect collisions. In addition, you need something to create the game loop - a process that periodically updates everything in the game.
Now we must sketch out the classes we expect to require. At a minimum, we will need one class that handles building the GUI, the game clock (the game loop), and game logic (collect and handle user input & collisions). You should also have one class for every unique player, enemy, or obstacle. Unique is important - write one class for the enemy, then create an instance of this class for each enemy needed.
Your programming environment is the medium you use to translate your code into something your computer understands. There are a few IDEs (Integrated Development Environments) I'm familiar with. First is BlueJ, which would be my recommendation to use for the newest programmers. After you are comfortable with programming, I'd start using Eclipse or NetBeans - they have handy features like auto-completion. As a side note for these two: you want the SE version not the EE version. EE is for web developers.
The main method simply creates a new thread from which the GUI-building and general game function operates. You need to run your game in another thread to allow the GUI to stay functional. If you didn't do this, the game loop would lock up the interface, not allowing the user to close the program while playing the game.
Since we're starting with the skeleton of classes, we now advance to writing the player and obstacle classes. By default, we must know that these classes serve a basic purpose: load the resource image used by the object, scale the image to the desired dimensions, get and set the X and Y coordinates (the upper left-hand corner of the images; xLoc and yLoc), and get the width and height of the object's image.
Because I've already completed this project, I'm going to drop a spoiler on you all: for collision detection, explained in a later step, you will also need a method that returns a rectangle that encompasses the object, as well as a method that returns the object's BufferedImage. Now that you know everything that's required, I will give you the full code for the Bird, BottomPipe, and TopPipe classes. All three classes are identically structured, differing only in naming conventions.
When the classes are first instantiated, the desired width and height of the images are passed to the classes in the constructor, which will automatically scale the image by calling the scale method. Lastly, you'll notice there are getWidth and getHeight methods that contain a try/catch block. This is to help with preventing logic issues in TopClass.
You may notice when you create the BufferedImage object, it is created using the ARGB type. This is based on the desire for an alpha channel to be included. You will see why in the collision detection step.
A few items of note in this code is as follows. Firstly, this particular class extends the JPanel class, meaning this class may be treated as if it is a JPanel itself. As it is a JPanel, it will be added to the JFrame as discussed in the next step.
The screenWidth and screenHeight are passed into this class when instantiated, as well as a boolean that is used to indicate whether the splash screen is the screen currently in use. It's useful to recognize that the splash screen and the game screen differ by only the bird's presence. This means, you may reuse code!
At this point, all of the classes you need are created; you just need to flesh out TopClass and PlayGameScreen. Starting with TopClass, we will complete the GUI by finishing the createContentPane() method, as well as adding the ActionListener.
In create content pane, we first set the topPanel's background color to black because when we fade the game's screen at the start of a round, it is topPanel that is shown. Next we create an OverlayLayout, which is beneficial because we can make sure the button is on top of the graphic panel, which is not otherwise attainable. Following this, we instantiate the button, a global variable, change a few of its settings, add an ActionListener, then add the button to topPanel. Finally, we instantiate our global PlayGameScreen variable, passing in the screen width, screen height, and a boolean indicating we want the splash screen.
As part of implementing TopClass with ActionListener, we need to create the public method actionPerformed(ActionEvent e). This allows us the ability to process an action that has occurred (i.e. the button being clicked).
We begin by discussing the addition of the gameScreen method in TopClass - this is where the game clock resides. First, create two instances of BottomPipe and TopPipe. As soon as one set of pipes exits the screen, they will be repositioned so they come back onscreen. You can set the pipe width and height variables to whatever you want, but I based them on screen size to optimize the game for different screen sizes.
The xLoc1, xLoc2, yLoc1, and yLoc2 variables reference the coordinates of the two BottomPipe objects; the TopPipe objects' locations will be relative to the BottomPipe locations. I created a helper method called bottomPipeLoc() that generates a random integer that will be used for the BottomPipe y coordinate. This number must allow both the TopPipe and BottomPipe objects to remain onscreen.
On the next line of code we create a variable of type long to hold the current system time - this gives us a value for the time the game clock starts. This variable is updated at the end of each iteration of the game clock in the IF statement to store subsequent start times of each game clock iteration. The principle of the game clock is to keep iterating through the while loop until the difference between the current system time and the iteration start time is greater than a predetermined value (in milliseconds). The game clock will keep iterating as long as loopVar is true; this will only be changed to false when some form of collision is detected.
The game clock code includes comments to explain what's going on there. The order is: update element locations, then parse those updated elements to the class that draws them, and finally actually update the panel to see the changes.
Below, you will see the updated PlayGameScreen class that reflects the addition of the setter methods used above. We will add a little bit of code to flesh out the paintComponent method as well. First we sequentially set the graphics color and create the rectangle for the sky and ground, then draw the black line between them. Next we draw the BottomPipe and TopPipe items. These elements must not be null (i.e. they must have been created) in order to draw them.
03c5feb9e7