“Build a Star Wars-themed Interaction, This Week Your Challenge Is”

ej-blog-post-tldr-star-wars-challenge

THE CHALLENGE

So I came across this conversation on Twitter the other day.

twitter1

I like Star Wars. I knew I would be doing exactly the same thing; I would be reading, searching, and viewing all things Star Wars this week. My wife and I had tickets to the first showing in town at the IMAX 3D (I was one of the many causing Fandango to crash the night the tickets were first available), and we were really looking forward to going on Thursday night.

I felt I had to do something for this occasion, and I had an idea I’d been wanting to try in Storyline for quite some time. So I replied to David Anderson’s tweet.

twitter2

Game on.

THE IDEA

I’ve been wondering if it was possible to move things around on x and y axes simultaneously in Articulate Storyline without coding – using just the triggers and tools available within Storyline. If you can do this, there’s an awful lot you can do with various interactions and simulations.

For example, you could simulate a 360-degree environment – akin to what the gaming industry calls a skybox – using 2D assets and parallax effects.

There’s a wonderful game I played in my youth called X-Wing, by LucasArts. To this day it is one of the best space combat simulators I’ve ever played. Yes, it was even better than Wing Commander III.

And no, I haven’t played Chris Robert’s latest innovation, Star Citizen (although I sure do want to!). To date it seems like an amazing game, but it is a “rich people” game, of which I do not currently qualify. I am also keeping a close eye on Eve’s upcoming game, Valkyrie – literally teared up watching its trailer, the gameplay looks so beautiful.

PREPARATION

So I wondered what I would need in Storyline to implement my idea.

I started with the background. In order to set up a 360-degree environment from a 2D image, I looked up how to best break up my 2D image into different parts.

Originally I wanted to take a large space image I had in my inventory and divide it into 25 sections, like so.

2015-12-15_16-35-04

I numbered the sections as follows, making notes as to how I saw the pieces overlapping (for example, I intended 21 to connect to 11 when moving left along the x axis, 23 to connect to 24 when moving up along the y axis, etc).

2015-12-15_16-35-04-annotated

I thought this would have made a really slick skybox. Especially since I knew exploding the resolution in this way would produce a grainy look that would fit the retro aesthetic I was going for. However, since I didn’t know if my idea would actually work, I only made images 1, 2, and 3.

I went ahead and then made the rest of my assets, using SnagIt and Camtasia to take images from online gameplay footage of X-Wing. I used Photoshop to make my cockpit (removing the star field background and exporting the image as a PNG with transparency to “create” the windshields). I pulled some stock assets from my media library to make my “Star Distractor”, enemy fighters, and explosions, and I used PowerPoint to create my lasers blasts and buttons.

I went ahead and created my own opening text scrawl, replacing X-Wing’s opening scrawl with my own using Camtasia and the Star Wars crawl creator.

Then I customized the player. I chose TandySoft as the font for this project because it so closely imitated the font used throughout the original game. I changed the player buttons and hover states to match the light and dark themes of Star Wars, with Luke’s green lightsaber serving as the inspiration for the icon colors and seekbar, and Kylo Ren’s lightsaber serving as the inspiration for the button states and volume control.

2015-12-19_23-52-41

Creating the assets was the easy part.

DEVELOPMENT

My plan to make my lasers worked – to some extent. I needed to reset my lasers and bring them back to their starting point after they flashed towards the target reticle, so they could be ready to shoot again, but Storyline wasn’t allowing me to achieve this easily.

2015-12-16_13-14-50

Eventually I ended up using a reversed motion path to send these objects back to their original positions (in 0.25 seconds).

If you look closely, you can see a pair of sliders on the screen on the top left and right of the cockpit window. The one on the left, Slider2, was going to represent my y axis. The one on the right, Slider1, was going to represent my x axis.

I made a series of layers the represent a smaller grid I made for each of the background images on this slide. My first plan entailed using the sliders as variables that would control the appearance of layers beneath my cockpit layer. I then tied my button controls, viewed on the right of the cockpit, to variables. Eventually the left and right buttons were tied to the x_position variable I created and the up and down were tied to the y_position variable. Then I used Storyline’s triggers to ask the program, when x_position equaled 4 and y_position equaled 3, show layer 4×3. Again, I only did this for three layers to see if this would work.

And it didn’t work. For some reason, Storyline would not allow me to display layers in this fashion, despite the fact I’ve used layers in very similar ways before (using one top layer to control and present layers beneath). When I tried to set this up using x and y variables as the determining factor in what should be presented, it would display the correct layer, but it would hide all of the other layers, including my necessary cockpit layer.

Of course I had my checkboxes for “Hide other layers” deselected.

I tried everything I could think of to get Storyline to display content in this way. I tried using different slides to represent segments of the skybox in more granular detail. I tried… you know what? I don’t have time to go into all the details on them, but, suffice to say, I spent around 16 hours trying different ways for Storyline to display content on an x and y axis before I decided to try a completely different approach.

Obviously I had spent far more time on this than I had originally planned for, but I was in between projects and was really enjoying the challenge of wrestling with this problem.

My first “completely different approach” involved Unity. I spent a morning trying to create a skybox and pivot-based camera setup that I could export and control from Storyline using JavaScript. While I felt this would be abandoning my original goal of doing everything within Storyline and without programming, I also salivated over the opportunity to show X-Wing in Storyline in this way.

2015-12-20_0-08-50

