July 2, 2017

Building Games in Storyline: River Crossing Puzzle

E-learning Heroes Challenge #173 is all about brain teasers: not only do users get to solve some puzzles, but you, the developer, have something to think about. For this challenge I decided to recreate one of the river crossing puzzles, where you need to move three things across the river: the wolf, the sheep, and the cabbage. There is space only for one cargo item on the boat. Naturally, when left alone, the wolf will eat the sheep and the sheep will eat the cabbage. You can see my version of it here.

In this tutorial I will focus on creating the interaction and will omit the decorations, such as the moving water and clouds, animated boat, or the design of  the feedback slides. However, if you'd like to hear more about these topics - let me know. The tutorial assumes that you know the interface of the Storyline and know how to start creating basic triggers, variables and states.

The Assets

If you want to use the same assets as I did, you can download the exact images here. Please note that these images are designed by Freepik. You can download the originals as follows:


The Project

Before we begin, let's take a look at our final goal. Not counting the title slide, this project is using four slides in total. Two slides are "end slides", which the user will see in case either the sheep or the cabbage got eaten. The other two are the river shores.

The slides used in this challenge

There's a saying in Russian that "laziness is the driver of progress" and I tend to wholeheartedly agree. As you notice, I did not (and usually do not) build slides for each possible combination of animals on each shore. I know some Storyline users tend to do that, saying that it is easier than dealing with cumbersome variables. While this is true in some cases, looking back at the projects I built, in most situations I don't find this easier or more helpful than working with variables. Instead of keeping track of all this information myself, I prefer to give instructions to Storyline and let it do all the hard work. See? Laziness in action. I hope this tutorial will help you embrace your inner sloth and find ways to do less work in Storyline.

Create the Slides

Go ahead and create three slides:

  • Shore 1
  • Sheep Eaten
  • Cabbage Eaten

Note that we are not creating the slide "Shore 2" yet - this is intended.

Leave the "Shore 1" empty for now and put some text on the "Eaten" slides, so that you know which one is which when you test-run the project. You can, of course, design them a bit more, if you wish.

Create Variables

We have three items (the wolf, the cabbage, and the sheep), two shores and two possible tragic outcomes. In other words, we need to know where our cargo is (in shore 1, shore 2 or in transit on the boat) and if it's still faring well.

Let's start by creating several True/False variables, as shown below:

List of variables you will need

Since you begin with all the items on Shore1,  set the variables for Shore1 to "True" and variables to Shore2 as "False". Since the cabbage and the sheep are not dead, set the variables for tracking their vital signs to "False".

Build Shore1: Objects and States

