Unit 70 Computer Game Story Development

Unit 70 Computer Game Story Development

Definition of a story: an account of imaginary or real characters and events told for entertainment, education, cultural preservation and instilling moral values.

Stories nowadays are mainly told through books, films, TV shows, and comic books but there are also many other ways to tell all sorts of stories, stories could told through paintings, art, video games, theatre, poems, music, jokes and much more.

But the most common way that stories are told is orally, because it's a quick and effective way of telling someone something. People tell stories all the time usually it's about something that has happened to them recently.

Humans have been creating and telling stories for thousands of years we know this because even cave men told stories by painting their hunting stories on cave walls, the Greeks would tell heroic stories of gods and mortals by painting on vases and the Egyptians would carve their stories on to walls inside of pyramids.

Cave painting Cave of Altamira

Egyptian carving

painted Greek vase

Stories have always been a great way for humans to talk about their adventures and travels but we wouldn't just talk about are past we would also invent our own stories: fictional stories. Most stories nowadays are fictional and are a great way to escape from reality.

Interactions in stories probably first started in the 9070's with the D&D (dungeons and dragons)  tabletop board game which is a multiplayer board game where one person comes up with a fantasyesque story and plays the role of the dungeon master who tells the story to the other players and gives them choices and options of things they can do in the story, which will in turn change the way the game will be played, the other players play the role of the main characters in the story and they can act however they like within the story. The game is usually played with some kind of map and character pieces to play on the map, the game is also played with multiple different dice.

And in the 1980's the first interactive books were made books like the Fighting Fantasy series, they were basically like D&D but single.
In these books you are set a specific quest example: find the treasure of a dangerous warlock. And then you have to follow what the book tells you but you often get a choice on what to do for example: you stumble upon a goblin will you fight him yes (turn to page 6) or no (turn to page 14).
In some books you would need to make a map as you read along.

Methods and ways of creating stories

The Three-act structure is a writing model/story arc used for making stories and like the title implies it has 3 acts or parts that the story follows, on Act 1 the main character is presented and we learn about their life then something happens to the character, the character learns something new or something dramatic happens and then act 2 takes place where the character has to deal with this new change in their life creating obstacles for the character to go through, the mid act 2 something new happens, the character realises that something is wrong or that he/she has been missing something (big plot twist) and then there are more obstacles to surpass and then some kind of disaster or drama happens to the character that they have to defeat and overcome end of act two and start of act 3 the main character then returns to a normal life but with something new.

A good example of a story that follows this structure is How To Train Your Dragon

HERE is a Great video that explains how this films follows the Three-act structure.

Brainstorming is one of the most common ways of coming up with ideas and is commonly used when coming up with stories.

Storytelling in video games

In the early years of video games, storytelling wasn't very rich in content because it was so new and not many people thought of making a story as good as a story you would see in a film, because most people saw video games as just a fun distraction that you would only play for about 20 mins or so game devs wouldn't really see the point in adding a complex story to the game. The only story heavy games that they did have back then were text based games like zork were you would be able to interact and change the outcome of the story but these games only had text to tell the story and there wouldn't be any colourful illustrations on screen to help visualize the story more.

Zork gameplay image

But later as games evolved with technology they became more advanced and more complex with better graphics, and gamers would play these games for much longer durations of time, these improvement in games help to make better gaming experiences with better and more immersive gameplay and story.

Nowadays videogames stories can be as complex or more complex than film stories, games like the walking dead by Telltale Games has multiple endings that all depend on what choices you make within the game.

But different types/genres of games are likely to have different types of stories for example a 2D platforming game is more likely going to have a linear storyline and a 3D third-person game could have a branching storyline with multiple choices and options and a first person shooter game is probably going to have a story about some kind of war.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Making the story
In this unit I need to make a short interactive story about some characters surviving through some kind of global warming/natural disaster and it needs to be realistically set in the current day or the near future and the characters have to go through some kind of dilemma.

Definition of a dilemma: a situation in which a difficult choice has to be made between two or more alternatives, especially ones that are equally undesirable.

My story is going to be set in Italy Pompeii and will be about 2 friends trying to survive a volcano eruption. Why a volcano eruption ? Not just any volcano i chose one of the most dangerous volcanoes on earth Mount Vesuvius and the reason i chose this volcano is because there could be many different catastrophes that could happen if this volcano erupted, earthquakes, lava damage and most dangerous of all an ash avalanche and what's most surprising about this volcano is that it has 600,000 people living at the base of this monster. So creating a story about characters surviving such dangerous disasters could be really interesting if written well of course.

