eLBX Online Day 14 – Building an Advanced Game in Storyline

 In eLearning Brothers



When I was first planning this webinar, I was going to get into the industry thinking around games, best practices, etc. About half and half discussion and practice—but honestly, having seen the great presentations we’ve had so far this week, I decided to let you watch those well-done gamification discussions on the industry and best practices, and instead focus on just the nuts and bolts. I wanted to give you practical tips and tricks for how to build out some cool interactions in Storyline 3/360—a game-focused how-to.

So today I focused on looking in the actual tool and breaking down how to make some very useful, very simple things happen in Storyline that can feed your game development.

The majority of what I covered includes elements, tips, and tricks that I used in building the Eibhlin’s Quest game we have up in our library. It’s a full, side-scrolling game that is built much more like a real video game than a standard quizzer.

And, it’s built only in Storyline without Javascript or anything beyond what Storyline can do out of the box. But it doesn’t look like it’s a Storyline course—or act like it, really.

So I figure it’s a good place to anchor our conversation:

1. It shows you what can be done with the tool you already have and the simple tips I’m going to show you today, and

2. you can download it and break it apart to learn from it if you’d like. Just hop into the library with your subscription, and you’ve got the source to learn way more from than we can cover today.

The game is available with a Template Library Subscription or a 7-day Free Trial.


Today on the blog I’m showing you one technique from the webinar. Stay tuned for the webinar recording to be posted tomorrow on the eLBX Online Page to see the rest of my tips and tricks!

First up: timers.

In games, timers are your friend.

In gaming, we see a lot of timers—timers to tell you how long you’ve been on a task, how much time you have left on a challenge, etc.

But timers are also critical off-screen in Storyline—they can be used to control the pace of actions in the game, unbeknownst to the user.

  • For instance, If you want a boss to attack on a regular (or even irregular) interval, you’d need a timer to trigger that attack.

There are a few ways to handle timers in Storyline, but we’re just going to cover 1. It’s simple enough for a beginning developer to do on their own, and useful enough that a seasoned veteran would still make use of it.

Here’s how a simple timer works in Storyline:

  1. Create a new shape—called Timer 1—in Storyline.
  2. Add a motion path to that timer—this can be in any direction, any shape. The only details that matter are: length of the animation, and the name of the motion path.
    • Animation Timing: should be the value of the pause you’d like to give between actions (we’ll clarify this in a second). In this example, we’re going to make it easy and keep the animation timing to 1 second.
    • Motion Path Name: I recommend making this a custom, easy-to-read value for each motion path in the course. In a course with a large number of motion paths, good naming makes selecting the right one later on much easier. We’ll call the first path here: TimerPause1
  3. Next, move to your triggers pane and set your action.
    Note that the animation timer runs as soon as the slide loads—this can be changed if needed, and we’ll talk about why you might want to do that in a bit, but for now, we’re going to leave this as-is.
    At this point, we want to add the action that occurs when the timer shape finishes its motion: in my example, I’ve got a variable called timeRemaining that is being displayed on the screen in a simple text box.
    When the timer completes its motion, I want Storyline to subtract 1 from the timeRemaining value (which is currently set to 30).
    Its value should then auto-update, and appear to “countdown” from 30 to zero.
  4. Add any conditionals you might need to the initial trigger.
    Since we don’t want the timer to count down past 0, we need to add a single conditional to the timer trigger that only causes our variable to update if its value is greater than zero.
  5. Next, let’s run our timer and see how it works.
    Note that our timer only updates once.
    This is because we only run our animation 1 time—at the top of the slide—and our variable update is tied to that animation.
    To get the countdown to repeat indefinitely—or to the terms specified in our conditional statement—we need to add one last thing: a loop.
  6. Add a new trigger that tells Storyline to run the timer again once the initial animation is complete.
    • You could also tie this to the variable value (i.e., instead of running the animation when the TimerPause1 animation completes, run it when the timeRemaining variable updates).
      This is useful for simple timers, but the method we used can be extended to more situations.


This same method can be made pretty complicated, and very useful.

For example, if I add multiple motion paths to the same object, I can have multiple events occur at unique times—and if I tie this to a variable, I can keep track of everything cleanly and add conditionals to start/stop actions at given points.


In practice, that looks like the following:

  • Here, I’ve added three additional motion paths to my timer shape, and named them individually.
  • They each have unique times.
  • In addition to tying them to a variable change (which I might use to keep track of where my timers are in the game), I’ve also tied them to a state change of the character I’m showing on screen.
    • When TimerPause1 completes, we change the character to state 1
    • When TimerPause2 completes, we change the character to state 2
    • When TimerPause3 completes, we change the character to state 3
    • When TimerPause4 completes, we change the character to state 4

With this method, I can make the character appear to “dance” through a cycle of different poses.

You can do just about anything you can think of using this method—and, in fact, I use this exact method for creating a timer in loads of situations.

Our sorting dragger template, for instance, uses this exact method to reset the dropzone states once a dragger has been correctly or incorrectly placed.

In Eibhlin’s Quest, this is how I make attacks happen (like the boss attack at the end of the game), how I increment the variable I use to keep track of position (which I discuss later in the webinar), etc. This is a super useful trick for a wide variety of applications.


This is just one trick from today’s webinar. We’ll be posting the recording tomorrow so you can see everything! 


There’s one more gamification webinar tomorrow! Click below to register.


Source link

Recent Posts

Leave a Comment