Creating A Platformer with Block Scaffolds

Overview

Building games is both an art and a science. They can contain hard math and complex level design, but they also have art, sound, music, and much more. The amount of code required to make a game varies wildly. Games can be deadly serious, outright silly, or anything in between. At the end of the day, the game you want to make is your decision. In this lesson, you will learn how to use block scaffolding to control and create levels for what you want your game to be.

Goals

You have the following goals for this lesson:

• Learn the basic keyboard and mouse operations for using blocks
• Learn about block scaffolding and the advice tab
• Learn about Animation, Sound, and Music

Warm up

Modern computer games have many features. They might explore brave new worlds, allow you to fly spaceships, build cities, destroy or become monsters, or any number of other creative ideas. What aspects of games do you find to be the most creative?

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:

• 3A-DA-11: Create interactive data visualizations using software tools to help others better understand real-world phenomena.
• 3A-DA-17: Decompose problems into smaller components through systematic analysis, using constructs such as procedures, modules, and/or objects.
• 3A-DA-18: Create artifacts by using procedures within a program, combinations of data and procedures, or independent but interrelated programs.
• 3A-DA-21: Evaluate and refine computational artifacts to make them more usable and accessible.

Explore

Now that you have run an existing program and tweaked its code, it's time to learn how to add to it. To do that, you will take advantage of scaffolded block programming.

Scaffolded Blocks and the Advice Tab

Visualization and graphics have become a hallmark of how students learn to code. Traditional approaches that make use of graphics vary and include ideas like drag and drop, animated characters, scientific visualization to represent data, 2D or 3D game programming, amongst a sea of other ideas. One key problem when creating apps of increasing complexity is that it becomes hard to remember what the options are. Pure block languages struggle with this complexity because they must limit the kinds of operations a computer can do to keep the number of blocks reasonable.

The situation is a bit different, however, with scaffolded block languages like the Quorum programming language. On one hand, the language uses blocks to simplify structure and learning. On the other hand, Quorum is a full-fledged programming language, which can be freely typed. Importantly, Quorum Studio knows what code is valid for your program, and it can offer you advice on how to write your game. Consider the example template from the first lesson:

To do this in Quorum Studio, select a block in the editor on the right with the mouse or keyboard. The available actions for a selected object will appear under the Advice category in the Blocks pane on the left. In the image above, the selected line contains:

Application app

When this line of code is selected, the actions you can call are displayed. Moving to the advice column with the keyboard and a screen reading, or scrolling around, allows you to identify what is available for this specific object under this specific situation.

The idea is that, while you could potentially memorize every action in every object, this is mostly impossible for programmers to really do. Instead, selecting a line of code can get the system to automatically and correctly tell you what is available. In the above, this gives you options related to changing the character, setting the volume, starting the game and, importantly, adding levels.

One of the options available for Applications is EnableRadar. Try dragging that into the project, then run the game and play it. The game should now have additional audio. To understand its purpose, consider playing the game without being able to see it.

Platformer Accessibility

Accessibility is a broad term, especially in the context of games. In a general sense, accessibility describes how many people are able to play and enjoy a product and what kinds of barriers might prevent people from enjoying or even using it. These barriers can be all kinds of things. A game that requires quick responses might not be accessible to individuals with slow reflexes. Games that rely on different colors to convey information might not be accessible to individuals with color blindness. Games with fast moving images might not be accessible to people who get motion sickness. Virtual reality, for example, often makes people feel queasy, which from a certain point of view is an accessibility problem.

In the context of computer science, accessibility is often considered in the vein of disabilities. A very common way to think about it is through the Web Content Accessibility Guidelines, or WCAG. These government guidelines are complicated, but robust, rules for making websites accessible. For computer games, though, things get tricky.

Because the concept of games encapsulates so many different kinds of experiences and so many different ways to play, there is no single standard to make games accessible. That said, games are often sold on an open market, so considering accessibility really just means you are taking into account more potential customers.

In the case of SkyHopper, which is a relatively visual game, there are several affordances for accessibility. First, a series of sonifications are included as a user moves. For example, as you move left or right, notice that a small beep indicates that you are at the end of a platform. This could, at least plausibly, help a person that is blind or visually impaired and is called the radar. You can turn it on or off in your game.

Similarly, when jumping, as your character gets further away from the ground, a sound is played that is lower in pitch and it gets higher as you get closer to the platform. The idea is that you can use the concept of sonification, typically described as non-speech audio, to provide information you can use to explore even if you have challenges with seeing the game.