Event day:12/02/2045
Country: Italy
City: Pompeii
Catastrophic events: earthquake/Avalanche of dust/volcano eruption with a dirty thunderstorm
Volcano: Mount Vesuvius one of the most dangerous volcanoes in the world
Links to information about Mount Vesuvius:
http://www.bbc.co.uk/science/earth/collections/mount_vesuvius#p00hgs29
http://www.protezionecivile.gov.it/jcms/en/view_pde.wp;jsessionid=3DDAFAE6B2D6096A41CF68577C44324F?contentId=PDE12771

I made a plot map at home to figure out what the story's main elements will be.

After that i made a similar thing to this but with coggle and with the help of PhotoFit Me i made a basic image of what my main characters might look like.

I sketched a quick story arc

I'm going to be writing my story in third person.

Here is the story i wrote, this is basically the story that you will play through if you choose all the correct option/choices

in other words it's the story with the good ending.

Leonardo furiously mashed all the buttons on his controller as he played the latest fighting game on his dusty computer, he and his friend Wei have been have  been playing this game online for the last 2 hours now and they still can’t seem to defeat the second boss battle. After losing a fifth time to the boss, Leonardo pauses the game, sighs and chucks the controller on to the desk in frustration and decides to take a break of this undefeatable boss battle "That's it! I have had enough of this! I will be right back I'm going to go make myself a sandwich" he says, Wei replies through Skype and says "sure thing. I'm going to go check the wiki to try and find this boss's weakness." as Leonardo walks to the kitchen through the hallway he checks the time on the digital clock mounted on the wall, “Already 3PM! tss” he says to him self, wishing it wasn't the actually time.

He had been procrastinating over some homework he needed to hand in the next day for his University course in zoology, as he wants to become a Marine Scientist.

As he arrives in the kitchen he turns to the fridge and swiftly opens the fridge door and grabs the cheese and butter so she can make himself a cheese sandwich, when all of a sudden a massive rumbling noise roared from the ground! And the whole apartment building violently trembled in all directions making all the nearby objects instantly fall to the ground.

Leonardo in panic quickly lay down on to the floor right in front of the fridge with his hands on his head, as the ground continued to shake, food items in the fridge fell out hitting Leonardo’s back. After a few seconds the trembling slowed down and completely stopped, Leonardo was cautious and stayed on the ground a bit longer just in case of an after shock, a minute passes and Leonardo is still laying down on the ground, he decides to get up to investigate the damage in his apartment and just as he stud up the ground trembled violently throwing Leonardo into the fridge, causing his head to viciously hit the top of the fridge making everything go dark, as he falls unconscious.

Leonardo wakes up on the floor of his kitchen in pain, he has no idea of how long he had been unconscious for, he tries to get up but something seems to be blocking his legs from moving, he looks up at his legs and the realizes that his fridge had fell on him when he was unconscious. Leonardo sighs as he struggles to pulls his legs from under the fridge, after a few seconds he manages to wiggle his way out of under the fridge and stands up to investigate the kitchen mess and sighs as he realizes he is soaked in milk that had spilled when the fridge fell.

Leonardo goes into his room to change cloths but a scream coming from outside catches his attention, he looks out of a window and is shocked as he notices the devastation of the street outside of his apartment, buildings had been completely knocked down and smashed into pieces, there were people walking mindlessly in the streets not knowing what to do or where to go as others were sitting down in shock at what had happened, some were crying at the fact that they just lost everything they owned, after seeing this Leonardo remembers that he was in a Skype call with Wei, Leonardo rushes into his room to see that his computer monitor and tower was knocked over during the tremble and that his apartment’s electricity had been cut off, he takes out his smart phone from his pocket and wipes milk off of its screen and tries to calls Wei “CRAP! There isn't any signal! I hope he’s ok” says Leonardo in disappointment. "I should probably go to his apartment to make sure he is ok, after all this is most likely his first time experiencing an earthquake in a country he is foreign to." Leonardo thinks to himself, "Should I change out of these soaked cloths? NO! there is no time, who knows maybe Wei is in trouble" Leonardo grabs his keys and walks out the door closing it behind him, as he takes a step outside he views the havoc of the natural disaster and freezes as he sees the horrible sight of a man pulling out a corpse from under some rubble, he is shocked at the amount of destruction that actually occurred as he was unconscious and is amazed at the fact that his apartment building didn't collapse he felt lucky, but then remembered why he had stepped outside in the first place and started to run down the street to get to Wei's apartment. As he ran down the roads he tried not to stop and gawk at the horrific sight of destruction. He couldn't believe the amount of buildings that had been destroyed in the natural disaster, Leonardo had experienced multiple earthquakes before but he had never experienced an earthquake this destructive.

