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: Text

Tile Sets

This lesson picks up where the Arena Shooter: Enemies lesson left off. Let's make our game look a little nicer. The black background of the default room is pretty boring.

  1. Right-click on Sprites in the resource tree.
  2. Choose "Create" to open the Sprite Editor.
  3. Name your sprite "sprBackground."
  4. Import the "tiles2" image from the "TutorialResources" folder.

We are going to use the image we imported as a tile set to fill the background. Our tiles are going to be 128x128 pixels. The upperleft corner of the image is empty since the first tile of a tile set is the blank tile, which is what you will see when you first add the tile set to the background.

Tile Set Sprite
  1. Right-click on Tile Sets in the resource tree.
  2. Choose "Create" to open the Tile Set Editor.
  3. Name your tile set "tileBackground."
  4. Click on "No Sprite" and choose the background sprite.
  5. Open the "Tile Properties" and change the "Tile Width" and "Tile Height" to 128.
Tile Properties

We are now ready to add the tile set to our room.

Viewports
  1. Open your room and click on "Create New Tile Layer" in the "Layers" section.
  2. Name the new layer "TileBackground."
  3. Drag the new layer between the "Instances" and "Background" layers.
  4. Change "No Tileset" to the background tile set.

You can now click on portions of the tile set on the right side of the screen and "paint" them onto your room. Let's make the room a bit bigger first before we do this.

  1. In the "Room Properties" in the bottom-left of the Room Editor, change the width to "2048."
  2. Use the tile set to paint tiles into the room.
  3. Click on the "Viewports and Cameras" arrow at the bottom of the "Room Properties."
  4. Click "Enable Viewports."
  5. Select "Viewport 0" and make it visible.
  6. In the "Object Following" section, select the player object.
  7. Set the horizontal and vertical borders to "256."

When your player moves around the screen, the viewport will follow. Once the player gets within 256 pixels of the edge of the viewport, the viewport will begin to move.

Keeping Score

Draw Instance Score Action

Let's keep score in the game by awarding 10 points every time an enemy is destroyed.

  1. Right-click on Objects in the resource tree.
  2. Choose "Create" to open the Object Editor.
  3. Name your sprite "objScore" and add the object to your room.
  4. Add a Create event to the new object.
  5. Add an Assign Variable action.
  6. Name the variable "score."
  7. Add a Draw event to the score object.
  8. Declare a temporary variable called "viewport" with a value "view_camera[0]" using the Declare Temp action.
  9. Declare another temporary variable called "cameraX" with a value "camera_get_view_x(viewport).
  10. Declare another temporary variable called "cameraY" with a value "camera_get_view_y(viewport).
  11. Declare another temporary variable called "cameraWidth" with a value "camera_get_view_width(viewport).
  12. Add a Draw Instance Score action from the "Drawing" section.
  13. Change the "X" value to "cameraX + (cameraWidth / 2)" and the "Y" value to "cameraY + 25."

The score of 0 should now appear in the center of the screen and will move as the camera moves. We now need to make the score go up when an enemy is destroyed.

  1. Open the enemy object.
  2. Under the Destroy Instance action, add a Set Score action from the "Instance Variables" section.
  3. Assign a relative value of "10" to objScore.

The score should now go up by 10 everytime you destroy an enemy.

Fonts

Font Editor

The default text for the score is a little small. To change it, we need to create a font.

  1. Right-click on Fonts in the resource tree.
  2. Choose "Create" to open the Font Editor.
  3. Name your font "fontScore."
  4. Select a font you like and increase the size to at least 24.
  5. Open the Draw event of the score object.
  6. Add a Set Font action and choose the "fontScore."

The score should now appear in the font you specified.