Media, Features, and User Testing

Overview

Finalizing a game for use by other people can be a difficult challenge. With some kinds of apps, like filling out a form, you are complete when the form has all the information you want. Not so with artistic endeavors like games, where even when to stop is not clear. One important final step with games is considering the media and having people play your game for feedback. In this lesson, you will learn more about what you can do with the templates, using art and music, and testing your games with others.

Goals

You have the following goals for this lesson:

• Learn about using Media
• Learn about User Testing
• Explore more features in Sky Hopper and Petting Zoo Hero

Warm up

Human beings vary dramatically in their experiences, abilities, and thoughts. With games, one person’s favorite may not be enjoyed by another. These differences make us human, but can be hard to pin down scientifically. Issues like the art, the sound, and the music can all lead to having a consistent theme for the game, in addition to the game play. What do you think are the most important decisions for not just making a game, but also selling it to others on an open marketplace?

Vocabulary

You will be learning about the following vocabulary words:

Code

You will be using the following new pieces of code:

CSTA Standards

This lesson covers the following standards:

• 2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution.
• 3A-AP-19: Systematically design and develop programs for broad audiences by incorporating feedback from users.
• 3A-AP-21: Evaluate and refine computational artifacts to make them more usable and accessible.

Explore

The two game templates you have learned about so far have many different features available. These represent different ways you can customize your games and make them interesting. Some of these features represent the mechanics of the game. These might directly impact gameplay like gravity or grid size. Other features are more artistic in nature. They might not directly change how you play the game, but make up part of the overall experience. During this lesson, you will learn about some of the details of these features and have the chance to let someone else try your game and provide feedback.

Adding Music and Backgrounds

Both Sky Hopper and Petting Zoo Hero support music and custom backgrounds for levels. These provide you ways to change the feel of the game, and make it feel more complete. For example, gentle music or bright backgrounds might suggest that a level is intended to be easy or relaxing. On the other hand, energetic music or ominous backgrounds might suggest a challenge. In this way, these artistic additions allow you to express yourself in the game’s design and communicate intent to a player.

You can add music to a level in either game using the SetMusic action, like this:

level1:SetMusic("The Entertainer.ogg")

The SetMusic action finds a piece of music located in the project’s Resources/Music folder. Music files must be in .wav or .ogg format. If you want to load your own music with a different file extension, such as .mp3, it must be converted to one of the other formats first. How to convert between file extensions is beyond the scope of this lesson, but there are online resources available if you are interested.

Both games contain 8 different songs for you to try in the Music folder, available under the Creative Commons license. These are:

You can also adjust the volume of music on a level using SetMusicVolume. This takes a value between 0 and 1, where 0 is muted and 1 is full volume. For example, this command will set the music volume to half:

level1:SetMusicVolume(0.5)

Both games also support custom backgrounds for levels, using the SetBackground command. These can take any image file located in the project’s Resources/Images folder. You can create or download your own custom backgrounds and place it in those folders to add the backgrounds to your levels.

Using music, backgrounds, or any particular artistic feature is never required, but lets you flesh out your game in a way that works for you. Explore and have fun with art and music.

Custom Animals

By default, Petting Zoo Hero contains three kinds of animals: sheep, bunnies, and turtles. Each of these animals has different base attributes, needing different amounts of food to stop, and moving a different number of cells each turn. Animals are your primary challenge in the game.

Every animal is customizable, and you can create new animals that behave differently than the others. This code shows an example of a custom animal:

Animal ultraTurtle
ultraTurtle:SetHP(3)
ultraTurtle:SetSpeed(3)
ultraTurtle:SetImageFile("Turtle.png")
level1:AddAnimal(ultraTurtle, 2, 4)

This example creates an animal that takes a lot of treats and moves fast. You could consider using it to make a more challenging animal for a level. You can also modify the properties of existing animals, like with this code:

Bunny bunny = level1:AddBunny(2, 4)
bunny:SetSpeed(1)

Pay special attention to the first line of code. Some actions can give you new Objects to modify by using the equals sign, just like with the variables you saw earlier. If you use the Advice pane to get the block for adding the bunny, however, it will be missing the left side of this code block. To get this line of code, you can either type it by hand in a blank block, or you can modify the block after adding it from the palette. To do that, select the block (not a field inside of it), and press the right arrow. This will turn the block into a blank block you can modify, and add the extra text to the left side. Inside the editor, there is also an automatic hint that will do this on its own, which you can use the hotkey ALT + ENTER for.

