How I Built This Broomstick Brew Game in Storyline 360
As a kid, I always looked forward to Halloween. In my opinion, it’s one of the best holidays—although my dentist would probably disagree. Besides collecting an abundant amount of candy in my plain white pillowcase (the old-fashioned candy bucket), it was the one time of year I got to be extra creative and plan my costume. This year, I decided to put my creative ideas into Storyline 360 and build this Broomstick Brew Game as a fun Halloween treat. I’ve had a few people ask how I created the different components of the game, so I want to share my process. 1. Create a Storyboard With each of my projects, I like to storyboard my vision. Sometimes I sketch my ideas on sticky notes or on this Visual Storyboard Template I created. Drawing it out helps me see the big picture, so I can fill in missing pieces or scratch out ideas that don’t work. Once I have a solid idea of how to go about my vision, I bring the storyboard to life in Storyline 360. I add all the slides I need and title each slide and their layers. For this example, I planned on having three slides: Title, Game, and Results. If you’re not used to storyboarding before you get started, you can learn more about that here: 11 Best Practices for E-Learning Storyboarding. 2. Find Imagery With my ideas storyboarded, I have a better idea of what assets I need to build the game. Although I like to create my own graphics from time to time, I realized that if I did that for this game, I probably wouldn’t have it ready until Halloween 2021. So I turned to Content Library 360 and the web for free resources to save development time. I started my image search using Content Library 360, where I found this spiderweb icon. I was able to customize the color easily in Storyline 360, since you can edit the color of Content Library 360 icons just like you can with any shape. If you’re not finding exactly what you need, you can also search online for other free resources. For this project, I found a variety of images on Freepik. When I saw a background image with a style I liked, I looked up the artist for similarly themed graphics by clicking on their username. You can also use the search bar if you want to add a descriptive word with your search. If it’s an option, using graphics from the same artist is a good way to keep the look and feel consistent. Depending on the project, you might have to edit some of the graphics—maybe updating the color scheme or removing something from an image. That’s another reason I really like Freepik—they include the Adobe Illustrator file. This makes it super easy to customize the images to fit your needs. Sourcing these assets instead of creating them from scratch saved me a ton of time. For more tips on sourcing assets, dig in to this article: Getting the Assets You Need for Your Online Course. 3. Add Audio Another element I like to add to my projects is sound. There’s just something about the right track or sound effect that makes a project come alive. For this project, I made a list of all the music and sounds effects I needed. I searched YouTube Audio Library for music tracks and Freesound.org for sound effects. I listened to several audio files before deciding which ones to include. If you’ve never used sound effects in your e-learning before, be sure to check out this helpful article: Tips for Using Sound Effects in E-Learning. 4. Build the Slides Once I had all my assets, it was time to build my three slides using a variety of animations and triggers. Let’s walk through how I built each slide. Slide #1: Title Slide The opening slide sets the tone for the entire experience. It’s the first thing learners see when they launch a course. I wanted to make sure this slide reflected the look and feel of the game. Images Since I had the image source files, I was able to pull bits and pieces from the illustrations—the witch, two trees, a spider, rocks, a cauldron, and the sky—and animate them to create this slide. You can see all of these images used throughout the project, but in different ways. Repurposing assets is a great way to save time and make everything look cohesive. Animations With my images in place, I was ready to add animations. Using relevant animations can enhance the experience and connect people to the content. Let’s look at some of the animations I included on this slide. Since this game is about a witch, it made perfect sense to have the witch fly onto the screen to introduce the title of the game. To create this effect, I added an arc motion path to the witch and a wipe-from-right animation to the Broomstick Brew text. The opening slide wouldn’t be complete without some brewing. After all, this is a game about making Broomstick Brew. So, I added floating cauldron bubbles using multiple line motion paths. It felt empty to have the brew boiling but no witch, so I decided to have the witch fly back onto the screen and float over the cauldron. I used the fly-in entrance animation to have the witch enter the slide and a freeform motion path to create the floating-in-place effect. I also added an arc motion path so that when the player selects the play icon, the witch flies off the screen. Timeline/Triggers When timing animations and placing them on the timeline, I often think about it like a story that has a sequence of events. Animations also tell a story, so it’s critical to time them just right. I strategically positioned each image that had animations on the timeline to play out when it made the most sense. I added several triggers to move the different images (witch 1, witch 2, the spider, and cauldron bubbles) along their designated motion paths when the timeline started on each one. For example, here’s what the triggers look like for the cauldron bubbles. And here’s a glimpse of what the timeline looks like. I made sure I evenly distributed the different-size bubbles at various times so it looked more realistic. If you let the slide play out, you might have noticed the floating witch and the cauldron bubble animations never stop. However, the slide is only 9.25 seconds long. So how did I achieve the GIF-like animation? I created a jump-to-time trigger that jumps to a certain time on my timeline when it ends. I didn’t want the entire slide to play over again, so I timed it to jump to the place where I wanted the animation to loop. Audio As mentioned in the last section, I used the jump-to-time trigger to create an animated GIF, so you might be wondering: How do you get the music to continue playing when the slide jumps to another part in the timeline? I simply added the music to a different layer and then created a trigger on the base layer to show the music layer when the timeline starts. This little trick allows the user to still see the animations on the base layer, interact, and see the animation loop, all while still hearing the audio on the music layer play continuously. Here’s a look at all the layers I used for this slide. When the user clicks the play icon, it shows the transition layer with the wipe-from-right entrance animation and then jumps to the next slide. Slide #2: Game Slide It’s game time! But first, let’s look at all the different components that went into making this slide. Layers This slide includes several layers. I’ll refer to the different layers throughout my process. I do want to note that it probably would’ve been more efficient to separate this game slide into two separate slides—instructions and game—since I had to do quite a bit of troubleshooting to get everything to work. #usererror #lessonlearned Luckily, I was able to use the disabling triggers feature in Storyline 360 to easily experiment with different triggers and figure out how to make it all work. Let’s dive into the different game components. Instructions The very first thing you see on the game slide is the “How 1” layer, which includes a purple transition (Exit—Wipe From Right) and then displays the instructions on how to play. Buttons Do the purple buttons look familiar? That’s because I used one on the first slide. When I created the button in Photoshop, I purposely left it blank so I could use the same button throughout my project and just add different Content Library 360 icons to it. I also added a subtle hover state by lowering the brightness level. (Find out more about button states here: Everything You Need to Know About States in Storyline 360.) And this is what it looks like. This saved me a lot of time since I didn’t have to make my own icons or import multiple button images into Storyline. I only had to make one custom button, and within Storyline 360 I was able to quickly and easily customize it across my project. After clicking through the instructions, there’s a countdown timer and then the game begins! Background To make it look like the witch is flying through the forest, I opened the background files up in Adobe Illustrator, combined them, changed the colors, and moved a few items around so it looked like one long scene. Once everything looked good, I split the extra-long image into smaller parts to keep the high quality, since the maximum dimensions for images in Storyline 360 is 2,048 x 2,048 pixels. I inserted the images into Storyline 360 and pieced them together to make it look like one long background. It’s safe to assume I zoomed in/out quite a few times to build this game.😆 I used a similar technique for the starry purple/blue sky, but made the graphic less wide overall since I planned on adding an animation later to make it move at a slower pace for a parallax effect. With the land and sky backgrounds set, I temporarily locked each group on my timeline to prevent myself from accidentally clicking on it while I imported and worked on other images. Witch Next, I inserted the witch image. Since the game takes place at night, I wanted the witch to stand out against the dark background. To achieve this, I used the glow effect. This made the witch appear much more noticeable (and magical). To make the witch move, I added two line motion path animations to the object—up and down. For each path, I selected Relative Start Point so the object would move from where it left off. I edited the duration of each motion path to 00.10 seconds to make the witch move fairly quickly. I wanted to limit the witch’s movements to five total vertical areas before she went off the screen. To determine the length of each motion path, I divided the height of the slide (720) by the total range of movement I desired (5), which resulted in a motion path length of 144. I selected the blue dotted line for each motion path and edited their lengths in the animations tab. To set the flying-up-and-down movement in motion using the keyboard, I created two triggers. If a player moves the witch beyond the 5 vertical areas, I created a trigger on the base layer to show the out-of-bounds layer. The game pauses until the witch flies back. To give this game an extra spin, I added an animation to the witch to spin counterclockwise when she hits a creature. To achieve this, I added a crash state to the object. You might be thinking: But you can’t add animations to states. And you’re right . . . sort of. Although you can’t add animations to objects already in a state, you can still cut the object from the desired state (CTRL+X), paste it onto the slide (CTRL+V), add the animation, and then cut and paste it back into the state. That’s exactly what I did. Now the object had an animation attached to it within that state. I also included -5 in orange text to let players know they lose 5 points every time they crash. Here are what the crash triggers looked like once I had all of my assets imported into Storyline 360. On the base layer, I included the following trigger. On the crash layer, I included the following trigger. I also imported a crash audio file to let the player know they’ve been hit. The timeline on this layer only lasts one second. Potion Bottles Since the goal of the game is to collect potions, I wanted them to stand out against the dark background. Just like I did with the witch, I added a glow effect to each of the four potions. As the witch collects each potion, they disappear. I achieved that effect by adding a disabled state to each potion and removing the image. Then, I created triggers for each potion to change states when the witch intersected with it. As an example, here’s what the trigger looks like for the mushroom potion. After creating triggers for all four potions, I duplicated them. I copied and pasted triggers from one potion to another and tweaked them in the triggers panel. Here’s the triggers panel for the mushroom potions. I scattered all 33 potions across the land. This is a good reason to always plan ahead. The disabled states remained attached to each new potion. Had I just inserted the potions into my project and immediately duplicated them, I would’ve had to individually click each one and edit their state 33 different times. Boo to that idea! 👻 I strategically placed each potion within one of the five vertical zones so the witch could only collect potions within each zone. The five transparent shapes helped me to see where to place each potion—on bridges, gravestones, branches, rocks, lily pads, etc.—to make them look like part of the scene. To give the player a sense of achievement, I created a trigger to play a positive sound effect every time they collected a potion. Similar to the backgrounds, I grouped the potions together (CTRL+G) and temporarily locked the group on my timeline to prevent myself from accidentally clicking on it while I imported and worked on other images. Crows Now it was time to import creatures. I started my search looking for a crow. I found the above image and reworked the Adobe Illustrator file to create two types of crows. Flying—I used the top crow in the image above and added a line motion path. Eating—I combined the two remaining crows to create an animated GIF in Photoshop and then imported it into Storyline 360. I duplicated the crows and placed them throughout the first part of the game in areas I thought would make the game challenging. I later realized there was an odd white line around the transparent crow GIF. I learned that Photoshop assumes the background will be white, so it fades the semi-transparent edges toward white. I had to go back into Photoshop to save a version that fades to a darker color. Thankfully I didn’t have to replace each and every crow manually. I used the Media Library replace feature to replace the incorrect crow GIFs with the updated one all at once. Ghosts My ghoul (goal) for finding the right ghost was to find something that was easy to tweak. I found the above image and selected the ghosts I wanted to use. In Adobe Illustrator, I simply removed the background and imported my two favorite ghosts into Storyline 360. To make them a bit see-through (they are ghosts, after all), I edited the transparency to 21%. I added an arc motion path to the first ghost and a circle motion path to the remaining ghosts. Spiders It’s not every day you go searching for spiders. Thankfully, this one wasn’t real. I sifted through a bunch of spider images and eventually chose the one above, because that big spider smile was ridiculously perfect. For the game, I flipped it upside down and placed it on the spiderweb icon I found in Content Library 360. As an obstacle, I thought it would be fun to have the spider move down. I created a straight line using the same color as the spiderweb, grouped it with the spider, and added a line motion path. Bats For the last creature, I decided to add a bat. I found an animated bat GIF online, but it had too many movements. I only wanted the bat to have two flying motions. Using the bat GIF I found, I redid the GIF in Photoshop with the same technique I used for the crow, and created my own version. Although I didn’t need to add any animations to the bat, since it was already a GIF, I decided to add a line motion path to a few of them to make the end of the game more challenging. Once I had all the creatures on the slide, I grouped each of them by name. Since there were A LOT of objects on this slide, naming and grouping similar objects together helped me keep my triggers and timeline organized as I tested and tweaked a few things. Scoring System I had a difficult time deciding how easy or challenging to make the game. I ended up making it really hard because people are always saying don’t make games too easy. I now realize I may have taken that a little too far. 😆 Here’s a breakdown of the scoring system. I wanted to keep scoring simple. I created one variable to capture the total score. For every potion collected, it would increase the score by 2. To achieve this, I created a trigger on the base layer. If the player crashed into a creature, 5 points is deducted from the score. It’s as simple as that. I also included the score at the top using variable references. Make It Work Together With all my assets on the slide, it was time to make them move seamlessly across the screen. To move the land, creatures, and potions all at the same time and speed, I first grouped them together. I zoomed WAY out of my slide view and added a line motion path animation to the game group. I dragged the group left until the right side of the group reached the slide area. I edited the easing direction to None. And changed the duration to 58 seconds. For the sky group, I also added a line motion path animation. I dragged the group left until the right side of the group reached the slide area. Similar to the game group, I edited the easing direction to None and changed the duration to 58 seconds. With the duration the same as the game group, the sky group still moved at a slower pace (creating a parallax effect) because the group and motion path was less wide. The game is all set! When the witch reaches the end of the slide, there’s a subtle fade to the house layer, where the door opens and the witch enters. Once the door closes, it transitions to the next slide using a purple oval shape with an Entrance—Grow animation. Slide #3: Results Slide On the last slide, the player gets to view their brew rating and results. I used images, animations, and audio to continue the experience. Images I switched out the background and repurposed some of the assets—such as the cauldron, pop-up box, buttons, potions, and witch—to bring it all together. Animations With my images in place, I was ready to add animations. As mentioned earlier, using relevant animations can enhance the experience and connect people to the content. Let’s look at some of the animations I included on this slide. The scene before this shows the witch entering a door, after which the door shuts, so it made sense to have her fly into this scene and drop the potions she’s collected into the cauldron. To create this effect, I added two motion path animations to the witch—an arc motion path to fly in and a line motion path to fly out. I also added line motion paths to each potion (to create a falling effect) and to each bubble (to create a floating effect). States I enjoy adding little details throughout the game to make the experience a bit more interesting. If you look closely when the witch is over the cauldron, her hand comes up as if she is pulling the potions out of her pockets and then dropping them to make the brew. I achieved this effect by adding a custom state. Timeline/Triggers I strategically positioned each image that had animations on the timeline. I added several triggers to either change the state or move the different images (witch, potions, and cauldron bubbles) along their designated motion paths when they reached a certain point on the timeline. Similar to the first slide, I used the jump-to-time trigger to loop the animations on this slide. Audio As mentioned earlier, to get the music to continue playing when the slide jumps to another part in the timeline, I added the music to a different layer and then created a trigger on the base layer to show the music layer when the timeline starts. Results These days, it seems we rate everything by five stars. Since the player is making broomstick brew, I thought it would be a fun element to add a star rating to show how they did. Take a look at the triggers I created that show how I used the score variable to determine how many stars a player earned. And that’s how I created the Broomstick Brew Game! If you haven’t already played, go ahead and give it a try and share your score. I know I covered a lot. Did I miss anything you’d like to know more about? I’d love to hear your feedback in the comments below. Don’t forget to follow us on Twitter for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.
