In this tutorial, we would be adding a Menu screen and a game over screen to the bouncing ball game that was created in the last tutorial. So make sure you download the .pde file from the last post.
Here’s what we will be creating:
Since Processing does not give any standard api for switching between scenes, we would need to improvise. The best way to conveniently transit from screen to screen is to use a variable to hold information about the current screen running.
For this example, we would create a String variable and call it currentScreen. So go to the very top of the code and type the following:
String currentScreen = “menu”;
The next step is to edit the draw method and make it check the current position of the screen so it can determine what to draw. ie If the currentScreen variable value is equal to “menu”, then it draws a text, if it is “gameplay”, it plays the game and if the variable value is “game over”, then it shows the Game Over text. To do this, change the content of the draw method to:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
background(255, 255, 0); if (currentScreen == "menu") {//Checks if the screen is in the Menu fill(0);//To change the text color from default White to black textSize(50); text("Brick Breaker", 120, 110); text("Press any key to start", 37, 230); } else if (currentScreen == "gameplay") { ellipse(ballX, ballY, 20, 20); fill(0, 0, 0); rect(mouseX, 380, 80, 20); if (ballY >= 400)//If the ball has reached the bottom of the screen { dirY = -2;//Change ball direction ballY += dirY; currentScreen = "gameover";//Switch to Game Over screen } else if (ballY <= 0)//If the ball has reached the top of the screen { dirY = 2; ballY += dirY; } else if (ballY >= 380 && ballX >= mouseX && ballX <= mouseX+80)//The ball has touched the paddle { dirY = -2; ballY += dirY; } else { ballY += dirY; } if (ballX <= 0)//If the ball has reached the left of the screen { dirX = 2; ballX += dirX; } else if (ballX >= 600)//If the ball has reached the right of the screen { dirX = -2; ballX += dirX; } else { ballX += dirX; } } else if(currentScreen == "gameover"){ fill(255,0,0); text("Game Over", 120, 110); text("Press any key to retry", 37, 230); } |
The above code looks long but it’s actually easy to understand. The first if statement simply checks if the current screen is “menu” and Writes the text to the screen. The else if statement checks if the currentScreen
is equal to “gameplay” and simply executes the code that was written in the last post.
Now the next step is to check if any key was pressed. If a key is pressed, then it checks the current screen. If the current screen is menu or gameover, then it switches to game play. To listen for key events in processing, we use the
|
1 |
keyPressed() |
method. To do this, add the following to your code:
|
1 2 3 4 5 |
void keyPressed(){ if(currentScreen == "menu"){//if the current showing screen is menu, then switch to gameplay currentScreen = "gameplay"; } } |
And that’s it.
Feel free to ask your questions in the comment box below 🙂
1 Comment