Introduction

In the previous tutorial, we talked about the very basics of Story Maker to get you started with the core concepts of what a story and what it contains inside it. From chapters and messages, to choices and actions, we’ve yet to learn more about these, but in this tutorial, we’re going to learn everything about Media Library, along with an introduction to variables.

Media Library

Before Seen 1.0.10, stories were just nothing but plain text. The only instances you’ll ever find a picture are the chat buddy’s profile picture and the story thumbnail or icon. If you played the game’s main story, you have most likely encountered the blurred picture backgrounds in Chapter 3 (At the Park) which depict the setting indicating where Mark and Nicole are. Due to demand, Seen 1.0.10 finally gave authors the chance to welcome pictures and sound clips into their stories to make them more immersive than ever, giving more room for creativity.

Now that pictures and sound clips are supported, we thought of organizing these files by putting them all in one place where you can manage your media content, and that’s what Media Library is for. To access it, go to your story’s chapter list and tap the rightmost icon at the top.

Figure 2.1. Media Library icon

There are two tabs: Photos and Sounds. It should be pretty self-explanatory what each tab contains. When you make a new story, you’ll most likely find that there are no photos and sounds (unless you put a story thumbnail in the first place). Let’s start adding photos then. To import photos, make sure you’re in the Photos tab and tap the pencil-shaped icon on the top-right corner. Your phone’s photo gallery will show up. Feel free to choose a photo. Once you’re done, the photo you just selected will be imported and it will show up on the photo grid.

When you tap a photo in the grid, it will turn blue indicating that it is currently selected. Another thing that happens upon selecting a photo is that a blue bar shows up at the bottom. You can pull that bar upwards to reveal more information about it as shown below.

Figure 2.2. Info about the selected photo

Note that all photos you import, whatever format, is converted into JPG to save memory. Speaking of saving memory, all photos you import are most likely resized down into a smaller resolution. Media Library accepts 1MP photos at maximum (1 million pixels), and if your photo’s pixel count is greater than that, the app will automatically compress it for you.

Now, let’s focus on Figure 2.2. There’s a lot going at the bottom so let’s dissect it one by one. The res_649co13zq8.jpg on top of the blue bar is your photo’s label. Labels help you identify which photo is which. Of course, that filename generated randomly and by default is surely inconvenient. Though it is not required, renaming labels is a good practice of keeping your media content well-organized. In order to do so, tap the white pencil icon just to the left of the trash bin icon on the blue bar.

Figure 2.3. Relabel photo dialog

A dialog will then appear for you to relabel the selected photo. Tap Done to confirm changes. Soon, a search feature will be integrated to Media Library that will match with labels; it’ll be a big help to stories with lots of content. Anyway, going back to Figure 2.2, the Filename property is something you can’t ever change as it is randomly generated by the app, but you don’t have to worry about it. It’s just there for some reason.

The numbers below the photo indicate the resolution of the photo. Remember that photos are compressed if they’re greater than 1MP? Well, if you imported a photo greater than 1MP and if you want to know its compressed, final resolution, you’ll find it right under the photo. And oh, when you click at the photo, you’ll get a full view of the picture with zoom.

To the right of resolution lies file size, which is self-explanatory. Finally, the only property you can adjust is Optimized For. We’ve talked about this before in the previous tutorial. Just remember that in some cases, a photo needs to be modified or adjusted to fit the requirements. For example, chat buddy profile pictures need to be a square. Therefore, optimizing the photo into Chat Buddy Photo would be required. Tap the blue plus icon to the right of None to choose between different optimization formats. As of Seen 1.0.10, there are only two formats: Chat Buddy Photo and Real Talk Background.

Figure 2.4. Sounds tab

Moving on to the Sounds tab. Just like for photos, make sure you’re on Sounds tab then tap the pencil icon on the top-right corner to import sound, sound clips, or whatever you wanna call them. No compression is done with the sounds you import, but there are limitations. You can only import OGG and MP3 files whose size is no greater than 10MB (ten megabytes).

Upon importing, your sound clip will then be displayed on the list with a randomly generated label. I’ve already relabeled the two sound clips I have as shown in Figure 2.4. You can also pull the blue bar upwards to reveal the selected sound clip’s properties: Filename, Size, and Duration. None of which are modifiable, just read-only.

