Throw a Fireball Part 2 - Technical Hurdles Overcome

Coming up with an idea is the easy part. The true test of my abilities was just beginning as I realized rather quickly that I had no idea how to implement my vision. Drawing upon my previous work with creating onboarding tutorials, I decided that images would be the best way to go.

Street Fighter 2 was a game that ran 60 FPS or Frame Per Second. How could I take 60 single images for each second of gameplay and display them properly in a presentation tool? The answer was GIFs! I could record short videos of Street Fighter 2, cut the videos down to about a second or two, then run them through photoshop to create a GIF. That GIF could then be looped within Articulate Storyline to simulate the game running at a constant 60 FPS. The idea worked perfectly until I another hurdle.

As with any fighting game, two opponents don't simply fight in front of a blank screen. There are various backgrounds, and various amounts of movement, to keep the eyes of the player mystified and enthralled. For myself, it led to a looping GIF of a moon that broke the immersion I was attempting to create. I eventually found a Stage that had no movement at except for two rocks on the ground. Unfortunately, I had to re-record various items, but the lesson was learned.

One of the largest hurdles I encountered was being able to accept both the correct and incorrect inputs from the player, store them, and execute the Fireball after certain criteria had been met. 

Street Fighter 2 obviously runs on code to check player inputs and can store those input temporarily to see whether the player is attempting to perform any special moves, but how could I simulate that in Articulate Storyline? The answer was much more complex that I initially thought it would be. 

First, I mapped a single button to display the "Fireball GIF" for a test run. If the player pressed the "+" key, the GIF would play without issue. Now, the additional buttons in the motion were mapped to "2," "3," and "6" respectively to their arcade stick motions; "2" was for down, "3" for down-forward, and "6" for forward.  But again, the "Fireball GIF" would only play when the "+" was inputted by the player. How could I prevent the player from simply pressing "+" to bypass the lesson? The answer came in the form of True/False. 

I disabled the "+" button, by creating variables labeled "Fireball Input 1-4," one for each input, and then setting those values to FALSE in Storyline. 

When the player press the first correct input, that first input would then be set to TRUE. If the player did not press the correct input in the sequence, all variables would be reset to FALSE; however, if the correct inputs were pressed, all values would return a TRUE result, and then the "+" button would quickly unlock to then play the Fireball GIF. While this sounds like a simple solution, the Slide Triggers in Articulate Storyline began to grow rather large. Thankfully, my idea worked!