Keep Your Head in the Game: Advanced Storyline

 

Construct 2 and Storyline
Use Construct 2 Game Engine with Storyline

Are you an advanced Articulate Storyline user?  You probably know a lot about variables, triggers and conditions. With clever combination of these elements, you can create powerful branching e-learning scenarios.

Now, imagine if you could play a mini game in the middle of a Storyline course. A game that communicates with your course, and based on the points you achieved or mistakes you made would provide you a different branch to continue.

Imagine you gain some powerups in Storyline as you answer questions correctly, and you could take them to the game. Imagine you could play the mini game inside the e-learning course only if pass the confirmation of learning.


Now, stop imagining and let’s make it happen!

In the following steps I’ll introduce you to the concept of how to embed a game created in Construct 2 game engine within a Storyline module that includes communication between them. For details and example files feel free to reach out to me.

Assumptions: you have created a mini-game in Construct 2 and authored an e-learning module in Storyline. You want to show the mini-game in Storyline. When the game is over you want Storyline to automatically move to the next page and show the score the learner gained in the embedded game.

Step 1: Storyline Communication

Embed the game using the Web Object in Storyline. Add the absolute path to your game in the Web Object. Create two variables: GameOver and GameScore. Add a trigger on the slide you have the Web Object and set up a condition: move to the next slide when the GameOver variable changes. On the next slide add some text displaying the score using %GameScore%.

What you’ve done so far is set up a trigger to move to the next page when GameOver is changed. Now it’s time to publish and test. The game should be playing on the slide you embedded but Storyline will not move to the next slide because there is no communication between them yet.


Step 2: Building the “User Bridge”

In order for the game to be able to access the Storyline variables we need to add a couple of lines in the user.js file. In the published story_content folder you’ll find a file called user.js. Open the file with a text editor and add the following lines at the bottom:

function getVar(x)

{

var player = GetPlayer();

return player.GetVar(x);

}

 

function setVar(x,v)

{

var player = GetPlayer();

return player.SetVar(x,v);

}

NOTE: As of today, this user.js is regenerated every time you publish the module. That means you have to add these lines after each publish. If you can help me being smarter with this it would be great!

The two functions will be used by the game to get a Storyline variable (getVar) and set a variable (setVar).

Step 3: Game Communications

At this point you only need to do is use the functions we added above in the game. In Construct 2 game engine you can call a javascript function using the Browse object. If the GameEngineScore is the variable in the game storing you final score, then you would call the following javascript function:

“parent.setVar(‘GameScore’, “&GameEngineScore&”);”

The last step is to change the GameOver variable in Storyline, so the trigger on the page would fire.

“parent.setVar(‘GameOver’,1);”

As soon as the game calls the second function it sets the Storyline variable GameOver to 1, which the fires the trigger and Storyline moves to the next slide.

Tip: to avoid headaches make sure the Storyline course and the embedded game are on the same domain.


Step 4: Be Creative!

What else can you do with Storyline and a game? Choose your adventure? Different levels based on your skills? A mini-game as a reward for completing the Storyline module?

This communication strategy works not only with Construct 2 game engine but any other javascript-based games, you only need to modify Step 3. I’d love to hear from anyone implementing something exciting!

Share:

9 thoughts on “Keep Your Head in the Game: Advanced Storyline

  1. Hi there! I stumbled across your blog today and, as luck would have it, I’ve also been working on an assignment where I’m incorporating minigames into a Storyline project, so this was really helpful! If you get a chance, I’d love to see your example files. As a sidenote, I really like using Construct 2 after trying both Stencyl and GameSalad. I’ve enjoyed playing around with it lately. Also, I loved your post about learning Java. That’s next on my to-do list!

    1. Ben,

      I’m glad it helped. This blog was more about the how. But I’ll post the source files for the “When I ruled the world”, both Storyline and C2. It’s using the same concept.

      1. Hey, I am working on something along these lines and I found this very useful. But I am getting stuck. I would love to see those source files if you have a link to them.
        Thanks!

          1. I got stuck using variables. I was able to send a variable from the game back to Storyline to get Storyline to progress to the next page, but was not able to pass a global variable from Construct with the game score back to Storyline. I must be missing something.

          2. OK. So I actually got this to work. It is GREAT! Thanks for posting this stuff. Have you ever tried to send variables from Storyline to Construct 2? For instance, if I wanted the user to enter their name in Storyline and have it display in Construct 2 would that be possible? Or if they got a certain amount of points in a Storyline quiz, could I then transmit a variable to Construct 2 to give users a certain weapon or spaceship or something in the Construct 2 game?

  2. Hi ,thank you for the explanation of this wonderful construct addition for storyline.
    I tried to embed the game into the slide but the controls doesn’t work and the game is not playable. do you have a solution for this ?

Leave a Reply

Your email address will not be published. Required fields are marked *