UPDATE 2020: This article is now 4-5 years old. A lot has changed since. Apparently, many elearning designers out there are still interested in combining Storyline and Construct 3 (or any other HTML5 webobject), so I’m updating this content and publish it soon.

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!