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.

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!

15 Replies to “Keep Your Head in the Game: Advanced Storyline”

  1. […] have been awesome, but I’m saving it for another day). However, when I stumbled upon this interesting idea by Articulate power user Zsolt Olah, I thought it would be a great excuse opportunity to actually use one of those game design programs […]

  2. Ben Hall says:

    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!

    • olahzsolt@hotmail.com says:

      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.

      • Jeremy says:

        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!

        • Where did you get stuck?

          • Jeremy says:

            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.

          • Jeremy says:

            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?

  3. […] I can get Storyline and my game to communicate with one another. In doing so I stumbled upon this excellent blog post by a fellow instructional designer on this exact […]

  4. alya says:

    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 ?

  5. Carles says:

    Hi Zsolt,

    for some reason I am not doing it well…

    I created the Storyline file with the two variables GameScore and GameOver. In the ‘user.js’ file you offered above, should I modify something to include these two variables?

    Sorry, I am not used to Javascript.

    thanks

    • Once you have the storyline file you can add the webobject inside. Your webobject can communitate with Storyline from inside their own content. In the game you can use JavaScript to change the Storyline variables in Storyline. Inside the game you can do something like: parent.SetVar(“GameScore”,xxx); where xxx is the score you had the in the game. How you do that depends on what tool you created the game with. In my examples, I use Construct game engine. Inside Construct I can executive a javascript like: parent.SetVar(“GameScore”,myGameVar); where myGameVar is the variable that stores the score inside the game.

      • Carles says:

        Hi Zsolt, thanks for your answer, but I think that’s exactly what I was doing:

        In Storyline I create the ‘GameOver’ variable and add the trigger ‘when GameOver variable changes go to next slide’.
        In Construct2 I create the trigger ‘when you click on (sprite on screen) execute javascript “parent.set.Var(‘Gameover’, 1);”

        I add the construct2 as webobject in SL, but when I click on that sprite it doesn’t move to the next slide.

        In the user.js file I wrote:

        function getVar(GameOver)
        {
        var player = GetPlayer();
        return player.GetVar (“GameOver”)
        }
        function setVar(GameOver)
        {
        var player = GetPlayer();
        return player.SetVar(“GameOver”);
        };

        I really appreciate your help,

  6. Carles says:

    I solved it, I forgot ” ” !!

    Thanks Zsolt for help us all.

  7. John ball says:

    This is really helpful! I’m hoping to design an iPad/iOS app that would interact with a blue tooth accelerometer.

    My question is:

    Would it be possible to launch an iPad app that’s already installed on the device from a web object within storyline?

    The idea being that it then sends the player back to the LMS hosted course once complete (utilising javascript as above)

    Regards,
    John.

Leave a Reply

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