How to make a game with Processing (Game Development)

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:)