Housing Story Logic For Our Choose Your Own Adventure Game
So I've decided to store the story content and logic in a JSON syntax. Here's an example of what I have so far:
{
"storyChapters":[
{
"chapterTitle":"Chapter 1",
"chapterPages":[
{
"pageTitle":"Start Here",
"storyContent":[
{
"contentType":"text",
"content":"Cake or death?!"
}
],
"transitions":[
{
"transitionText":"Cake",
"transitionTarget":"Cake"
},
{
"transitionText":"Death",
"transitionTarget":"Death"
},
{
"transitionText":"I'll have the chicken please!",
"transitionTarget":"Chicken"
}
]
},
{
"pageTitle":"Cake",
"storyContent":[
{
"contentType":"text",
"content":"Fine, let him have cake!"
}
],
"transitions":[]
},
{
"pageTitle":"Death",
"storyContent":[
{
"contentType":"text",
"content":"Ha ha, death for you!"
}
],
"transitions":[]
},
{
"pageTitle":"Chicken",
"storyContent":[
{
"contentType":"text",
"content":"Chicken is delicious!"
}
],
"transitions":[]
}
]
}
]
}
Let's break this down a bit. I like the idea of following the structure of a regular book. We should have chapters and pages. Our pages will hold the text and images and the various choices that a reader can make.
We start off with an array of "storyChapters" that we'll use to hold all our chapters. Each chapter inside of the array has a title ("chapterTitle") and it's own array of "chapterPages" for holding pages that belong in that chapter.
Each page has a title ("pageTitle") and an array of "storyContent" for defining text or images. Each piece of story content will have an attribute "contentType" that is set to either "text" if we're adding new writing to the story or "image" if we're adding a picture. If we're adding text then the "content" attribute is where we put the text that we want to add. If we're adding an image, then we set "content" to an identifier that represents an image that we previously uploaded.
Pages need a way to display choices for a user to make as well as a way to know where to send the user once they've made a choice. That's where the "transitions" array comes in. For each choice we want to display for our reader, we'll add a transition. Transitions have two attributes, "transitionText" to hold the text of the choice that we'll display to the reader, and "transitionTarget" to hold the name of the page to send the reader if that choice is selected.
With the simple example above, we would expect our app to start by rendering a page with just the text "Cake or death?!" and three choices for the reader to choose from: "Cake", "Death"or "I'll have the chicken please!" If our reader chooses "Cake" then our app should display the text "Fine, let him have cake!".
So this structure looks like it'll do the job of rendering our story content and allowing the reader to navigate the story. I can already think of some fun ways to extend this. We'll want some way of tracking scores (give the reader points for making good choices) and maybe we'll need some way to keep track of choices that a reader made earlier in a story. It could be fun to refer back to older decisions later in the story (maybe send the reader down a different path, or allow them to select from additional choice options). For now though, let's leave this as it is. We can always extend our logic later on.
We start off with an array of "storyChapters" that we'll use to hold all our chapters. Each chapter inside of the array has a title ("chapterTitle") and it's own array of "chapterPages" for holding pages that belong in that chapter.
Each page has a title ("pageTitle") and an array of "storyContent" for defining text or images. Each piece of story content will have an attribute "contentType" that is set to either "text" if we're adding new writing to the story or "image" if we're adding a picture. If we're adding text then the "content" attribute is where we put the text that we want to add. If we're adding an image, then we set "content" to an identifier that represents an image that we previously uploaded.
Pages need a way to display choices for a user to make as well as a way to know where to send the user once they've made a choice. That's where the "transitions" array comes in. For each choice we want to display for our reader, we'll add a transition. Transitions have two attributes, "transitionText" to hold the text of the choice that we'll display to the reader, and "transitionTarget" to hold the name of the page to send the reader if that choice is selected.
With the simple example above, we would expect our app to start by rendering a page with just the text "Cake or death?!" and three choices for the reader to choose from: "Cake", "Death"or "I'll have the chicken please!" If our reader chooses "Cake" then our app should display the text "Fine, let him have cake!".
So this structure looks like it'll do the job of rendering our story content and allowing the reader to navigate the story. I can already think of some fun ways to extend this. We'll want some way of tracking scores (give the reader points for making good choices) and maybe we'll need some way to keep track of choices that a reader made earlier in a story. It could be fun to refer back to older decisions later in the story (maybe send the reader down a different path, or allow them to select from additional choice options). For now though, let's leave this as it is. We can always extend our logic later on.
Comments
Post a Comment