Workflow walkthrough: Creating a basic story with Prairie
At the end of this tutorial, you'll have a game that looks like this!
To follow this tutorial, you need to have a blank Unity project with Prairie installed in it. To install Prairie, follow these instructions.
In this tutorial, we will follow the basic Prairie workflow for creating a story, from start to finish. We will begin by creating a simple story in Twine. In Unity, we will create a 3D environment in which our story will take place (we'll just use basic shapes -- no complex 3D modeling required!). Then we will tie everything together using Prairie interactions.
The space we will create has three platforms joined by paths. The platforms each have a different color: white, green, and red. The white platform is empty, the green platform has a cylinder on it, and the red platform has a sphere on it. Our story has a linear progression that will lead to victory. Here it is:
- Begin on the white platform.
- Go to the green platform.
- Click the cylinder.
- Move to the red platform.
- Click the sphere!
Creating this basic story will help give you a good sense of how to piece together a story with Prairie. Let's begin!
Go to Twine and create a new story. Our story will have 6 nodes (a.k.a passages):
- A node for when the player is on the white platform
- From the white platform, you can go to the green platform or the red platform
- A node for when the player is on the green platform
- From the green platform, you can click the cylinder or go back to the white platform
- A node for when the player is on the red platform
- From the red platform, you can go back to the white platform
- A node for when the player has clicked the cylinder on the green platform
- After clicking the cylinder, you can go to the red-platform-after-clicking-cylinder state
- A node for when the player is on the red platform after clicking the cylinder
- After clicking the cylinder and going to the red platform, you can click the sphere
- A final node for when the player has clicked the sphere after clicking the cylinder (this is the "victory state")
The following image shows what the story looks like in Twine (don't worry if your Twine setup looks slightly different -- this is just meant to give you an idea of the story structure). Below the image, we will write the text that you can copy-and-paste into Twine to create each node.
Now we will give the text for the individual nodes. Create these nodes in your own Twine story to match the story we're using in this tutorial. Note: each node is separated by ---. The first line in each node is the title of the node, and the rest of each block is the node body text (which includes the links written in brackets [[like this]] to indicate what nodes come next).
In case you're not sure how to create a Twine story, we will show a clip of what it looks like to create some of these nodes next (keep scrolling!).
White platform
Legend has it that clicking the cylinder will allow you to click the magical sphere and win!
[[Green platform]]
[[Red platform]]
---
Green platform
Maybe you should click the cylinder...
[[Click the cylinder]]
[[White platform]]
---
Red platform
Welcome to the red platform. Not much to do here yet...
[[White platform]]
---
Click the cylinder
You've touched the cylinder. The sphere has been unlocked!
[[Red platform after clicking cylinder]]
---
Red platform after clicking cylinder
The sphere beckons...
[[Click the sphere]]
---
Click the sphere
You win!
Here's a clip to demonstrate how to make a story out of nodes/passages in Twine.
Now, we'll leave Twine for a bit and go set up our game in Unity. We'll come back to Twine later, when we import the story into our Unity game.
Begin by creating a new scene in Unity. Before we begin, note that everything in this section is from Unity's toolkit --- none of the features in this section use anything from the Prairie package.
In our blank scene, we want to add our three platforms, along with walkways between them. To do this, right click in the Hierarchy panel on the left and from the 3D Object section, choose Plane. Repeat this three times to create our three planes. Name each plane according to its color (i.e. "Red platform", "Green platform", and "White platform").
Now, we'll add colors to each plane to make them match up with their names. To do this, we'll create a Unity Material and set that material to have a color. We'll create one Material for red and one Material for green. The white platform is white by default, so we don't need to add any color to it.
To create each Material, go to the Unity menubar and click "Assets". Then in the "Create" submenu, choose "Material". Do this three times, and name each Material after one of the colors we're using (green and red).
To set each material's color, click the material and click the color eyedropper icon next to "Albedo". For easy access to a green and a red color, we'll use the XYZ axis controller GUI in the top right corner of the scene as a color reference. (The X direction is red, the Y direction is green).
Now, drag each material onto its corresponding platform to color that platform.
With our planes colored, it is easy to separate them in the space. Leave the white platform where it is, and move the green and red platforms away from it as shown in the GIF below.
After separating the planes, create two more planes to connect all the planes to the white plane.
Now we'll begin incorporating components from the Prairie framework.
First, we need to add a player object to the game! This will act as our controller when we play the game --- it will allow the user to walk through the space as a first person player. Unity includes a prefabricated "First Person Player" in its package of Standard Assets. However, Prairie has its own version of this player, modified so that it can interact with Prairie components. To add the Prairie Player to your game, go to the Project tab of your Unity window to see your assets. In the search bar, search for "Prairie Player" to find the prefab. Drag this into your scene, and make sure to position the player so that it falls onto one of the platforms (otherwise it will fall through space forever!).
After adding your player object, try playing your game. You should now have a player that you can use to walk around your world! If you aren't on one of your platforms, make sure you positioned your Player properly in the scene.
Now it's time to add a narrative (using our Twine story from earlier)!
Let's add the Twine story we created earlier to Unity. Follow our tutorials on exporting a Twine story to JSON and then importing the story into your project. Once your Twine story prefab is created, drag it into your game (into the Hierarchy panel).
After following those tutorials (most importantly, after installing the Twison export format), here's what the process looks like in this case:
When you're on the white platform, you want the White platform Twine node to be active. When you're on the red platform after clicking the cylinder, you want the Red platform after clicking cylinder node to be active. So, we need to associate each Twine node with the appropriate location.
To establish these location-based Twine interactions, we first need to add Box Colliders to each plane. These box colliders will let the game know when a player has entered (i.e. collided with) one of the platforms. We add box colliders by selecting each platform and then, in the Inspector panel, choosing to add a Box Collider component. Make sure to check the Is Trigger box, since we want these colliders to trigger our Twine story. Also, make sure to adjust the collider range by clicking Edit Collider (this sets the area that will trigger the interaction upon the player's entrance). See below for an example.
In this game, we want the box colliders to activate the appropriate Twine Node (based on what node is currently active). Thus, we want to associate Twine nodes to their corresponding platforms. We do this using an Associated Twine Nodes component. So, we will add one of these to each platform (shown below).
If you've named your platforms and Twine nodes the same way as we have in this tutorial, the Associated Twine Nodes will automatically fill in the first associated Twine node field with the Twine node with the same name as the game object you're adding the component to.
Note: we also want to associate the Twine node called "Red platform after clicking cylinder" with the red platform, because that Twine node will be activated when we walk onto the red platform if we're coming from the "Click the cylinder" node (it won't be triggered when we come from the "White platform" node, since our Twine node doesn't have that as a possible story path!). So, the red platform will have two associated Twine nodes, whereas the other platforms will only have one.
Try playing your story now. See how it looks! Next, we'll start adding support for clicking objects and winning. Here's what ours looks like:
There's another aspect to the story, besides stepping onto different platforms: you can click objects! (In fact, that's how you "win" this game).
So, let's add our cylinder and sphere -- the ones that the Twine story talks about. You can do this in the same way that we added Planes earlier: right click in the Hierarchy panel and add 3D objects for a cylinder and a sphere. The cylinder goes on the green platform and the sphere goes on the red.
Now, when you interact with the cylinder (while in the "Green Platform" Twine node), we want to activate the "Click the cylinder" Twine node (so that your story "remembers" that you've clicked the cylinder). So, add an Associated Twine Nodes component to the cylinder object, and choose the "Click the cylinder node" as its associated Twine node.
After we've clicked the cylinder, we should be able to click the sphere and enter the "victory state" (the node with the title "Click the sphere"). So we should associated the "Click the sphere" node with the sphere. Note that it will only be triggered if the currently active node is the "Red platform after clicking cylinder" node, since that is the only parent node of "Click the sphere".
When we added these Associated Twine Nodes components, you may have noticed that another component, called Prompt also showed up. The Prompt component displays text on the player's screen to tell them what will happen when they click on the item. Let's edit those prompts to be more informative about what happens when the user clicks the cylinder and the sphere (we'll just make them say "Click the sphere" and "Click the cylinder").
You've now reviewed some basic Prairie concepts while creating a very simple game! Try pressing Play to see what you've created. Here's what ours looks like:
(Click the GIF to see a larger version!)