Hour of Code Activity (Web)

The GameSalad Interface

When you first login to http://creator.gamesalad.com, you will see the GameSalad Dashboard. From here, you can start a new project, open a previous project, or see your list of published projects.

Let’s start by creating a new project based on a template. To do that, click the “New” tab in the upper left side of the screen.

This will show you a list of all the templates you can choose from. For this tutorial, we’re going to use the Wizard Run template. Click on the template labeled Wizard Run to add it to your project list.

After you click the Wizard Run template you should see a notification pop up in the bottom left of the screen. After that happens head back to your project list by clicking the “My Projects” tab in the upper left (right under the “New” tab).

You should see the “wizardrun_starter” project in your project list now! Go ahead and click it when it’s done importing to open it up.

GameSalad is split into 2 major parts. The Scene and Actor editors.

When you open the Wizard Run project you created, the Scene Editor will appear.

The Scene Editor is split into 3 sections:

Library, where you can add actors, scenes, assets, and tables, as well as see the list of behaviors GameSalad
Stage, where you can add actors to your scenes and position
Inspector, where you will create and modify attributes (variables) for your scenes and the game as a

If you click on the Scenes tab in the Library, you’ll see the list of scenes in your game. You can click the “+” button in the top right to add a new scene, or click the trashcan button next to a scene to delete it.

If you click on the Actors tab in the Library, you’ll see a list of all the actors in this project. Clicking on an actor will switch your view from the Scene Editor to the Actor Editor.

Just like the Scene Editor, the Actor Editor is made up of 3 sections:

Library, where you can create new actors, scenes, assets, and tables, as well as see the list of behaviors GameSalad supports and add the behaviors to your
Logic Stack, where you add the logic for each of your individual
Inspector, where you will create and modify attributes (variables) for your

If all of this seems a little overwhelming, don’t worry! We’ll be going into what everything is in a little more detail below.

Key Concepts

There’s a few key concepts you’ll need to understand to use GameSalad. Most notably, you’ll need to know what actors, scenes, attributes, and behaviors are.

Actors

Simply put, actors represent every object inside your game that the player can (or can’t) see and interact with. In this Wizard Run game there’s some already made actors such as the wizard that the player controls, the bricks that the wizard stands on, and the dragon.

You can add new actors “+” button in the top right of the Library with the Actors tab selected.

Behaviors

Actors by themselves don’t do anything! Behaviors are bits of logic that you can add to actors to make them do what you want. For example, if you wanted to have an actor move, you could add a Move behavior to it!

Rules are a special kind of behavior that hold other behaviors inside of it. Rules also have conditions (that you give them) that stop the behaviors inside them from running until something specific happens.

Using the same example as above, if you wanted to have an actor move only when the right arrow key is down, you’d need a Move behavior inside of a Rule with a “key” condition with the right arrow key selected!

You can add behaviors to actors in two ways:

Locating the behavior you’d like to add in the Behaviors tab of the Library, and then dragging said behavior into the logic area. (Tip: The behaviors are listed in alphabetical order, and you can type the names of behaviors in the behavior search bar to quickly locate them)
Clicking the Create Group, Create Rule, or Create Timer buttons in the upper right of the Logic

Attributes

Attributes inside GameSalad store all the data for your game just like variables do for computer programs! There’s 6 different types of attributes that hold different types of values:

Integer – Integer attributes can hold all positive and negative, whole number Example integer values: 7, -23, 10.

Real – Real attributes can hold all positive and negative, whole and decimal Example real values: 2.6, -17, 3.14159265

Boolean – Boolean attributes can only hold the values true/false. You can think of boolean attributes as a switch that can only be on or

Text – Text attributes can hold text Example text values: “Hello World!”, “h”, “h-i-5”.

Index – Index attributes can hold only positive, whole number Example index values: 5, 0, 200.

Angle – Angle attributes can hold values between 0 and This attribute is best used for representing angles. Example angle values: 240, 90, 183.6.

Each actor inside GameSalad has a lot of built-in attributes that you can access, but you cancreate your own attributes too so the possibilities are endless! Some of the built-in attributes are an actor’s width, height, and even physics attributes like an actor’s density or velocity.

The last thing that’s important to know about attributes is that there’s both game attributes and actor attributes. Game attributes can be viewed by and changed by every actor inside your game, while actor attributes can only be viewed and changed by the actor they’re on.

You can create your own game or actor attributes through the “+” button in the top right of the Inspector area.

Scenes

The last major concept to understand is scenes. Simply put, scenes are what the player sees when playing the game. Scenes are where you add your actors so that the player can interact with them. You can think of a scene as an individual level for your game.

You can view your existing scenes and create new ones in the Scene tab of the Library. This is also where you’ll select which scene you want to edit.

Provided Actors

In the Wizard Run project provided, there’s some pre-made actors already available that you can check out, edit, and use! The actors were created with custom attributes to make editing different aspects of the game easy and intuitive.

For example, if you want to make the character you control move faster or slower, you can open the Actor Editor for the actor named “Player”, and edit the “PlayerSpeed” attribute in the Inspector.

List of provided actors:

StudentName – This actor displays the text “Created By: Your Name Here”. that you see on the Intro scene of the

