How to make a game with Processing (Game Development)

13Apr, 2016

In this tutorial, we would be going into game development by creating a simple game using Processing IDE. The game features a bouncing ball with a Paddle to catch the bouncing ball. In order to understand this tutorial, you need to have a basic knowledge of programming, preferably in Java.
For this game development tutorial, you would need to download Processing IDE from Processing Website

Here’s what you are going to be creating

 

First of all before we begin, I’ll like to say “If you are already a programmer, it’s very normal for your mind to think you cannot go on with a game development project all because it seems too complex”. But for me, the way I overcome such thoughts is I decide to break the project down to steps and just start. If I get stuck in a step, I’ll seek help for that step.
The first step in game development in processsing is to create the skeleton of the game, so open processing and type in following


 

The first method above which is the setup() method is executed once, so basically code that you wish to execute just once should go there. (These are mainly codes that initialize variables or instantiate classes).

The second method which is the draw() method is executed continuously, so code that you wish to execute repeatedly should go here (Basically the visible items or items that are drawn on the screen go here.).
Next step is to set the size of the game window. For this tutorial, I’ll be using 600 by 400 pixels, and since we want this code to be executed once, it should be in the setup() method. So copy this code to the setup method.

 

Next, we create the basic variables we would need in this simple game. Since we want them to be executed just once and we need to access them from the draw() method, then we need to put them as field/member variables (This means you don’t put them in any method). Copy the following code and paste just before the setup method.


 

 

The first and second variables would be used to control the X and Y position of the ball, while the third and fourth variables would be used to control the direction of the ball.
Next step would be to draw the ball and paint the background. And since we want the background and the ball code to be executed continuously, we put them both in the draw method. So paste the following code in the draw method.

 

 

The background method takes 3 parameters. The parameters represents Red, Green and Blue respectively. So 255,255,0 simply means: mix 100% red, 100% green and 0% blue together. This should give the yellow color.
The ellipse method takes 4 parameters.
Parameter 1 is The X position of the ball
Parameter 2 is the Y position of the ball
Parameter 3 is the X size of the ball
Parameter 4 is the Y size of the ball
I replaced parameter 1 and 2 with the variables because I actually want the X and Y positions of the ball to change (When the ball moves). If the ball was static, then its okay to write ellipse(300, 100, 20, 20);.
Note: In programming, any parameter that is expected to change during runtime should be stored as a variable. If the parameter is expected to be constant, then it can be hardcoded.
The next step is to create the paddle, so for this you would need to paste the following code in the draw method:

The fill() method is very similar to the background() method except its job is to paint any object that was created after it the color you specified. I wanted to paint the paddle and the ball black, so I put this method on top.
The rect() method accepts 4 parameters also similar to the ellipse() method. mouseX is what you can call a magic variable. This is because it acts like a variable but you really don’t need to declare it. This variable stores the X position of your mouse. Some other magic variables include:
• mouseY – Stores the Y position of the mouse
• width – Stores the width of the screen
• height – Stores the height of the screen
So since I wanted the paddle to move only left and right, but never up or down, I replaced the X parameter with the magic variable that stores the X position of the mouse. This simply means the paddle would go in the horizontal direction of the mouse.
The next step would be the main logic and I consider it the part that could confuse you. This is normal. We need a series of If statements for the logic, so copy the following code to the draw() method:

 

It might look annoyingly confusing, but I’ll try my best to explain it statement by statement. The first if statement simply checks if the ball has touched the bottom of the screen. If it has, then the ball should go back in the opposite direction which is up. To make the ball go up, we need to subtract from ballY that’s why we are equating dirY to -2.

 

The next else if () statement checks if the ball has touched the top of the screen, if it has, then the ball should go back in the opposite direction which is down. To make the ball go down, we need to add to ballY that’s why I am equating dirY to 4.

 

The next else if() statement is used to check if the ball has made a collision with the paddle. Of course there are easier ways to detect collisions in processing by using libraries but this is just to know the basics of how these libraries work.
Since the vertical position of the paddle is 380px, the horizontal position of the paddle at any point is always = mouseX and the width of the paddle is 80px. Then it would be right to say that the horizontal area contained by the paddle at any point in the game would always be equal to mouseX + 80. So to check for collisions, all we need to do is to check if the ball is in the area of the paddle. So if there is collision between the ball and the paddle, the ball should go back up, that is why I am subtracting from dirY.4

 

Then the else statement simply adds dirY to ballY at any point that the above statements is false.

 

The next set of if statements are similar to the above except they are for the X axis.
The next if statement checks if the ball has touched the left of the screen. If it has, then the ball should go back in the opposite direction which is right. To make the ball go right, we need to add to ballX that’s why we are equating dirX to 2.

 

 

The next else if statement checks if the ball has touched the right of the screen. If it has, then the ball should go back in the opposite direction which is left. To make the ball go left, we need to subtract from ballX that’s why we are equating dirX to -2.

 

Similarly, the else statement simply adds dirX to ballX at any point that the above statements are false.

 

And now you have successfully created a nice bouncing ball game. Here’s the complete code, you can just copy and paste.

 

Here are some things you can try for your understanding
• Change the values in the background(), ellipse() and rect() methods.
• Move the background() method from draw() to setup()
• Change the values of dirX and dirY.
Please feel free to ask your questions in the comment box below:)


8 Comments

  • Peter Craig Lloyd June 14, 2016 @ 3:18 am

    hey man I was wondering what code you would use to make where if the ball hits the bottom of the screen it goes back to a starting screen or something

  • Rain June 26, 2016 @ 9:53 am

    Hey, I made a similar game like the one you made, but I’m still working on it.

    I added some more things like scores, high scores, some buttons and a pause menu.

    If want to check it out, reply.

    • Finco Owen Agbontaen June 26, 2016 @ 12:58 pm

      Yes I would love to see it.

      My next tutorial would be on how to switch screens in processing. And this game would be used

      • Rain June 28, 2016 @ 7:54 pm

        Uhh, switching screens? I didn’t got that. (Sorry for bad English)

        I did my game in a bit different method. But how can I send you the code? You probably won’t be expecting if I send you a hundred line of code in the reply box!

        • Rain June 28, 2016 @ 8:03 pm

          My basic code (making the ball bounce and a “game-over”) is of about 100 line.

          And when you talk about the other things (restart, game menu, graphics, pause menu and a lot of other stuffs), it goes beyond 700 lines (and it’s increasing too!).

          • Finco Owen Agbontaen July 6, 2016 @ 8:36 am

            Hmmm cool,

            You can send it via email to admin@fincoapps.com

            Thanks

          • Rain July 14, 2016 @ 2:41 pm

            Well, my exam is going on. I’ll send you the code a bit later. sorry man! 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *