Yorkville High School Computer Science Department
Yorkville High School Computer Science Department on Facebook  Yorkville High School Computer Science Department Twitter Feed  Yorkville High School Computer Science Department on Instagram

Yorkville High School Computer Science

Camp Imagination Videogame Design Arena Shooter: Movement

The Workspace

An arena shooter is a game where you keep shooting enemies until one of the hits your character. You can use the built-in tutorial in GameMaker Studio 2 for this called "My First Game - DnD." The final game will look something like the screenshot below. "DnD" stands for "Drag and Drop." GameMaker projects can either be "drag and drop" or "GameMaker language." We will focus on drag and drop projects for this camp.

GameMaker Arena Shooter

GameMaker Resource Tree

The empty area in the middle of the screen is the workspace. The workspace is where you will do the majority of the work editing your game. On the right side of the workspace is the resource tree, which lists different elements that can be put in your game such as sprites (images), objects, or rooms. You can move the resource tree wherever you'd like on the screen if you don't like it on the right side.

  1. In the main GameMaker window click on the Tutorials button.
  2. Select the "My First Game - DnD" tutorial.
  3. Save the tutorial to your desktop.

Creating Sprites

Sprites are images you plan to use in your game. You can go to the GameMaker Marketplace to download free resources or pay for resources. However, you need to have a paid version of GameMaker to use the Marketplace so we will not be able to use it for this camp.

Finding an Image in Google

  1. Go to Google Image Search.
  2. Type what you are searching for such as "Jiggypuff" and search.
  3. Click on "Tools" to change some of the search settings.
  4. Change the Color to "Transparent" so the background will be see-through.
  5. Sometimes changing the Type to "Clip Art" will give you better results for a game.
  6. Change the Size to "Exactly..." and enter 128 for the width and height. You can change this size if you want a bigger or smaller image.

Follow the steps below to create a new sprite for the player in Arena Shooter. You need to find your own image for the player if you do not want to use the tutorial's image. Follow the steps on the left if you are looking for your own image in Google.

  1. Right-click on Sprites in the resource tree.
  2. Choose "Create" to open the Sprite Editor.
  3. Name your sprite "sprPlayer."
  4. Click on "Import" to select the image you want to use. If you are using the default image it is in the "TutorialResources" folder.

Now that your sprite has an image, you need to set the origin of the image. The origin is a point on the sprite that is used to position the sprite within the game.

  1. Click on the drop-down menu above the image prview in the Sprite Editor.
  2. Select "Middle Center" to put the origin in the exact center of the image.
  3. You can now close the Sprite Editor.
Sprite Origin

Creating Objects

An object in GameMaker is something that is used in the game world. You can think of an object as a blueprint for a house. The blueprint gives you information on what the house will look like and you can build as many houses from the blueprint as you want. SImilarly, you can put as many of the same object into your game as you want. Every time you put an object into your game it is called an instance of the object. We will only have one isntance of the player object but we will have multiple instances of the enemy object.

Selecting a Sprite Object in GameMaker
  1. Right-click on Objects in the resource tree.
  2. Choose "Create" to open the Object Editor.
  3. Name your object "objPlayer."
  4. Click on "No Sprite" and select the "sprPlayer" sprite.

Associating a sprite with an object means the object will look like the sprite when you add an instance of the object to your game, which we will do next.

The Visible checkbox is checked by default so you can see the object in the game. Occasionally, there are times where you don't want an object to be visible since the player doesn't interact with it. The Solid checkbox lets us add collision detection to the object, which we will need so the ball can bounce off the walls.

Creating a Room

Rooms are the levels of your game in GameMaker. A room called "room0" is already created for you when you start a new game.

  1. Click on the arrow next to Rooms in the resource tree.
  2. Right-click on "room0" and rename it "roomMain."
  3. Double-click on "roomMain" to open the Room Editor.

While rooms are typically used as the levels of your game, they can be used in other ways such as splash screens or a main menu. The room is made up of a grid of black squares that represent a canvas for you to create your game.

  1. Drag the "objPlayer" object from the resource tree to the Room Editor.
The Room Editor

Events

To get the player moving we will need to add events that run when certain things happen such as a keyboard key being pressed. Follow the steps below to add events to the player object.

  1. Double-click on the "objPlayer" object to open the Object Editor.
  2. Click on the "Add Event" button and select "Step."
  3. Within the "Step" options choose the Step Event.

The Step Event runs every frame of animation, which by default means it runs 30 times every second. Once you have created an event the editor is split into three parts: the action list on the left that gives an overview of all actions for the event, the action workspace in the middle where actions can be dropped and edited, and the action toolbox on the right where you can drag and drop action blocks. We are now going to use a variable to control the left and right movement of the player.

  1. Drag the Assign Variable action from the "Common" section of the action toolbox to the action workspace.
  2. Change the name of the variable to "x."
  3. Set the value of the variable to "4."
  4. Check the "Relative" checkbox.
Assign Variable Action

A variable is a place to store information in a computer program. Instance of objects in GameMaker have some built-in variables, including the variable "x" that represents the x coordinate of the instance's origin in the room. By setting the variable to "relative" it means the variable is increasing by 4 and not being set to the number 4. You can run your program by pressing "F5" and you should see the player move off the screen to the right.

Keyboard Movement

We want the player to move when we press the arrow keys. We are going to use key down action to do this. A key down action runs when a keyboard key is first pressed down.

If Key Down Action
  1. Drag the If Key Down action from the "Mouse & Keyboard" section above the Assign Variable action in the action workspace.
  2. Change the "Key" to the Right key.
  3. Drag the Assign Variable action into the If Key Down action.

By dragging the Assign Variable action under the If Key Down action we made it so the variable is only changed if the right arrow key is being pressed. You can now implement action to get the player to move in the other three directions.

Follow the Cursor

Before we implement shooting, we want the player instance to follow the cursor so it will always face the direction it is firing. We will need to change the rotation of the player to do this using a temporary variable that only exists in the action.

Set Instance Rotation Action
  1. Drag the Declare Temp action to the action workspace from the "Common" section.
  2. Call the temporary variable "dir."
  3. Set the value to "point_direction(x, y, mouse_x, mouse_y)".
  4. Finally, drag the Set Instance Rotation action from the "Instances" section.
  5. Set the "Angle" of the new action to "dir."

If you run your game by pressing "F5," you should see that your player moves using the arrow keys and rotates to follow the mouse cursor.