Creating Breakout - Part 2 Adapted from Basic Projects: Game Maker by David Waller

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 Illus- trator 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 Back- ground 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 tran- sition 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 pre- vious step for the OBJ_Ball colliding with the OBJ_Bat and also for the OBJ_Ball colliding with OBJ_Barrier. Contin- ue to use the naming context and make loop false! 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. 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. 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 x=0, y=0 x=640, y=0 have to check for coordinates to see if the ball gets past the bat. In Game Maker, x represents horizontal distance and y represents ver- tical 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.

Load more