When creating custom animals, you can use any image in the project’s Resources/Images folder. Among the animal images there, the snake image is currently unused – you might consider making a custom animal with it.

Custom Treats

Petting Zoo Hero also contains three kinds of treats: apples, strawberries, and bouncy balls. These also have different attributes, with different levels of flavor (how effective they are at feeding animals), push-back, and cost. Treats are your primary tool for completing levels.

Just like animals, you can modify existing treats, or create new ones. Here is an example:

Treat treat
treat:SetImageFile("Custom Treat.png")
treat:SetName("Mystery Candy")
treat:SetFlavor(3)
treat:SetPush(3)
treat:SetCost(1)
level1:AddTreat(treat)

The Resources/Image folder contains two unused treat images, one for grapes and one for a banana. You could consider making special treats with these.

Overall, to round out the discussion with Petting Zoo Hero, consider that that number of adjustments you can make is somewhat smaller than in SkyHopper. However, that is because in a puzzle game, the core of the idea is you are constructing interesting puzzles on the grid. There is no gravity or obstacles or other items, but there are collections of animals and treats that you can adjust. Consider thinking back to SkyHopper for a moment and considering what additional options exist there.

Obstacles in Sky Hopper

In previous lessons, you learned about Sky Hopper and how to place platforms. While exploring the game, you may have already found several kinds of obstacles to add to the levels. This section discusses them in more detail.

Keys

By default, the player only needs to reach the exit goal to beat a level. You may decide, however, that you want the player to have to work a little harder to leave. This is where keys come in.

If you add keys to a level, the exit door will be locked. Players must collect all keys on a level in order to open the goal door. When you add keys to a level, they must be positioned on the screen using pixel coordinates. Here is an example:

level1:AddKey(250, 400)

Bouncers

Bouncers let you introduce a little extra physics-based chaos to the game. They are circular obstacles that will push the player away if touched. These can be used to get in the way, or they can be used like trampolines to launch the player to new areas.

level1:AddBouncer(300, 100)
level1:AddBouncer(600, 100, 1000)

The example above adds two bouncers. The first two numbers are pixel coordinates placing the bouncers. On the second line of code, a third number is provided, 800. This sets the pushing force of the bouncer. If you try adding these two lines to a level, you will see one of these pushes a lot harder than the other.

Portals

Just like bouncers can either help or hinder the player, you can use portals to transport the player somewhere. Whether that location is good or devious is up to you. When you create a portal, you provide two sets of pixel coordinates. The first set is where the portal is positioned on the screen. The second set is where the player will be teleported if they touch the portal. Here is an example:

level1:AddPortal(150, 25, 600, 700)

Moving Objects

Many platformer games contain moving platforms or obstacles. You can do the same in Sky Hopper. Platforms, Bouncers, and Portals can all be turned into moving objects by adding waypoints. When an object has waypoints, it will move from its starting position to the first waypoint, then the second, etc., until it has moved to the last one. Then, it will go backwards through the points until it returns to the start position, then it repeats.

To do this, you will need to modify an object, similar to how you can modify items in Petting Zoo Hero. Here is an example:

Platform platform = level1:AddShortPlatform(150, 150)
platform:AddWaypoint(150, 400)

This example makes a platform move up and down, like an elevator. You can also make platforms move left and right. Be careful though: platforms are slippery. They will not carry a player along. You might need to run to keep up.

Colors and Libraries

You may have noticed while exploring Sky Hopper that there are some places where you can use Colors, such as Level’s SetPlatformColor action. In order to use Colors, you will need to bring in some extra code from elsewhere using a Library. This is the same thing you have already seen at the top of the template files, the lines of code that start with use.

Libraries are pieces of code written and stored away by someone for future use. They can be used to solve specific problems or provide certain tools, which can be reused later by anyone who needs them. In this case, we will use a library that provides code for using colors.

To use colors, you need to add a new line of code to the top of the file:

use Libraries.Game.Graphics.Color

This will let you make a new kind of Object, Color objects. Color objects create colors by mixing red, green, and blue components, along with a fourth opacity (or transparency) value. Each component is treated as a value between 0 and 1, where 0 means that color is absent, and 1 means that color is fully present.

