PING. Table of Contents. PING GameMaker Studio Assignment CIS 125G 1. Lane Community College 2015

Transcription

1 PING GameMaker Studio Assignment CIS 125G 1 PING Lane Community College 2015 Table of Contents SECTION 0 OVERVIEW... 2 SECTION 1 RESOURCES... 3 SECTION 2 PLAYING THE GAME... 4 SECTION 3 UNDERSTANDING THE INTERFACE... 5 SECTION 4 CREATING A SPRITE... 8 SECTION 5 CREATING AN OBJECT... 9 SECTION 6 ADDING AN OBJECT TO A ROOM SECTION 7 SAVING YOUR GAME SECTION 8 ADDING PLAYER MOVEMENT SECTION 9 SETTING UP THE BALL SECTION 10 BREAKING THE BLOCKS SECTION 11 CHECKING FOR VICTORY SECTION 12 UTILIZING SOUND SECTION 13 FINISHING UP THE TUTORIAL SECTION 14 MAKING THE GAME YOURS SECTION 15 ACKNOWLEDGEMENTS... 33

2 PING GameMaker Studio Assignment CIS 125G 2 SECTION 0 OVERVIEW In this game we will become familiar with the Game Maker Studio Interface and will implement a very basic action game similar to PONG., Pop N' Bounce, Breakout, or Arkanoid. This game is already partially completed for you. You will be adding capability to the game in order to understand various aspects of Game Design and using the GameMaker tool. GameMaker's ease of use, accessibility, and very straightforward interface are extremely powerful tools. There have been many fantastic successful commercially games created with GameMaker. Gunpoint, FTL, Risk of Rain, Charge Shot, and Hotline Miami, all great examples of what can be done in GameMaker with some good ideas, solid design, good teamwork, and a lot of dedication. This assignment will introduce the following concepts: Game Design Elements Basic Collisions Keyboard movement Creating and Adding Sound Programming Errors GameMaker Elements Importing a project Saving a project Exporting a project Creating Objects Creating Sprites Creating Sounds Working with Room Using Events and Actions

3 PING GameMaker Studio Assignment CIS 125G 3 SECTION 1 RESOURCES In order to get started you will need to gather resources to build and understand the game. In Moodle download the following files: Ping_Starter_File.gmz (This is a special compressed file used by GameMaker Studio) Ping_Starter_Demo.exe (This is a demonstration game showing the Game you will end up with when you have completed the tutorial portion of this assignment) Spr_paddle.png (This is a picture file used during the tutorial portion of this assignment) When building game you will be gathering many types of resources before and during the build. It s important to gather these resources as early as possible.

4 PING GameMaker Studio Assignment CIS 125G 4 SECTION 2 PLAYING THE GAME Start off by running the Ping demo file. You ll see the following: You play the game by moving the paddle left and right using the left and right arrow keys on the keyboard. You release the ball from the paddle by pressing the space bar. The objective is to hit and destroy all the red blocks on the screen Play the game a bit in order to understand the flow of it before moving onto the next step.

5 PING GameMaker Studio Assignment CIS 125G 5 SECTION 3 UNDERSTANDING THE INTERFACE You need to open the PING_Starter_File.gmz file now to continue. Find and Double Click the file. This will open the Ping project in Game Maker Studio as shown below. 1. Game Maker Studio Main Screen If for some reason double-clicking the file doesn t open the file you will need to first open GameMaker Studio and at the front screen select File Import from the toolbar. Then locate the PING_Starter_Studio.gmz file on your computer and press the Import button. Now let s discuss the importance aspects of the interface of Game Maker Studio that we will be using. This is the Resource Tool Bar: It contains the commands to create new resources for a game. Resources are the building blocks of all Game Maker games; Things like Sprites, Objects, Rooms, Backgrounds and more. Whenever you need to create a new resource the Resource Tool Bar is where you will find the command to carry that out. This is the Game Maker Menu Bar:

6 PING GameMaker Studio Assignment CIS 125G 6 Equivalents to all of the Resource Toolbar buttons can be found under the appropriate menu on this bar. Several less frequently used commands that are not on the toolbar are on the menus here as well. This is the Resource Tree: It shows all of the resources that have been created in a Game Maker project, and automatically stores resources of like types in the appropriate folder. There are already some resources included in the starter file. Click Edit on the Menu Bar, and choose Expand Resource Tree. Now all of the resource folders are open and the resources in each are revealed. The folders can also be closed or re-opened by clicking the arrow to the left of the folder icon.