If you select this actor and look in the Inspector, you’ll see an attribute with the text “Your Name Here” inside it. You can replace that text with your name to have it display on the Intro scene!

Background – This actor doesn’t have any behaviors inside it, but it serves as the background image on each

Player – This is the most complex actor in terms of It moves, animates, plays sounds, and collides with other actors.

It moves through changing its built-in linear velocity x and y attributes, and changes the built-in graphics attribute “flipHorizontally” to make sure that the animation is facing the correct direction that the actor is moving.

You can change the Player actor’s gravity, speed, and jump power via attributes in the Inspector.

Dragon – The dragon moves using the same behaviors as the Player actor, though it moves on its own instead of when a player presses specific

You can easily change the distance the Dragon travels before turning around and the speed it moves at through actor attributes.

Key – The key plays a sound and changes the scene from whatever scene it’s currently on to the next scene based on the order in the Scenes tab of the

For example, based on the following order, if you had a key on the “Intro” scene, and it collided with the Player actor, it would change the scene currently being displayed to the “Level 1” scene.

Using the same example, if you moved the “You Win” scene in front of the “Level 1” scene, when the collision occurs the scene would change to the “You Win” scene instead.

Bricks – This actor doesn’t have any logic inside of it, but some of its built-in attributes have been edited to allow it to tile the same image over and over when

BricksWithGrass – This actor is very similar to the Bricks actor, though it only tiles when resized left to

DeathAnimation – When the Player actor collides with the Dragon actor it destroysitself and spawns this actor. This actor moves up off the scene while rotating, and restarts the current

StartButton – This actor changes the current scene to the Level 1 scene when it’s clicked.

LayoutLevelText – This actor has no logic in it, and just has an image to show the text on the “Level 2”

Title – This actor has no logic in it, and just has an image to show the text on the “Intro” scene.

YouWinText – This actor has no logic in it, and just has an image to show the text on the “You Win”

Activity Steps

Adding Your Name to the Project

Navigate to the Intro scene by selecting it in the Scene tab of the

Locate the StudentName actor in the Actors tab of the Library (it should be near the top of the list), and click it to open up the Actor

In the Inspector area (on the right), find the StudentName attribute. You’ll notice that is says “Your Name Here” by

Select the text inside the attribute (to edit it) and replace it with your name. I went with the name “Mr. Ninja”.

Previewing the Game

Now that your name is filled in, go ahead and preview the project by clicking the green preview button at the top right of the editor!

If the game is showing up a little bit too big or small for your screen, you can use the zoom dropdown on the left side of the of the window to resize it.

You should see your name below the text “Wizard Run with GameSalad”. Go ahead and click the start button and play through the first level.

The game is set up to use the left and right arrow keys for movement, and the spacebar for jumping. Once you grab the key, you should be taken to a new scene that’s blank except for the text “Delete this image and layout your own level here!”.

Click the “X” button in the Preview browser tab to close it.

Creating Your Own Level!

The next thing we’ll need to do is get rid of that text we saw and put together our own level!

Click the Scene tab in the Library, and select the “Level 2” scene. You should see the Scene Editor appear with the text we saw when previewing earlier!

Select the text on the scene and delete it using your delete key, so that you’re left with a completely blank scene.

Drag the “Background” actor from the Inspector onto the scene and position it so that it fully fills the

Build out your own level by dragging, resizing, and positioning the various provided (use the “Provided Actors” section above as a reference if you don’t know what each specific actor does).

Here’s what my level looks like:

Once you’ve laid out a level, preview the game again and make sure you can beat it! If you make it through your level and collect the key, you should see the You Win scene.

After you’ve created a level that’s beatable and can make it all the way through the game, try editing the Player actor’s attributes, adding more logic to actors, or creating your own actors to make the game unique!

There’s 3 provided attributes that you can easily change that will greatly affect how the game plays, and those are Gravity, PlayerSpeed, and JumpPower. They’re all actor attributes for the Player actor.

When you’re done playing around with the attributes, try taking on one of the challenges below!

Challenges

Challenge 1: Personalize Your Game

Find and modify assets (art and sounds) for your game.

What theme will your game have?
What will the main character be?
What will your obstacles or collectables be?
What sounds/music will enhance the theme of your game?

Challenge 2: Make Your Game More Difficult

Make each level of your game more challenging than the previous level. Here are some ideas to get you started:

Speed: How does increasing or decreasing the speed of your character change the levelof difficulty? How fast is too fast to play? How slow is too slow to stayinterested?
Obstacles: What are the best spots for placing obstacles to increase the difficulty ofyour level? What size should your obstacles be in each level?
Difficult Jumps: Can you create multiple platforms for the character to jump on? Can you place platforms in a way that will require more skill from the user?
Longer Levels: You can increase the size of your levels by increasing the size of your level scenes. If you do this and give the Player actor a control camera behavior, you can design levels that are much wider or taller!

Challenge 3: Keep Score

Can you add something for the player to collect along the way that increases a score value? Or perhaps you could give the player a score based off how fast they complete the levels.

Create an attribute to keep track of the players
How/where will you display the score?
If you add collectibles, how many points will each item be worth?
Can you make different types of collectibles that will be worth different point values?