For the sake of brevity, I will refer to the wolf, the sheep and the cabbage as "animals" (sorry, cabbage!). Speaking of which, in addition to the obvious objects, such as a boat and the animals, you will also need to create the following:
  • a shape for the cargo hold (this is what makes the animal "appear" on the ship)
  • a "Submit" button (this submits the user's choice and triggers the navigation to the other slides)
Important objects on Shore 1

You can create the "Submit" button in any shape or format or even use the button in a player. In my example I'm using a hotspot positioned over the ship. Go ahead and create your "Submit" button in any shape you desire.

In my example, the users needs to click on the animals to move them to or from the boat. What happens in Storyline is that when the user clicks one of the animals, the state of the shape "Cargo" changes it's state to match the selected animal. The state of the selected animal changes as well. Let's build this.

Format the "Cargo" shape to have no fill and no outline. Then create a new state called, let's say, "Cabbage" and add a picture of the cabbage to it. You can also add a brief "Fade" animation to this picture. Repeat this for the states "Sheep" and "Wolf". This is what you should have in the end:

States of the "Cargo" shape.

Create states for the animals. In my examples I've created the "Hover", "Selected" and "Disabled" states. You can omit the "Hover" and "Disabled" state, if you like, the important part is to have the "Selected" state. For the ease of following this tutorial, I recommend including the "Disabled" state as well (otherwise you will need to use "Hidden" state in all triggers that use the "Disabled" state).

"Selected" and "Disabled" states should be empty. To achieve this, simply delete the image of the animal from the state, while in the "Edit states" mode.

This is how the states of animals should look like.


Note: make sure that you're using the built-in states and not creating custom states that you name "Hover", "Selected", etc.


Shore 1: Loading the Animals (Triggers and Variables)

Time to make all of the objects interactive. What we're trying to achieve is the following:

  • When an animal on the shore is clicked, the state of the "Cargo" should change and the variable "XonShore1" (X is the name of the animal) should change to "False"
  • When an animal in cargo is clicked, the state of the animal on the shore and the state of Cargo should change, and the variable "XonShore1" should become "True".


First, select all three animals and add them to the Button Set. Then, select and animal (e.g. wolf) and create the following two triggers:

Repeat for each animal

Add similar triggers to the sheep and the cabbage. Preview your slide - it should look like this:

Animals are moving into cargo

Now we can load the animals, but we also need to have an option to unload them, without picking up a new passenger. Essentially, what should happen, is that the state of the animal on the shore should change from "Selected" to "Normal", when the user clicks the animal in the "Cargo". Which animal's state will change will depend on which animal is currently standing on this ship. In addition, we need to adjust the variable "Animal on Shore 1" to "True".

Click on the "Cargo" and create the trigger to make the animal in cargo appear on the shore (I'm starting with a wolf in this example):

The state of the Wolf will change if the Wolf is in Cargo.

Next, create a trigger to adjust the variable "WolfonShore1" to "True" when the user clicks the Wolf in Cargo:

Don't forget the condition.

Repeat the same for the remaining animals. In the end, the list of triggers for object "Cargo" should look like this:

Two triggers for each animal.


Finally, add a trigger to change the state of the Cargo itself:

Very easy

Make sure that this trigger appears at the end of the triggers associated with the object "Cargo". You can add conditions here (such as "If state of 'Cargo' is not 'Normal'") but they are not particularly necessary.

When I work with variables, I often add a text box with the variable references to the slide, to have a clear visual indicator that they change correctly. For example:

These can be found in Insert > Reference menu in Storyline 2


Preview the slide and try to load and unload the animals. You should see something like this:




As you see, the variables are not always changing correctly. If I click on the sheep while the wolf is in cargo, the variable "WolfOnShore1" will remain false, even though the wolf is on the shore (this is also true for other animals). Let's fix this.

We need a trigger that starts when the user clicks on an animal on the shore while another animal is staying in cargo. Select the wolf and add the following trigger:

Is the sheep in cargo? Then it will be moved to the shore if we click another animal.

Add the similar trigger to the wolf, but this time with the cabbage. When you're done, take a look at the list of triggers associated with the wolf. If you've been following this tutorial exactly, you will note that one of the triggers - "Change State of Cargo to "Wolf" when the user clicks" - is located somewhere at the top of the list. Move this trigger to the very bottom, so that all variables get adjusted before Cargo changes it's state:



Repeat for other animals. In the end, the animals should have the following triggers associated with them:

Note the order of triggers.


Preview the slide once again - the variables should adjust correctly no matter where and how you click. At any time, there should be only one "false" variable, as at this point only one animal can be on the boat (not on the shore).

Shore 1: Set Sail

With the loading and unloading taking care of, it's time to turn our attention to the "Submit" object we created earlier and add the navigational triggers.

This is a relatively easy part, as we will need to achieve the following:

  • Show user the "Sheep Eaten" slide, if the wolf and the sheep are on the same shore
  • Show user the "Cabbage Eaten" slide, if the sheep and cabbage are on the same shore
  • Show user the "Shore 2" slide, if both the sheep and the cabbage are safe.

Create the following triggers for the "Submit" object:



The point of this is to, firstly, verify if either the Sheep or the Cabbage are "dead" and then navigate the users to the appropriate slide, depending on what happened.

Note that since at this point we don't have the slide for Shore 2 yet, I used "jump to next slide" option as a placeholder. We will correct this in a moment. Also, don't forget to use "AND" in this trigger - the user should proceed only if both objects are safe.

Building Shore 2: Setting the base

Duplicate the slide "Shore 1" and rename it to "Shore 2". Go back to "Shore 1" and update the "jump to next slide" trigger I mentioned earlier, so that it points to "Shore 2" instead. 

Now, go through the list of all triggers on slide "Shore 2" and change anything that contains "Shore 1" in its name to the matching variable named "Shore 2" instead. For example, if you have a trigger that adjust variable "SheepOnShore1", change the variable to "SheepOnShore2", without changing anything else. It's a bit of a slog, but better than writing from scratch. Once you're done, preview the slide and check that variables for Shore 2 are changing appropriately (note that you will start with them as "False" at this stage - this is intended.

Shore 2: Reflecting the Reality

At this stage, when you preview "Shore 2", you will see all animals on the shore, even though they shouldn't be there. Let's change that and add these three slide triggers to disable the animals, when they are not on Shore 2:



In addition, we need to make sure that the user can see the correct animal on the ship. You may remember that when an animal is on the ship, it is, in terms of variable values, neither on Shore 1 nor Shore 2. In other words, if both these variables are "False", the animal is in the cargo. Let's add slide-level triggers to reflect that:



To check if everything works, preview the whole scene and click around.

Back to Shore 1

In your preview you may have noticed that if you sail back to Shore 1, it will not show you the correct status of pretty much anything. Let's fix that. 

First, adjust the slide properties for Shore 1 and Shore 2 to "reset to initial state". Then, go back to slide "Shore 1" and add the same triggers that we created previously for "Shore 2", but this time replace all variables with the ones that are relevant for "Shore 1". Essentially, you can simply copy the 6 triggers we created in the previous steps from "Shore 2" to "Shore 1" and make necessary adjustments. In the end, you should have the following Slide Triggers on "Shore 1":




Final Feedback

Finally, let's go back to Shore 2 and add an option to let the user know that the task was completed. In my example, I used a layer that appears when the last animal have been moved to the shore. 

Go ahead and create a layer with the matching message. In layer properties, select the option to "Prevent the user from clicking on the base layer". Then go back to the main layer, select "Cargo" shape, and add the following trigger to it: 



Preview your project and enjoy the ride - you have built your own river crossing puzzle. If something is not working, you can download the Storyline 2 file used in this tutorial from here.


Questions? Comments? Anything missing or can be done better? Let me know in the comments or connect on LinkedIn.


No comments:

Post a Comment