7 PING GameMaker Studio Assignment CIS 125G 7 The area to the right of the resources folder list is the workspace. This is where you will be spending the majority of your time working on building games.

8 PING GameMaker Studio Assignment CIS 125G 8 SECTION 4 CREATING A SPRITE Sprites make up the visual portion of an object. All sprites, with one exception, have already been created in the game for you. You will be creating a sprite for the paddle. Start by Right clicking on the Sprites folder and choose Creat Sprite The Sprite editing window will open: Set the name of the Sprite name to spr_paddle. Now click on Load Sprite. This will open a file load window. Locate and find the spr_paddle.png file you downloaded earlier and open it. The image will be attached to the sprite now. There is one last thing you will need to do before you are finished here. Press the center button in the bottom-left portion of the window. This action sets the central position of where the object is placed in a room. Press OK to save the sprite.

9 PING GameMaker Studio Assignment CIS 125G 9 SECTION 5 CREATING AN OBJECT Objects are used in GameMaker to represent the game pieces that we will be using during the game. Each has unique rules that you will define for how it reacts with other objects and the environment. All objects, with the exception of one, have been created for you. You will be creating an object for the breakable blocks in the game. You can do this by clicking on the Create an object button on the Resource Toolbar, or by clicking on the Menu Bar item titled Resources, and picking Create Object. (The Menus also show the keyboard shortcuts for specific commands - learn them if you can.) This will create our first object, and bring up the Object Properties window:

10 PING GameMaker Studio Assignment CIS 125G 10 Give the object the name obj_paddle, this also translates to the filename of this asset in your project directory. You will want to name it something easy to alphabetize and reference at a glance when you need to find it. Using obj_ at the front which will place it with all the other names with a similar obj_ tag in front. This is an extremely useful method when you have many assets to track. Don't forget, in game design you may not be the only one who has to understand your organization later. Next your object needs a graphical element called a Sprite to give it a look. Two dimensional sprites are great when you want vibrant color, smooth animation, and a low CPU and development cost. The time it can take to make good custom animations should never be underestimated though. To save a bunch of time some graphics have been included in the game for your use. These sprites have been released free to use by the artist Daniel Cook ( We'll also use these graphics on the upcoming vertical scrolling shooter you'll be making in the next project. Select the menu right below your object name, and select your spr_paddle from the list of sprites. This has already been done to the other objects. Also, make sure that both the Visible and Solid boxes are checked: Click OK to save and close the obj_paddle object. Once you are done your object folder will show the following objects:

11 PING GameMaker Studio Assignment CIS 125G 11 You are now done with creating the Paddle object.

12 PING GameMaker Studio Assignment CIS 125G 12 SECTION 6 ADDING AN OBJECT TO A ROOM Along with objects a video game needs an environment in which to place these objects. In GameMaker this environment is known as a Room. A room is already created in in the game for you. Please open the room named rm_game located within the Rooms folder: Once you ve done this you will see the following screen: The room already contains all of the objects needed for the game with the exception of obj_paddle that you created earlier. Now you will add this object to the room. Note that you can zoom and drag the playable area around, but the size of the playable area has been tailored to both keep the paddle from leaving the room, and match the size of the sprites.

13 PING GameMaker Studio Assignment CIS 125G 13 In the room click on the tab labeled objects, then click within the large box underneath this tab or the icon to the right of Object to add with left mouse. You will be shown a list of the objects in your game. From this list click onto obj_paddle. The paddle object will now be shown in the box. Move your mouse cursor into the room shown on the right side of the screen. When you click onto the room obj_paddle will be created in the room. Select the paddle you created and while holding down the mouse button you can move the paddle around the room. You can delete the paddle by holding the ctrl key down while rightclicking on it. Now you can create, move and remove objects from the room. Place the paddle underneath the ball as shown in the picture below:

14 PING GameMaker Studio Assignment CIS 125G 14 Now go ahead and place more obj_blocks in the room to practice placing objects in the room. You can create a pattern of blocks in the room that a player will be hitting with the game ball. Go ahead and create a pattern such as below: Once you are happy with your pattern, Click the green checkmark to save and close the room.