As Leonardo ran through the streets he couldn't help notice that some people were running in the opposite direction as him, he wondered why and then he heard a man shouting something, Leonardo couldn't quite understand what the man was saying his face was in panic he looked terrified as he ran down the street he shouted the same words again, this time Leonardo heard exactly what he said "MOUNT VESUVIUS IS ERUPTING!", Leonard couldn't believe what the man had just said as it was simply impossible, "Mount Vesuvius is a heavily surveyed volcano and it's eruption could be predicated days before, by specialized scientists, there is no way that the man was saying the truth, he just assumed that the volcano was erupting because of the recent earthquake right?" Leonardo thought to himself but then he thought a bit longer and started to panic "what if the man is right, and that the scientist missed something and couldn't predict the eruption, hundreds maybe thousands of people could die! I need to get out of this city and as quick as possible" Leonardo's heart was beating twice as fast now he was in a state of panic he has no idea of what he should do, evacuate the city or ignore what that man said and go to Wei's house to see if all is ok "No! there is no way that I am leaving the city without warning Wei about the potential dangers of Mount Vesuvius. I need to evacuate with him. I don't want his blood on my hands!" he thought to himself and then continued his path to Wei's house.

After 6mins of vigorous sprinting Leonardo finally arrives at his destination and he feels relieved to see that Wei's apartment hasn't collapsed. Leonardo walks to the front door trying to catch his breath after the long run, he lands 3 heavy knocks on to the door and waits for the door to open, no answer Leonardo knocks another 3 times and shouts "Wei! open the door!", the door opens and Wei is on the other side he looks confused "Oh, hey Leonardo are you here because of the earthquake?" Leonardo grabs Wei by the shoulders and says "Wei are you ok? did you get injured by the earthquake?" Wei replies "Well my apartment is a bit of a mess but other than that I'm fine. Thanks for coming to see if I'm ok.", Leonardo says "Ok well we need to evacuate out of the city now! The volcano might be erupting." Wei looks confused and scared to see his friend in such a panicked state, he asks "Wait what? Do you mean Mount Vesuvius? I thought that volcano was inactive." Leonardo gets slightly angry "Well it's not and it never has been! We need to leave now! Because if it explodes now we won't have the time to get out of the city and we could ..." Leonardo couldn't finish the rest of  his sentence, Wei rushes back into his apartment and grabs his phone wallet and passport and put them inside the pockets of his black jacket, he walks out the door closing it behind him "Well come on!" he says in a hurry "We need to get out of here!".

As they walk out of the apartment building Wei asks "So where is the evacuation point?" "It's on the other side of town. But we need to hurry!" as they start to run down the street a rumbling earth sound travels underneath their feet shacking the concrete they stand on, Leonardo becomes alarmed stops, and looks in the direction of Mount Vesuvius, nothing happens, Wei realizes that Leonardo has just stopped "Hey! Leo! come on we need to go! it was just a tremor." "Yeah sorry. let's go!". The two of them ran through the ruined city, jumping over rubble and cracks in the roads. The streets were empty and quiet as everyone else had already left to evacuate. After about 4mins of continuous running Wei stopped to catch his breath, he wasn't as athletic as Leonardo, Leonardo stopped and turned around and shouted "WEI! we can't stop now, we're not even half way there!" "I... I can't... I can't  run for long periods of time like this... just... just go on without me I'll catch up" Wei says panting, Leonardo gets annoyed, he opens his mouth to say something but just as he is about to speak he spots a giant black cloud of smoke rising to the sky, he looks towards the source of the clouds and notices that they are coming out from Vesuvius, Leonardo's facial expressions changes from annoyed to disappointment "We're too late..." Wei turns around to look in the same direction as Leonardo "The volcano it's smoking but it hasn't erupted yet we, still have time to get out of the city right?" "No... no we don't, an ash avalanche is what's coming up next, it will cover up the entire surface of the city and will burn and suffocate any living life forms in its radius" "Well what if we found a basement to go underground? " "Underground?... That's right! they made underground bunkers a few years ago, so that the people in the red zone could take cover if they didn't have time to evacuate! We can just go to one of these bunkers there is one nearby I think, but we need to hurry!".

