My challenge this week was to build a simple game using animation, motion paths, and sound effects. This demo uses the arrow keys to move a robot around the screen.
This is what I came up with: https://360.articulate.com/review/content/a58fcc14-9e42-4761-a379-732d01b25963/review
The hardest part was figuring out how to keep the robot from leaving the play area.
Storyline allows you to build relatively complex interactions with very little programming.
Lets have a closer look at how this was built.
First I determined what Variables I wanted to use. A variable is just something that represents something else.
Variables used:
We will explore deeper what each of these variables means as we look at the Key Press trigger.
Key Press Triggers
Storyline has built in functionality to determine if a user is pressing a key and what key they are pressing. These are called "Key Press Triggers"
Here are the Key Press Triggers I used in this game.
This post will break down what these Storyline instructions are doing in our game.
Determining Where our Robot is on the Screen
Before trying to understand the Key Press Triggers, we should first examine the logic used to determine locations on the screen.
We will use two variables to calculate where the robot is currently on the screen.
robot_location_x (the horizontal location)
robot_location_y (the vertical location)
So the current location of the robot is determined by this pair of variables (robot_location_x, robot_location_y).
The robot begins at the top corner of our screen. We initialize this in the following Storyline triggers:
Now our goal is to move the robot in a particular direction as long as moving the robot in that direction does not move it outside of the boundaries we have set for ourselves.
We set four variables to represent those limits
bottom_limit
top_limit
left_limit
right_limit
In the table above you can see that we set these to 0, 260, 0, 165 respectively.
These limits, although called variables in Storyline, are actually being used as constants. In other words, they will not change during the execution of the game.
What will change are the variables robot_location_x and robot_location_y.
As long as these two variables stay within the limits, the robot will remain on our screen.
Understanding Keypress Triggers
In Storyline, triggers ask the questions, "what do you want to do" and "when do you want to do it"
What do you want to do?
We want to do two things each time the event is triggered
Determine if moving the robot in that direction will keep him on our screen
Move the robot on the screen
If moving the robot in the direction would move him off of our screen then we don't want to do anything.
When do you want to do it?
When the user presses a directional key (Up, Down, Left, Right)
Lets have a closer look at how we do this in Storyline.
What do you want to do?
Add variable movement_constant_y (in this case "5) to robot_location_y
When do you want to do it?
When the user presses the Down key AND
the current location of the robot (robot_location_y is
below (<) the top limit (top_limit) of our screen (in this case "165)
Now, since Storyline does not allow for nesting if/then statements, we have to repeat the if statement each time if we want to do more than just change the value of robot_location_y.
We also want to move the robot from its current location to a new location. This is accomplished in the next statement using a motion path animation.
What do you want to do?
Move the robot down the screen
When do you want to do it?
When the user presses the Down key AND
the current location of the robot (robot_location_y is
below (<) the top limit (top_limit) of our screen (in this case "165)
This same logic is applied to moving the robot in the other three directions.
About Motion Path Animations
We created four motion path animations for our robot. (motion_path_down, motion_path_up, motion_path_left, motion_path_right)
Here you can see that each motion path moves the robot 10 px over the course of .25 seconds.
The other option that is critical is that you select Relative to Start Point from the Path Options menu. What this means is that after the Robot has moved 10 px to the right (in this example) next time the Robot moves it will move from that new location vs it's original location (robot_location_x=0, robot_location_y=0)
I've included a link the Storyline file, if you want to see how it was built.
Comments