To wrap it up, you can delete media content by tapping the trash bin (delete) icon on the blue bar, next to the pencil (relabel) icon. What happens after we import our media content? Of course, we use them! Worry not, we’ll get to use them in a future tutorial. It is good practice to delete photos or sounds you don’t use. Note that optimizing photos doesn’t delete the original photo, so you may consider deleting the original photo after optimization if unused. If you haven’t read the Some Things to Remember portion of the first tutorial, I highly urge you to because some of the tips are pertinent to Media Library.

Variables

In the game’s main story, everyone’s given a chance to rename Mark Blythe to any name they want. So, if your nickname was Matthew. Then Nicole will address you as Matthew, like “Good morning Matthew!” instead of “Good morning Mark!”. This is done to provide immersion to the players, and you, as an author, might also adding a little bit of immersion to your story by doing the same thing. But how?

Enter variables. A variable is a container of text that you can change and use. Variables have two simple properties. First, a variable has a name that acts as an identifier when you want to use or change its value. Second, which I just mentioned, is value. A variable’s name cannot be modified, but its value can be modified.

For example, let’s say we have a variable whose name is fave_fruit and whose value is apple. We can use it within a choice’s content. In Story Maker, it’d look like “Hello! My favorite fruit is %fave_fruit%”. When you play the story, it’d say “Hello! My favorite fruit is apple”. Simply put, the game substitutes “%fave_fruit%” with the value of the fave_fruit, which is “apple”. Say, our value for the same variable is banana instead of apple, when you play the game, it’d say “Hello! My favorite fruit is banana”. Note that the variable name is enclosed in percentage symbols to distinguish itself as a part of the text that needs some replacing.

In naming variables, there are rules. First, variable names are case sensitive, meaning variables whose names are SomeVar and somevar are two totally distinct variables. Second, only letters (uppercase and lowercase) and underscores are allowed.

In this tutorial, we’re going to discuss about predefined variables that are immediately defined or created for you and ready for use anytime and anywhere within your story. There are four predefined variables:

player_name – player’s full name
player_nick – player’s nickname
msgr_name – current chat buddy’s full name
msgr_nick – current chat buddy’s nickname

These predefined variables will surely come in handy if you let the player customize his/her name or if you let the player customize his/her chat buddy’s name. Why? Of course, we’d have to display the name that the player set it to. It’d be awkward if he wants his nickname to be Matthew but then the chat buddy of your story says “Hi there, Mark!”. For that to work, the content of the choice would have to be “Hi there, %player_nick%”. Let’s make this happen.

In a completely blank chapter, I added a Chat Buddy message then added a choice. I then typed in the following as shown below.

Figure 2.5. Content with variable

Notice that variables have their text colors automatically set to blue. There are two ways to enter a variable. First, you can type it manually by enclosing the variable’s name in percentage symbols. Second, you may tap the V+ icon (to the right of Content) to make the Add Variable dialog appear.

Figure 2.6. Add Variable dialog

Upon tapping OK, the app will automatically augment the enclosing percentage signs for you. But wait, you might wonder, where else can I add or use variables?

• Content in a Chat Buddy choice
• Preview in a Player choice
• Type Recorder in a Player choice
• FADE_MSG, FADE_ADV, FADE_CMPLX
• SHOW_SNACK, RT_SET_STAT

Okay, the last two might seem unfamiliar, but don’t worry about them for now. For our application of player_nick to make sense, we must let the player customize his/her nickname, which we discussed about in the first tutorial. Now let’s test the story.

Figure 2.7. Player name customization dialog

I set my name to Matthew Rey and my nickname to Matthew. We should get the results we’re expecting.

Figure 2.8. Hooray!

Now, let’s get a little bit complicated and put all of the four predefined variables to use. After enabling chat buddy name customization (Custom name checked), here’s what my story looks like now.

Figure 2.9. All four predefined variables in use, will it work?

Now we test. The player name’s the same like in Figure 2.7. And I set the chat buddy’s name to Johnny Blythe and his nickname to John as shown below.

Figure 2.10. Chat buddy name customization dialog

And did we get what we expect?

Figure 2.11. We did it!

Yes, we did! But now you might be asking, am I just limited to using these four predefined variables? Can’t I make my own like fave_fruit? Of course, you can, and that’s what we’ll tackle on the next tutorial.

Up Next

Remember! Letting players customize names would mean nothing if you don’t use predefined variables; and use media content wisely. That’s all for now. On the next tutorial, we’ll dive deeper into variables by learning how to create your own, how to set their values on demand, how to make them act as numbers, and how to make decisions based on them.