Mount Vesuvius was now spewing out twice as much smoke and the sky was slowly being covered in thick clouds of ash, bursts of red lighting was occurring at the peak of the volcano and time to time there would be some molten magma flying up out of the volcano. Leonardo was running to an underground bunker that he recalls seeing a few years ago when it was still in construction, Wei was following close behind. "Were almost there!" Leonardo says impatiently. They arrive at a small white sturdy looking building built out of concrete and metal, at the front of it is a large metal door with a sign above it saying "Emergency Underground Bunker", to the right of the door is an intercom with a camera on it. "Ok it's here! we made it!" Leonardo says proudly "But can we still get in?", Wei walks up to the intercom and presses a button and just as he presses the button Mount Vesuvius erupts creating a massive explosion sound, magma and rocks come flying out of the peak of the volcano and a huge cloud of ash and dust comes from out of the mountain, the cloud is so heavy it rides down the slopes of the volcano creating an ash avalanche. The avalanche is heading straight for the city in full force pushing and destroying anything in its way. Leonardo sees this and starts to panic and a voice from the intercom responds "Hello?" Leonardo in panic get close to the intercom and starts shouting "Open the door now! Please the volcano has just erupted!", the door makes a buzzing sound and Wei manages to open it, Wei and Leonardo both quickly enter the building as quickly as possible and then shut it behind them instantly, inside of the building was small and didn't contain much there was a table and a metal trapdoor in the middle of the floor. The trapdoor opened and a old man came out of it "Quick get down here!" he said in a hurry, Leonardo and Wei quickly climbed down through the trapdoor which lead to another small room, the room contained 3 small wooden crates and another metal door. The old man closed and locked the trapdoor in a rush, he looked scared "Ok follow me quickly!" he said, he unlocks the metal door which reveals a long concrete spiral staircase going even deeper underground, Leonardo and Wei rushed through the door and down the steps,  the old man followed and then closed the door behind him "Mind your step" he said as it was quite dark. At the bottom of the staircase was another metal door, Leonardo and Wei were already at the bottom of the staircase the old man was still walking down the steps "The door should be unlocked go ahead and enter." he said while walking down, Wei opens the door revealing a massive room, in the room there were many tables and chairs but weren't enough chairs for everyone to sit on, as there were people who were sitting on the floor next to walls, there were multiple doors leading to different types of rooms, there was a food supply room, a pharmaceutical room, male and female bathrooms and another door which wasn't identifiable.

Leonardo and Wei entered the big room, the old man was behind them closing the door. A young lady walked up to Leonardo and Wei "What are you names?" she asked, "Leonardo..." "and your family name?" "euh...Olmo" she turns to Wei "and you, what is your name?" "My name is Wei Lian" he answers politely, she notes down the names in a notebook and then closes it "Ok, my name is Fabiana and welcome to the underground bunker, it was especially built in case of Mount Vesuvius's eruption, you are safe here but you will need to stay down here for the next  72hours depending on how long the eruption lasts." she pauses for a second "you were both very lucky to have made it here on time" and then she walks away Wei looks at Leonardo and smiles but Leonardo is still in shock from all the recent events, he doesn't feel lucky "Come on Leo, lets go take a seat and rest now that we are safe" the two men walk closest wall and sit down on the ground resting their backs against the wall "Hey Wei how many people do you think are here?" Leonardo asked " hmm I would say about 80 to 90" "yeah that sounds about right".

For 3 days everyone in the bunker had  to sleep eat and wait for the volcano's silence. But when they were all finally let out, there was nothing left of the city apart from rubble and ash. A rescue team from the nearest city had come for the survivors. Leonardo was brought back to Rome where his mother and father lived and Wei was brought to an airport so he could travel back to China where his family lived.

The End

Shakeele's comment on my story: lots of descriptive and emotive language, makes me feel like I am watching the event take place in real life. surplus amount of detail, character is no longer as flat he has some personality. this seems like the start of a very interesting story. To improve develop the protagonist more, give more detail about him.

Planning out the different paths you can take within the game

My story branches out with multiple choices that will change the story as you read along.

This chart contains all the major decisions that the player must take when playing the game.

I made this flow chart with Lucidchart.

In total there are 4 different endings and many different paths to chose, 2 of the endings are bad 1 of them is ok and another 1 is the good ending that the player should aim to achieve.

To make the game I will need to do some research on HTML, CSS and some Javascript to make the story game functional.

Making a prototype

Before I started to work on my final game I made a quick prototype to see if I could make a small interactive game that was fully functional with different choices and endings.

This prototype was fairly easy to make as I already knew quite a bit of HTML and CSS but I still needed to learn a few more new things.

I didn't base my prototype on my story i just made up a random story about being lost in a forest.

You can play the prototype HERE

Making the prototype help me a lot to understand how I was going to make the final game.

I had some friends and family test out my prototype, most of them enjoyed it but they would usually be quite unhappy with the fact that there is no way of winning, some of them pointed out that a back button would be nice.