15 PING GameMaker Studio Assignment CIS 125G 15 SECTION 7 SAVING YOUR GAME We need to pause for a moment and talk about saving your work. As you probably have learned in the past, periodically saving the work you have created on a computer is extremely important. Your game is saved continually while you work on it. GameMaker saves a game as a group of files in a large directory structure known as a project. You can find out where your game project is saved by going to the File menu in GameMaker and choosing Preferences. The bottom of the Preferences window looks like this: The circle with the red 1 shows the directory where all newly created Game projects are saved. The circle with the red 2 shows the directory where a game backup is saved. By default 5 backup copies are saved. When a new backup over 5 is created, the oldest backup is deleted. Backups are created when you save or run your game. You can change these behaviors if you wish. So this brings us to Ping_Starter_File.gmz that you opened when you started this assignment. This is a special GameMaker file that contains an entire GameMaker Game Project in a single compressed format. These types of files are created by going to File Export in GameMaker. When you opened this file, GameMaker extracted all of the files into a directory structure for use by GameMaker. Unlike newly created game projects, GameMaker will create this project in the game folder that the.gmz file was opened from. You will be exporting your game to a.gmz file when you submit your game for grading, and you are also HIGHLY ENCOURAGED to save your game as a.gmz file and take it with you each time you are done working on your game in class. Classroom computers are shared by other students and your game could potentially be deleted so you are best to have a backup with you in this event.

16 PING GameMaker Studio Assignment CIS 125G 16 SECTION 8 ADDING PLAYER MOVEMENT While our game now can run, it wouldn t be very interesting because it doesn t really do anything. So we will add keyboard control of our paddle by using Events and Actions within our player object. Open the obj_paddle and we see that Events and Actions are side by side. Events are any event that happens during the course of the game creation of the object, collision with another object, pressing the <Space> key, moving outside the room, etc. The events act as triggers for controlling the game, for example: if my ball hits a brick (collision event) I want to have the game destroy that brick. We dictate how the game behaves by giving it Actions to perform when an event happens. Actions are the actual commands that we give to the game to control individual objects and the game as a whole. Actions are connected to an event and are executed when that event is triggered, usually events have quite a few actions associated with them. Please make sure you have already read the Events and Action article in Moodle to fully understand this topic. We want to add movement to our paddle when we press the arrow keys, so we will add the Keyboard event to our obj_paddle. This way we can place movement actions inside the event so that the object begins to move when we press a key. To add events press the Add Event button, this will bring up a menu of events to choose from: Click on Key_Press. This will bring up a list of keys to use:

17 PING GameMaker Studio Assignment CIS 125G 17 First we will handle left movement, select <Left>. This will add Key_Press<Left> to the event. From here we can drag-and-drop (or right click) the buttons on the far right into the Actions window to define what happens when the key is pressed. We will be using the Move Fixed action which is represented by the button:. Selecting, then dragging and dropping this button to the Actions window will pop up the dialog:

18 PING GameMaker Studio Assignment CIS 125G 18 Make sure each of the sections has the following information: Applies to: Self is selected Directions: Only the Left pointing button is pressed Speed: 5 Relative: Is Not selected The window will look like the following when you re done: Press the OK button to save and close the Action. Now add another Event to the object. This time add a Key_Press <right> event. Give this event a Move Fixed action.

19 PING GameMaker Studio Assignment CIS 125G 19 Make sure each of the sections has the following information: Applies to: Self is selected Directions: Only the Right pointing button is pressed Speed: 5 Relative: Is Not selected Your obj_paddle should look like this now: From here we can test our game and see that the paddle moves to the left and right when the direction buttons are pressed. To test the game, go to the toolbar at the top of the window and press the green arrow:

20 PING GameMaker Studio Assignment CIS 125G 20 The game will take a short while to start while Game Maker converts your drag-and-drop actions into executable code. If the game encounters any errors in your coding, it will pop up a message similar to the following: This indicates that you made an error creating an Action. You would need to go back, find the error, and fix it before the game will run. When the game begins you will see the room you created. Press either the right of left keyboard button to see the paddle move. Exit the game by pressing the red X in upper right-hand corner of the game. If you tested long enough you will notice two problems with the way the paddle moves: The paddle keeps moving after you stop pressing a key. The paddle doesn t stop when it touches a wall. These issues are known as Logic errors. A game will run with Logic errors, but the way the game works won t match what you expect it to do. Let s go back and fix these errors. To fix the issue of the paddle keeping moving after you stop pressing key you ll need to add a different event to the paddle. This will be the Key_Release event. Open paddle_obj and add a Key_Release Left event. In the Action window add a Move Fixed action and set the following values:

21 PING GameMaker Studio Assignment CIS 125G 21 Applies to: Self is selected Directions: Only the Center button is pressed Speed: 0 Relative: Is Not selected Repeat these steps for the Key_Release Right button. Your object should now look like the following: Now to fix the error of the paddle not stopping when it hit the wall we need to add another Event to the paddle. This will be the Collision Event. Choose Add Event, Collision, Obj_wall.

22 PING GameMaker Studio Assignment CIS 125G 22 In its Action window place the Moved Fixed action with the following attributes: Applies to: Self is selected Directions: Only the Center button is pressed Speed: 0 Relative: Is Not selected Now, re-test the game and the paddle will move as you expect it to.

23 PING GameMaker Studio Assignment CIS 125G 23 SECTION 9 SETTING UP THE BALL Now open obj_ball and add a Key_Press <Space> event. In this event add a Move Fixed action with the following parameters: Applies to: Self is selected Directions: The upper left and upper right arrows are selected Speed: 8 Relative: Is Not selected This will make the ball move when you press the space bar and it will randomly choose between the two directions selected. The ball doesn t yet know to bounce off of the other objects in the room. To do this you will be adding a few Collision events that all use the same action. Let s add the collision with wall event first: Within this event, add a Bounce action parameters: Applies to: Self is selected Precise: Precisely Against: Solid Objects (on the Move tab) and apply the following

24 PING GameMaker Studio Assignment CIS 125G 24 This action causes the ball to bounce naturally when it collides with the walls. Repeat this process by duplicating this event for the obj_paddle and obj_block. You can duplicate an event by right-clicking on a current event (in this case the collision with obj_wall ) Your ball object should now look like this. The ball can now move and bounce, but we need to also take into account what happens when the ball gets past the paddle and moves off screen. In this case we want to remove the ball that is outside the game window and place a new ball on the screen.

25 PING GameMaker Studio Assignment CIS 125G 25 There is an Event just for this, it s called Outside Room (Under the Other tab). Add this event to obj_ball. Add in two actions. This first action will remove the ball that is outside the game window from the game: Destroy Instance: (under the main1 tab) Applies to: Self The second action creates a new ball in the game window: Create Instance: (under the main1 tab) Applies to: Self Object: obj_ball X: 416 Y: 480 Relative: unchecked Your obj_ball will look like this now: Now play the game and the ball should move around the screen, bounce off walls, paddles, and bricks, and reappear when it goes off the screen.

26 PING GameMaker Studio Assignment CIS 125G 26 SECTION 10 BREAKING THE BLOCKS Let s now make the game destroy the blocks after the ball bounces off of them. Open the Collision with obj_block event within Obj_Ball Add the following Action: Destroy Instance action: Applies to: Other The reason you set this to Other is you are telling GameMaker to destroy (or remove from the game) the other object involved in the collision. In this case obj_ball is the Self, and obj_block is the Other. Save and Close obj_ball. Run the game now. When the ball collides with the blocks the ball will bounce and the blocks will disappear.

27 PING GameMaker Studio Assignment CIS 125G 27 SECTION 11 CHECKING FOR VICTORY To win the game you need to destroy all the blocks on the screen. If you have played the game and have destroyed all the blocks you will have seen the following: After the Congratulations screen appears if you press the Enter key or Click on Ok the game will restart. How did this happen? Well, there is an object we haven t discussed yet, Obj_Controller. This object acts like a referee in a game. It controls aspects of the game, outside of the playfield. If you open Obj_Controller you will see the following: The actions shown here cause the message to appear. How they work will be discussed in later tutorials.

28 PING GameMaker Studio Assignment CIS 125G 28 SECTION 12 UTILIZING SOUND One really important aspect of video games is sound effects. Good sound design can make a huge difference in realism or immersion, your game can feel real and visceral even with 2D pixelated graphics. Download program labeled 8-Bit SFX utility from Moodle. This is a free and easy to use program by DrPetter, great at creating sounds that are the quality and structure of early arcade and console games. Run the program SFXR from its own folder, there should be a screen that looks like this: Though it might have an intimidating number of options, this program is fantastically easy to use. You can learn a lot by messing with the sliders and seeing what happens, but we only need a few simple sounds. Click the type of sound you want on the left side, and Randomize it until you find what you like. To save a sound press Export.Wav. A new window will appear to let you name the file. Note: Saving the file can be a bit clunky: You cannot backspace, and you will need to press the Enter key to save the file. The sound will be created in the folder that you ran SFXR from. Create two different sound effects, an 'Explosion' and a Bounce sound then return to GameMaker.