Finally, the tab key controls the focus in the game. This focus does little for visual users in this case, but if a user is using a screen reader, it provides non-visual information about the game. This can allow the user to plan out how to solve the puzzle without needing to be able to see it. The point with accessibility is universal design. Games should be playable by the widest possible audience.

Pixel Coordinates

In the Advice tray, you saw how EnableRadar was an option available for Applications. For the next step, consider some of the options available for Levels. In Quorum Studio, try selecting a Level object, and look at the available blocks. There are many options that rely on positions, including AddShortPlatform.

The Sky Hopper game relies heavily on pixel coordinates, a system where positions in the game match the pixels of your monitor. By default, when you use app:Start(), the window that opens is 1000 pixels wide and 1000 pixels wide. This means that in the window, the coordinate system is also 1000 by 1000 units.

While programming languages, weirdly, vary in their choice here, in this case all coordinates are measured from the bottom-left corner of the screen, and go up and to the right. The idea is is roughly matches what you would do in a math class. Platforms and other objects are also placed by their bottom-left corner. For example, level1:AddShortPlatform(150, 300) will place a platform with its bottom-left corner located 150 pixels from the left side of the screen and 300 pixels from the bottom of the screen.

Using the Advice category of the Block pane, you can add new lines of code to your program, like level1:AddShortPlatform(x, y, width, height). Once you have added the code, you will need to replace the placeholder values the block starts with, x, y, width, and height. These values, called Parameters, tell the action how to do its work. In this case, the parameters tell the action what the platform’s position and size should be, in pixel coordinates. Try setting the parameters to different values, and see how the platform changes.

The Advice Filter

While the Advice category is helpful for discovering what actions are available for an Object, it is sometimes helpful to narrow the results to look for specific things. The top of the Advice pane has a text area. If you type into the area, the displayed actions will be limited to things that match your search. For example, if you type Add into the field, only actions that contain the word Add will appear. You can use this while exploring the actions to try and find things that match what you want to do.

Blank Blocks

While the palette is a primary way of adding blocks, especially for young users, evidence in the academic literature suggests novices only use blocks for a short time, generally a few weeks. Past this time, learning benefits drop off, compared to text, although the literature is limited in the sense that longitudinal tracking of students has generally not happened. Given block environments commonly allow only the use of the mouse, this leads to transitional friction. This environment is somewhere in between. There are blocks, which map 1 to 1 to the text. There is no need to switch or not switch. You can use the blocks if you like them and not if you do not, for learning or inventing anything you wish. You do not have to transition.

For interacting with the environment, while students can use the mouse, the same or nearly the same operations are available through the keyboard. Blocks can be used forever, for any possible program, through the use of the blank block. You can add a blank block anywhere in the editor by pressing the Enter key, just like adding a new line of text to a document. You can think of it as a temporary place where you can write in text, or leave it blank for padding.

Because blank blocks are added just like adding new lines, and can be immediately typed into, you can write programs in the editor just like you were writing raw text. You can also ignore the Block pane completely or use a mix of both. The point is you can type lines when it is quick or convenient and use the Block pane when you want to explore or look-up the name of an action.

During the upcoming Engage, you will explore the many different options available for your game. This includes ways to add new platforms, introduce other obstacles, or play music. While exploring, the goal is to find things that interest you.

Engage

In this section, you will explore the Objects in your program, think through the kinds of levels you will make, and experiment. The goal is to examine the different choices and figure out what kind of game you want to make.

Directions

As a first step, open Quorum Studio, load Main.quorum and select the line

Level level1

Once you have done so, open the Blocks Tab and select the Advice category, then observe the kinds of actions that are available. Try to find actions that seem fun or interesting. Once you have explored, make a list of the top three actions you want to use when writing your level.

Consider at a high level what some of these options are. Perhaps you want to change the gravity or the background art. Perhaps you just want to mess with the player to the maximum extent possible. The decision is yours.

Once you have some ideas for what actions you want to use, try them out! Try adjusting level 1 with what you’ve found, or create a second level with at least two platforms and add it to the game. Do not forget that games are really about trying to help the player have fun. When designing your game, being cheeky, tricky, or silly is part of the process.

Next Tutorial

In the next tutorial, we will discuss Puzzles, Variables, and Loops, which describes how to create your own puzzle game with integers and loops.