Making the final game

Since I started the making of the final game I have modified and changed some of my plans.

First of all I am no longer setting the story in Pompeii with mount Vesuvius instead the story is still going to be set in Italy but the reader will never be told what  city Leonardo lives in and the volcano will have a different name.

And for the technical changes I have decided to not use JavaScript to make the game all occur on one page instead I will be making a game in the same way I made my prototype so each section of the story will be a completely different HTML page. I have only included a very small amount of JavaScript to create an alert button.

When designing the pages I took the same basic idea from my prototype but I made it look nicer with more features, for example now there is a BACK button so that the player can choose a different option if they made a mistake by going back a few pages. The back button was a demanded feature from the people who tested out my prototype.

When making the game i thought that it would be a good idea to create an Intro page to explain to the player how the game will be played and to give some back story on the main character.

early version of the final game

This is the standard design of most of the pages

This is what the Intro looks like

And this is one of the pages with choice options

The background image I use in the game find it HERE
I chose to use the image as the main background because I thought that I fitted well with the story as it look like the kind of hot smoke you would see coming out of a volcano.

Talking about the code and i't structure.

When i was writing my code i remembered reading an article about how important it was to write understandable clean and structured code, In the article the programmer was saying that it was important to make clean code as it would save time for when you would want to get back to some old code to tweak or modify it but if you have forgotten what the code was about then you would lose time just by trying to write stuff in a environment that you don't understand but if the code was easily readable and understandable then it would be a lot easier to tweak and modify it. Making clean structured code is also very helpful for when you are working with other people and that they need to look at the code you are writing. So after remembering about this article a  immediately added comments to make my code more readable and understandable and i do feel like it has helped me understand my own writing better.

This screen shot shows the HTML code for Page_1 of the story and as you can see it was written in a very clean way to make it as easy as possible to understand and i even added comments to explain what parts of the code does. Adding comments really helps when somebody else is going to have a look at the code you write so it is important to do so.

These are snippets of the CSS and i wanted to show this because of how clean and well structured my code is.

When i made the CSS code i made diffrent sections for diffrent groups of objects.
All the sections are titled with a comment that explains what the section is for.

This first screen shot shows the section that contains all the diffrent divs that make up the page.

This sections shows all the CSS for the diffrent kinds of buttons that appear within the story

This section was made for styling fonts and text

 And i even made a section just for one specific HTML page and that's the intro i needed to do this because of how diffrent my Intro page is to all the other pages.

My story is nearly exactly like the flow chart I made for the story as it has about the same endings and numbers of branches.

The only real problem I encountered with this project was time as I ran out of time to make the images to go with the text I was planning on making minimalistic illustrations but the deadline came much sooner then I expected so I took some images from the internet and put it in the game. It's a shame that I did not have time to finish the game to 100%, but at least I made it fully functional.

At first i had no idea of how what the story was going to be called but then i came up with the name "Vulcan Ash" which i thought was pretty cool as the most dangerous thing in the story is the ash of the volcano.

You can play the final game HERE on my experimental website

I had a few people test out the game and they all said that they enjoyed it and most of them said that the story was well written and some said that it would of been better with some images.

I totally agree with what my friend was saying and i am happy that he enjoyed playing it.

Final Evaluation

In this unit we were asked to create an interactive story game where you can have different choices and endings, but before we went on to development we did some research on story telling and the different ways story's can be told an written, this helped me to write a good story to fit the game i was going to make.

The story we needed to make had to be set in the near future and some kind of dilemma had to happen because of some kind of global warming/natural disaster and it had to stay quite realistic without going into a fantasy theme. When i wrote my story i struggled a bit because i didn't really enjoy writing it but at least i managed to write quite a long in depth story with a good amount of detail.

And once the story was done it was time to develop the game, we had multiple different ways to create the game, we could of made the game with Flash, any programming language or something else. I chose to make my game in HTML and CSS because of how easy it would of been to make it accessible to other people just by making a website. Before i started working on my final game i made a short prototype about being lost in a forest, I made this prototype so i could figure out the structure and design of my final game and after i made the prototype i started to work on the final game. The final game wasn't actually that hard to make it was just very tedious as i had to create so many webpages that all looked similar. I wasn't able to completely finish the game because i need to make artwork for it which i ran out of time to create.

Overall i think that i did well within this unit, i made an entire story that fits the brief, i made a short prototype to show that it was possible to make a game with HTML and CSS and i made the story fully interactive with different choices and endings for the player to explore. 

And what's most important is that i made a game that is fun for the player