29 PING GameMaker Studio Assignment CIS 125G 29 In GameMaker, right click on the Sounds folder in your Resource Tree and Select Create Sound. Name the first sound snd_bounce and then click the small folder icon next to the name. Select the Bounce sound from the SFXR folder. Click OK to save the sound in GameMaker. Do the same for the other sound. Now Open obj_ball and then open Collision with obj_wall event. Add the following Action: Play Sound action: (under the Main1 tab) Sound: snd_bounce Loop: False Add a Play Sound action (under the Main1 tab). In the Sound box select snd_bounce and in the Loop box select false. Repeat the above for obj_paddle and obj_block. For obj_block choose the explosion sound. These are, of course, very simple, but you'd be surprised by how far proper sound design goes towards the quality of your game. The cheesiest graphics can be given deep atmosphere, immersion, and life with good sounds effects and music. We used SFXR because it s such a versatile utility, and completely free. There have been games that used licensed music, but don't forget, if you use materials and assets that aren't yours without permission and proper legal backing, it is financially dangerous. In game development it s still copyright infringement even if you aren't making any money from your project.

30 PING GameMaker Studio Assignment CIS 125G 30 SECTION 13 FINISHING UP THE TUTORIAL Now we should have the following features implemented: The paddle moves left and right when the appropriate keys are pressed on the keyboard The paddle stops when it hits a wall The ball bounces off the paddle, blocks and walls The bricks break when you hit them Sound effects are played when the ball collides with the wall, blocks or paddle. The game ends and displays a message when all the bricks are hit. If something isn t working you will need to work back through the pages to see where you made a mistake or possibly this guide might have an error! This brings us a final topic: Quality Assurance/Debugging Often Testing or QA can be one of the most difficult and involved part of a game's development time. Far from playing games for a living, testers must often perform obscure tasks countless times to make sure they work in all circumstances. A constant dialogue on fine-tuning what works usually has to go on throughout the design process, on top of finding the bugs in code and holes in design that may have been overlooked. These tutorials will work if you followed the design carefully, but don't be discouraged if something has errors.

31 PING GameMaker Studio Assignment CIS 125G 31 SECTION 14 MAKING THE GAME YOURS You are now over half-way through completing the assignment. Now it s your turn to add your own flair to this game and make it yours. Making the game yours is worth 25% of the points of the assignment. Put about half of time into this section you as it took you to complete the tutorial portion of the assignment. You will be graded on the effort shown. You have several different paths to follow to meet this requirement: PROGRAMMING. This path is for students who interested in the Programming path of game design. Some ideas are: o Create multiple hit bricks o Create power-ups GRAPHIC DESIGN. This path is for students who are interested in the Graphical path of game design. Some ideas are: o Create new sprite images. o Animate some of the sprites o Create a new background SOUND DESIGN. This path is for students who are interested in the Audio path of game design. Some ideas are: o Create better sounds for the collision effects. o Create a background sound-track NARRATIVE DESIGN. This path is for students who are interested in the Narrative (or story telling) path of game design. Some ideas are: o Create a backstory for the game o Create dialog appropriate for the characters in the game. You can use multiple paths to make the game yours if you like. You might also notice that some of the ideas mentioned above talk about doing things that haven t been discussed in this tutorial. You can learn how to do these things by researching the topic at the GameMaker Studio documentation website: docs.yoyogames.com, or by talking with your instructor. Once you are satisfied with your game, it is ready to be turned in. To turn in your game you will Export the game to a.gmz file. To Export your game, go to the File Menu and choose Export Project:

32 PING GameMaker Studio Assignment CIS 125G 32 Save the file in a location that your will be able to find later. Next, upload the.gmz file to the appropriate link in Moodle.

33 PING GameMaker Studio Assignment CIS 125G 33 SECTION 15 ACKNOWLEDGEMENTS We wish to thank the following: Daniel Cook ( the wonderful artwork he has released for free use. Tomas Pettersson ( for the excellent sound tool he release for free use. Kua Bird for the immense amount of time and dedication he put into redesigning this tutorial