For example, this line of code uses four values, for red, green, blue, and opacity, respectively. It will produce yellow by mixing red and green, leaving out blue, and making it fully opaque. Then, it makes it the default color of platforms on a level:

Color yellow
yellow:SetColor(1, 1, 0, 1)
level1:SetPlatformColor(yellow)

Generating Random Numbers

You can also use a library to produce random numbers. Randomness is used often in computer games to introduce elements of luck or unpredictability, or to make games feel different when played multiple times. You might consider using it to produce random coordinates where platforms will be placed in Sky Hopper, or to place animals at random coordinates on the grid in Petting Zoo Hero.

To use the Random library, you will need to add this line of code to the top of the file:

use Libraries.Compute.Random

The Random library can produce random numbers in several ways, which you can explore using the Advice pane. The simplest way is to generate an integer between two values. For example, this code will generate an integer between 0 and 10:

Random generator
generator:RandomIntegerBetween(0, 10)

User Testing

While the templates contain many tools for creating games, it is up to you to decide how you want to design your game. Designing a game can be difficult, and making something fun is far from an exact science. One common approach is to perform user testing.

The concept of user testing is implied by the name. You make something, then show it to people and have them try it out. However, there are some common sense things to consider when having people try out your games.

First, when people use your game, do not help them. This sounds counterintuitive, but your goal is not to play the game for them. Sit back, observe, and see how it goes. If the user gets stuck, let them try to figure it out on their own. Sometimes this can be frustrating to observe because what is obvious to you may not be to them.

Second, give your user some goals. Just telling a user to play might be ok in some games, but perhaps not with others. Generally, it is a good idea to give the user some rough goals, especially around the areas of the game that you think need testing. A bit of guidance can go a long way. With your games this might be as simple as saying to get the key and find the door. Or for your puzzle, it might be to tell them to see if they can defeat a level without losing any hitpoints.

Third, consider using a talk aloud protocol. In this case, if a user is using your content, it is ok to ask them questions or ask them to describe what they are doing, where they are struggling, or how they are feeling. This kind of approach is imperfect, but can be helpful in hammering out ideas.

Finally, although it sounds silly, be sure not to violate the most important rule of user testing: be kind. When people come to help you find problems in their game, be nice to them when they find them. This is especially important because user testing can be frustrating on both sides. For the game programmer, the user might find important issues. For the user, they might run into bugs or frustrating parts in the game. A bit of kindness goes a long way.

Engage

In this section, you will engage in a user test of your prototype game. You can choose either the Petting Zoo Hero or the SkyHopper prototype. However, instead of programming your prototype at first, you are going to engage in a special kind of user testing called Wizard of Oz prototyping.

Wizard of Oz prototyping is a common technique used in computer science and has been around since it was coined by J.F. Kelley [1]. The basic idea is simple. Instead of fully creating your game, with all the media and time it takes to do so, fake it and have people try versions as you go.

Directions

To begin, choose one of the two games, think about which features you find interesting, and try to build a prototype with some of those features. You may choose to include ideas from when you previously explored or you might start fresh. Stay off the computer for a while and design your prototype on paper, with push pins, or with physical objects. The idea is to play around both with how your levels could be designed while exploring the benefits and limitations of Wizard of Oz prototyping. The point is to design your level first, then try and code it up.

To give a few ideas on how you can do such testing, consider some options. For Petting Zoo Hero, you might consider finding a checkers or a chess board and using that to play around with ideas for your grid. For SkyHopper, you might cut out pieces of paper and place them in an arrangement to design various platform puzzles. This might give you estimates of pixels.

What you build here may or may not be part of your final design. The goal is to try things, mess around, and get some ideas so you can code them up. Once your prototype is ready, work with a partner to test each other’s levels. This can be informal, but more specific feedback is usually more helpful than less.

As a partner is using your prototype, ask their opinion on the design of the levels and what they think should change in the design of the game. Once you have had another user try your game and give some feedback, it is time to get hacking. Good luck!

Citations

1. J. F. Kelley. 1983. An empirical methodology for writing user-friendly natural language computer applications. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (CHI '83). Association for Computing Machinery, New York, NY, USA, 193–196. https://doi.org/10.1145/800045.801609

End of Lesson

You have reached the end of the lesson for Media, Features, and User Testing. To view more tutorials, press the button below or you can go back to the previous lesson pages.