In this video I’ll share with you how I build a Space Invaders game in Articulate Storyline and how I used the motion paths feature in Storyline for all the moving elements in my game.
cta under video
Space invaders game
Let’s have a quick look at the space invaders game before we dive in the storyline file to see how thing are set up.
There’s welcome screen and when you click start the game begins. With the keys on your keyboard you can move your battleship left and right and you can fire the battleships gun to destroy enemy’s who are coming at you. All animations are done with motion paths.
Now let’s open the storyline file to see how things are setup.
On the first slide there’s one motion path to animate the start button. If you’re not on the animations tab the motion paths are not visible. So let’s click the animations tab.
Now you see a dotted line with at one end a red circle and at the other end a green circle. The red circle is the end point of the motion path. The green circle the begin.
If I select the motion path you see the properties of the motion path. The duration. The name of the motion path. The x and y coordinates and the length of the motion path. With the size and position settings you can position a motion path very precisely in Storyline.
And a motion path has settings or options. To view these options click on ‘Path’ options.
You see the directions of the motion path. My motion path goes up. It starts below the slide and finishes on my slide. You have several other options I will further explain on the second slide.
On the second slide there are several motion paths. Let’s start with the motion paths of our battleship.
The battleship has two motion paths that are triggered when a user presses a key on the keyboard. The move left motion path moves the battleship 104 pixels to the left. It has a duration of a half second. Under path options relative start point is checked. This means that the battleship motion path can play from the current position on the screen where the battleship is. The move left motion path can be triggered multiple times.
Under easing you can set the direction. With the direction you can choose for a relatively lower speed at the start the beginning of the motion path or both and you can choose from different speed settings. I choose fast here.
The move right motion path has the same settings but the battleship moves 104 pixels to the right each time it’s fired.
Motion paths
Now let’s look at the motion path of our space enemy.
This motion path starts above the screen and end beneath the screen. The speed is set to medium and I given it no direction. This means it moves the whole motion path at the same speed.
There are multiple lasers on the screen. The will be fired if the starship is at that position. They have the a motion path that starts slow and ends faster.
But how trigger something in Storyline when the laser hits the enemy or the enemy hits our startship before we fired the laser?
You can do this with the intersection option under when. For instance when the enemy intersects our starship the state of the battleship is set to explosion, we lose 1 life and 25 points we be subtracted from score.
When the laser intersects the enemy, enemy is set to hidden and 100 point is added to the score.
You can also execute triggers in Storyline when an object leaves or enters the slide.
