Creating Breakout - Part 2 Adapted from Basic Projects: Game Maker by David Waller So the game works, it is a functioning game. It s not very challenging though, and it could use some more work to make it become a more solid experience for anyone that plays it. Before making a new version of Breakout, create a new folder and name it Breakout Task 2. Open the previously create game and save it in the Task 2 folder as Breakout_ your name _Task 2. This will not over right the first game but create a copy of it with a new name. This way, saving, there is no reason to worry that the original file is over written. 1. The first way to spruce up the game is by giving it a splash screen. Anyone who plays the game will see this screen as soon as the game launches and will really impact their first impression of the game. So a good splash screen is important. To make a splash screen, start by creating a new room. Right click on the Rooms folder and choose insert room or click on the create a room icon in the tool bar. The first room was named room1, so this one will automatically be named room2. 2. This naming isn t really specific, so rename the rooms by right clicking on the room and choosing rename. Change the new room s name to Splash and the original room in which the game is played to Game. 3. Double click on the Splash room to open it. Open the settings tab and write down the height and width. This is the size that the splash screen will need to be. 4. Launch Adobe Illustrator and create a new document. On the New Document dialogue box, change the profile to web. Change the width to 640px and the height to 480px then click ok. Design the splash screen to fit the art board. No part can extend beyond the edge of the art board. 5. On the splash screen, include directions for how to play the game, and how to advance to begin playing the game. 6. Once the splash screen is complete, choose file, export and export the graphic as a PNG. Save it in the Task 2 folder. PNG s are just photo (or raster images) so editing them can be tedious. If anything should need to be changed, it ll be easier to change the original Illustrator file and export it again, so save the splash screen as an Illustrator file. Simply choose File>Save As, name it Splash Screen and click save. On the dialogue box that pops up, check Include Linked Files if it is checkable. 7. Now that the splash screen has been made, it s time to import it into Game Maker. To do this, right click on the backgrounds folder and choose Create Background or click on the on the create a background icon (it looks like a photograph) in the tool bar. A new dialogue box will appear. Here, click on the Load Background button. Then find and select the PNG of the splash screen. Click open the image. Change the name to BCK_Splash. Then ok to close the dialogue box.
8. To add the graphic to the room, double click on Splash in the Room folder. Choose the background tab, in the pull down menu, choose BCK_Splash. The splash screen image should now appear in the window at the right. Click the green check in the upper left corner to save the changes. 9. The game now has a splash screen, but the splash screen says the game will start when the player presses the space bar. So next, this action has to be programmed. Start by clicking on the Create an Object icon in the tool bar. Name the new object OBJ_Control, but do not worry about giving it a sprite. Press the Add Event button, choose keyboard, and then space. Open the Main 1 tab and drag the icon for Next Room into actions area. This will trigger a new dialogue box to appear. Select any transition from the list and click ok. 10. The action is now programmed, but if it isn t added to the room, it will not occur. Open the Splash room by doubling clicking on it. If the objects tab is not open, click on it. Change the object to OBJ_Control by clicking on the menu tab and selecting it from the list of objects. Now comes the easy part. Simply click anywhere in the room to add the object. It will appear as a red question mark in a blue circle. Since the new object wasn t given a sprite, it will not actually appear on screen when the game starts, and Game Maker isn t sure how to show the object when programming, so this odd little graphic shows up to indicate that it is actually in the room. Click the green check in the upper left corner to exit the Splash room. 11. Save the changes to the game and then click on the Run the Game in Debug Mode icon (red play icon in the tool bar) to check it the changes work. There should be a splash screen and the space bar should advance the game to the game room too. 12. The game has a nice start now, and sill plays well, but some sounds would help to dress it up even more. When the ball collides with the bat, wall, and barrier, a sound should playing would give it a little more style. 13. First load the sounds by either right clicking on the Sounds folder and selecting Create sound or clicking on the Create Sound icon in the tool bar. Click on the Load Sound button. This will make a new dialogue box appear. Here, click on a sound and then open. Clicking on the green play icon will play the sound, but loop it (play it continuously) until the red power button is pressed. Test the sound and see if it sounds good for the collision. If not, go back and choose another sound. Change the name of the sound to SND_Collision_with_Bat. Pre Load sound should be checked. If it isn t, the first time the sound is played, it will be slightly delayed as it leads the sound. Preloading ensures it will be ready at the launch of the game. Click ok to close the sound. 14. Repeat step 13 for a collision with the wall and collision with the barrier. Each time check preload and name the sound following the same context.
15.The sounds have been loaded into the game, but not assigned to their objects, so that will come next. Double click on the OBJ_Ball in the Objects folder. Click on the Collision Event with object OBJ_Wall. Open Main1 tab and drag the Play Sound icon into the actions area. A new dialogue box appears. Here, for sound, click on the menu icon and choose SND_Collision_With_Wall. Loop should already be false, so change it if it isn t (the sound should only play once, not continuously). Click ok to close the dialogue box and then again to close the objects properties window. 16. The first sound is done, but the other two are not. Repeat the previous step for the OBJ_Ball colliding with the OBJ_Bat and also for the OBJ_Ball colliding with OBJ_Barrier. Continue to use the naming context and make loop false! 19. Double click on OBJ_Bat in the objects folder. A collison event that changes the horizontal movement to zero when the bat hits the wall will solve the problem. Click the Add Event button and select Collision>- OBJ_Wall. Drag Speed Horizontal into the actions area. In its dialogue box, change the speed to zero and click ok. Then click ok to close the OBJ_Bat s properties. 17. The sounds should be complete! Save the game again and run the game in debug mode again to test if they work. Hopefully it plays well. 18. When playing the game, the bat can go beyond the wall. This isn t really a function that the game should have. When the bat gets to the wall, it should stop, just like the ball does (only the bat doesn t need to bounce off the wall). This is the next improvement that can be made to Breakout. 20. Save the game and once again test it in Debug mode. The bat should now stop. Another problem fixed! 21. The game is working well, but it s really easy to play and earn a high school. As long as the ball stays in the game room long enough to break every barrier, the layer will easily earn a score of 50 (since there are 50 barriers to break, each earning a point). To add some difficulty, if the ball hits the wall, the player should lose 1 point.
22. This bit of programming is a little more difficult. The game will have to check for coordinates to see if the ball gets past the bat. In Game Maker, x represents horizontal distance and y represents vertical distance. The top left of the screen (what is known as the origin in programs such as Illustrator) represents x=0 and y=0. The bottom right corner would be whatever the height and width was set at when the room was made; in this game, 640 x 480. If the room was made larger, the bottom right corners coordinates would change, while the top left would still be x=0, y=0. To see x=0, y=0 x=640, y=0 this in Gamer Maker, double click on the Game room. Without clicking, hover and move around in the room and watch what happens to the x and y coordinates at the bottom of the room properties dialogue box. These coordinates show the location of the mouse in the room and as the mouse moves, so do the x and y coordinates. This is important to know when programming the ball hitting the bottom wall subtracting a point. x=0, y=480 x=640, y=480 23. To make the ball hitting the lower wall take away a point, the game will have to compare the y coordinates of the bat and ball. If the y coordinate for the ball is greater than the y coordinate of the bat, the programs will know that the ball has (or will soon hit the wall and must subtract a point. Open the game room and place the mouse just above the bat. Check out it s coordinates. In the example, y=352, but that is just for this example. Whenever a ball collides with any wall, the game will have to check to see if the y coordinate is larger than 352 and if so, subtract a point. x=0, y=0 x=640, y=0 26. Now click on the score tab and drag the Set Score icon into the actions list. In its dialogue box, type -1 as the score and check relative. Without checking this, the score would be reset to -1 each time the ball hits the lower wall instead of just subtracting 1 point! Click ok to close the dialogue box and ok once again to close the OBJ_Ball properties window. 27. Save the game and test the new programming by running in debug mode. Allow the ball to hit the lower wall. It should subtract a point. 24. Double click on the OBJ_Ball in the resource tree at the right. Select the Collision Event with the Object OBJ_Wall. Click on the control tab. Now, find and drag the Test Variable icon into the actions area. On the new dialogue box, enter y as the test variable, the coordinates of the bat (in the example it was 352, but this may not be the case for your game), and finally change the operation to larger than. Click ok to close the dialogue box. x=0, y=480 x=640, y=480 25. The actions should now include a test variable for IF y is larger than 352 (or any other number that the bat sat at). This is known as an IF statement. IF the case exists, then the program must do something.
28. To make the game even more challenging, room some of the bottom wall. Double click on the Game Room in the resource tree. Right click on the center stone of the bottom wall and choose delete. Then remove three more stones from the bottom wall. Click on the green check n the top left corner of the dialogue box to save the changes. 29. When the ball exits the room, either at the top or the bottom, the program needs to know and recognize this. Since Game Maker allows items to exist but be invisible, place a stone in the top and bottom exits. If it s invisible, the wall will still appear to be open and have an exit, but it will be easy for game maker to know when the ball exits... if it hits these stones, it exits. Start by creating a new sprite(red pac man) and then click on the Load Sprite button. Find and select Stone_Normal_ Blue to represent the barrier that will mark the top and click open. It should be located under Sprites>Bouncing Balls>Stones. Name the sprite SPR_Invisble_Blue and then click ok. 30. Now create a new object and name it OBJ_Invisible_Blue. Choose SPR_Invisible_Blue as its sprite and uncheck visible (so the room appears to have exits, not just walls blocked by blue barriers). Click ok to close the dialogue box. 31. Double click on the Game Room. If the Objects tab is not open, click on it. Change the Object to Add to OBJ_Invisible_Blue and then add them to the room by clicking in the exits. It will appear as though they will block the exit, but remember, when the game starts, they will appear invisible, so they will not actually block the exit. Click the green check to save the changes and exit the dialogue box. When the ball collides with this new object, the game needs to let the player know that the game s over and they have won or lost the game. So, when the ball when the ball collides with the OBJ_Invisibe_Blue, the y coordinates must be checked to see if it has hit the top or bottom barrier. If it hit the top barrier, the coordinates would have to equal zero,
alert the player that they have won the game, and restart the game. If it hit the bottom barrier, the y coordinates would have to equal 448 (but remember this number could vary depending on the room size), alert the player that they have lost, and then restart the game. Basically, the logic for this programming is: On collision with OBJ_Invisible_Blue, check the y coordinate. If y=0 then display message You have won the game. Restart the game Else display message You have lost the game. Restart the game. 33. Make sure the Collision with OBJ_Invisble_Blue is still selected and then click on the control tab at the right. Drag the Test Variable into the action area. In the new dialogue box, set the variable to y, the value to 64 (this is a little more than is necessary, but will make the program easier to run) and the operation to less than. Click ok to close the dialogue box. 32. To program the logic above, double clik OBJ_Ball in the resource tree to open it s properties. Click on the Add Event button, choose Collision>OBJ_Invisible_Blue. Because the blue barrier is actually 32 pixels wide (double click on the sprite for it and it reads that it is 32 high and 64 wide) the ball will never actually make it to 0 on a collision, so 32 will be a better number to use. 34. Once it checks if it is less than 64, the program needs to what to do next. Two actions will occur next, so they need to be placed in a block together. With the control tab still selected, drag the Start Block icon into the actions area and drop it. Click on the Main 2 tab and drag the Display Message icon in. In the new dialogue box, type a message telling the player that they have won and click ok. Now drag the Restart Game icon into the actions area. This is the last action in the block so click on the control tab and drag in the end block icon.
35. The actions for the ball hitting the top exit are now programmed, but what about the bottom exit? Programming the bottom is even easier. Click and drag the Else icon into the actions area (Else indicates that if the ball collides with OBJ_Invisble_Blue and the y variable is anything greater than 64 -the opposite of the first blockthe else actions will be displayed). This will trigger another set of actions, so add the Start Block icon into the actions area. Next add the Display Message icon. In its dialogue box, type a message telling the player that they have lost and then click ok. Drag and drop the Restart Game icon in and then close the block by including the End Block icon. Click ok to close the dialogue box. 36. That should do it. Everything should now work perfectly. To test it, save the game and then click on the run in debug mode icon. Play the game and see if it works properly. Be sure to play it through to see if the top and bottom exits display the proper messages. If it does, choose File>Create Executable and save the game. Now it s an.exe file that can be played on any computer. To make any changes to the game, the original Game Maker file will have to be used, not the.exe. That s it! Breakout is finished.