Using the Unity Asset Store I created my skybox and camera without issue. The hard part was figuring out how to move the camera in the way I wanted (using the controls I had already created within Storyline). I still have a long way to go in learning how to use Unity, and I realized I was not going to be able to figure out this problem in a reasonable amount of time. As much as I was enjoying this, I really wanted to have this wrapped up before my wife and I went to watch Star Wars on Thursday night.

So, I switched gears again and went back to Storyline – this time making something that would at least be functional and somewhat entertaining. What I ended up implementing involved using a lot of sliders.

I placed two images on the background of the cockpit layer and deleted all of the extraneous layers and slides. We would now only be moving along five places of an x-axis of one slide. Forget the 6 degrees of freedom I originally intended. What I was creating now would be more akin to an old school LCD game.

Instead of moving images along positions using layers, I edited the sliders to be the images themselves (turning the track of the sliders all transparent and filling the thumbs with pictures). The images of the enemy ships and the backgrounds you see in the presentation I made are actually all sliders.

I used the grow animation to make the targets – sliders all – appear as though they were approaching the player’s X-Wing. When the user lines up the nose of their X-Wing and fires, the state of the slider changes to, and I seriously named the state this, “exploded_ur_ded”. I not only changed the fill of this state to a picture of an explosion, I added an exploding sound from my audioblocks.com subscription to this layer.

Here’s the short of how this works. Each of the variables had to be figured out for each of the targets, since I was doing this manually using Articulate Storyline’s triggers instead of sensible code.

  • When variable laser_fire equals true
  • And slider(a) is in position (n) while normal
  • And x_position equals x
  • Then add one to targets_destroyed

I then set up another trigger one step down the trigger waterfall with those same conditions, but with the end result being that the slider’s state would change to “exploded_ur_dead.” If you changed the state before you triggered the variable count, the variable count would not take place. Because Storyline doesn’t have anything close to loops or arrays, I had to set this up manually via triggers for each of the six targets I created.

Finally, I used the timeline (and a bunch of cue points and conditional triggers) to set up all the events that would take place in what I now called the “Fight and Flight” slide. After a short amount of time that gave the player a moment to get used to the left and right controls I had set up (along with the fire button), a series of six targets would appear. If the user didn’t destroy a target by a certain point after the target appeared, the user would see a flash of green accompanied by a laser blast sound. Every time this happened, the user would see their shields and aircraft take damage.

2015-12-17_14-52-00

Here’s how the final product is set up.

For the targets_destroyed variable:

  • When targets_destroyed = 1, display movie Nice Shooting!
  • When targets_destroyed = 3, display second movie
  • When targets_destroyed = 6, jump to slide Lightspeed Escape/Victory!

On the victory slide, I just made a slide showing the jump to lightspeed, followed by another slide showing the user flying peacefully toward an Earth-like planet over its moon.

For the damage variable:

  • When damage = 1, display yellow shields
  • When damage = 2, display red shields
  • When damage = 3, display no shields with yellow hull
  • When damage = 4, display red hull
  • When damage = 5, display damaged cockpit
  • When damage = 6, jump to slide Defeat!

The user is also shown the defeat slide if not all of the targets were destroyed by the time the user reaches the end of the timeline.

On the defeat slide, what the user sees depends on how well the user performed.

  • If the user destroyed at least five of the targets before being destroyed, their buddies are able to rescue them and nurse them back to recovery via the rescue sequence shown in the X-Wing video game.
  • If the user is not able to destroy five of the targets before destruction, they get to see the funeral sequence shown in the X-Wing video game.

After all of these scenarios, the user is presented with a final screen that includes a far better, and far more modern web-based game featuring X-Wings that I embedded within Storyline. It’s worth the experience of playing through my challenge just to get to this game.

RESULTS

I was not able to implement my original idea, but I was definitely able to stretch Storyline in ways I had not done before, and I enjoyed my attempt to bring something I had been thinking about for some time to fruition.

If you have an idea or know of a way to control x-y coordinates in Storyline without using code, please let me know. I’m not against coming back to this project and refining it.

However, I think I’ve learned some areas that Storyline can improve in to create better serious gaming/gamification experiences for its end users. Obviously I don’t expect these areas to be addressed in Articulate Storyline 2.

What would I like to see in Storyline 3?

  • Loop triggers. If variable/object is named x, appears in state y, or is a certain object type, then do something determined by the trigger. Have additional conditions that would allow to exit loop when a certain amount of hits occur.
  • Array triggers. If variable/object is named x, appears in state y, or is a certain object type, then do something determined by the trigger. For all instances, or for all instances within a certain group of objects, on a particular slide or series of slides, etc.
  • Triggers and motion paths made for X-Y coordinate dependencies (meaning that I want to move objects on the screen and, when they reach a position I determine, do something else).
  • I want more control over the layers. There’s a lot of functionality and power in those layers that I wanted to take advantage of in this project, but Storyline would not let me do so.

Ultimately, I think I was really onto something when I started to weave Unity and Storyline together for this project. That may just be the biggest fruit to result from participating in this challenge.

Hope to report on more in that front soon.

In the meantime, please, by all means, if you haven’t done so yet, go check out the completed project by clicking on the image below. I’d love to hear from you about your thoughts on any and all of this.

Click here to view the demo.

STAR WARS: THE FORCE AWAKENS

On Thursday, I finished AWAKEN THE X-WING and posted my results to the Articulate ELH Challenge before taking my wife out to go see the new movie. If you haven’t seen Star Wars: The Force Awakens yet, you should. And if you go see it in IMAX 3D, you are in for a serious treat.

It was amazing!