Thursday, 22 June 2017

Unit 55: Graphic Narrative Production



The main influence for the narrative part of this project was the Deadpool game as this has such creative directing involved that mixes multiple genres of narratives from  4th wall breaks to comedy and humor. The structure was created in a sort of comic style way which I wanted to capture in our game. As for design The last of us was important to make a derelict style building to give off the abandoned theme which emphasizes what Chernobyl is all about. The graphics where trying to achieve realism that The Last of Us holds to make it look nice.

The aim was to make a sort of narrative that wasn't just visual but vocal and in order to do this we were going overlay a narrator over the comic style picture depicting the history of per-Chernobyl disaster. In game you start of on a tour the tour guide is a man who grew up in Chernobyl and every time you enter a room he explains what the room was like and how vibrant and lively the place was in the form of a comic strip style flash back, we couldn't get this done however due to time.

The methods weren't in place in the game as the time it took to make the level design and have functioning game took too long and none of the comic strips were produced in our game. There wasn't enough time to create the mechanics in the game. We also tried to create a controller in the shape of a book to help immerse the the audience in the tour guide theme and the coding to get this done is rather easy as its all just an on click event that then plays a animation pre-made in either unreal of 3DS Max.

If i could i would of used the effects of visual structuring in game to emphasize the importance in the room for instance, in the top floor there would have been a broken piano in the center of the room with a beam of light coming from the weather damaged roof that shining on the piano which would draw the attention to it making the player know that they should interact with the piano. The flashback effect is heavily important to cause the reader to sympathize with the story and connect with the game.

I believe i could of executed this correctly to a mediocre degree as our previous work to some degree used the same method as this, how ever with out the evidence of work i can be exactly sure that it would go the way it i said it would. This style of narrating ive never came across before in any game and think it would be a good combination of realism and fictional which helps blend our game as its about a real event but the building is made up of different buildings in real life.

I believe professionals give more time into research different styles of narrative which i failed to do with this work as i made my priority to make the game look good which made me spend time waiting for assets to be made when i could of used that time to look into styles of narrative and how to implement them into our game however structuring a story designing and adding into our game to a professional level would be rather difficult task as it is due to the time it takes to create a professional peice of work. At best given the time we had making a narrative we could only make something basic.




















.left {
background-color: black;
width: 100%;
height: 700px;
display: flex;
align-items: center;
justify-content: center;
}


.section1 {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

 .profile {
  width: 60%;
  background-color: green;
  height: 300px;
 }
  .aboutme {
  width: 60%;
  background-color: white;
  height: 300px;
 }

.right {
background-color: white;
width: 100%;
height: 700px;

}
.section2 {
width: 100%;
height: 20%;
background-color: black;
display:flex;
align-items: center;
justify-content: space-around;
}

}
.project1{
width:100px;
height: 50px;
}
.project2{
width:100px;
height: 50px;
}

.project3{
width:100px;
height: 50px;
}

.section3 {
width: 100%;
height: 80%;
background-color:  white;
}

/* Project 1 Website */
.Content {
display:flex;
justify-content: space-around;
}

.Box1 {
  height: 400px;
  width: 400px;
  background-color: black;
  background-image:url('../images/Dojo_Game.png');
  background-repeat: no-repeat;
  background-position:center;
}

.Box2 {
  height: 400px;
  width: 400px;
  background-color: black;
  background-image:url('../images/Graves_1_Game.png');
  background-repeat: no-repeat;
  background-position:center;
}

.Box3 {
  height: 400px;
  width: 400px;
  background-color: black;
  background-image:url('../images/Graves_2_Game.png');
  background-repeat: no-repeat;
  background-position:center;
}

.Box4 {
  height: 400px;
  width: 400px;
  background-color: black;
  background-image:url('../images/Graves_3_Game.png');
  background-repeat: no-repeat;
  background-position:center;
}

.Box5 {
  height: 400px;
  width: 400px;
  background-color: black;
  background-image:url('../images/Game_Game.png');
  background-repeat: no-repeat;
  background-position:center;
}

.Box6 {
  height: 400px;
  width: 400px;
  background-color: black;
  background-image:url('../images/Gate_Game.png');
  background-repeat: no-repeat;
  background-position:center;
}

.Box7 {
  height: 400px;
  width: 400px;
  background-color: black;
  background-image:url('../images/Fire_Game.png');
  background-repeat: no-repeat;
  background-position:center;
}

.Box8 {
  height: 400px;
  width: 400px;;
  background-color: black;
  background-image:url('../images/Moon_Game.png');
  background-repeat: no-repeat;
  background-position:center;
}

.Box9 {
  height: 400px;
  width: 400px;
  background-color: black;
  background-image:url('../images/Night_Game.png');
  background-repeat: no-repeat;
  background-position:center;
}

.Space {
height:100px;
}
.banner {
height: 200px;
width:70%;
background-color: black;
display: flex;
margin-left: 15%;
color: white;
font-size: 50px;
justify-content:center;
}


 /* responsive */


@media (min-width: 600px) {

.main { display: flex;}

.left {

width: 30%;
height: 1080px;

}

.right {

width: 70%;
height: 1080px;

}

/* Section 1 */




/* Section 2 */


.project1{
width:100px;
height: 50px;
background-color: white;

}

.project2{
width:100px;
height: 50px;
background-color: white;

}

.project3{
width:100px;
height: 50px;
background-color: white;

}

}








The first steps into creating my website was figuring out how I want it to look then splitting it up into sections to figure out where the Divs are going to go. So in photoshop I created a mock image of what i wanted the website to look like. The image in my head was having a navigation bar at the top, an about me to the left and a update section in the left over space. This wasnt the end result admittedly as I wasnt able to create alot of what i wanted. I split the page into 3 sections. in the first 2 sections I added some more divs, three in number 1 and two in number 2. In section 1 I made all the boxes the same height and using flexbox I made them centered and space-between. The other section i added two different boxes with different sizes one of them was supposed to be replaced with 

This is the water i added into our game that has replaced the bottomless pit into the game. admittedly I did cheat to get this water by downloading Unreal Engines free sample pack of water because creating water of my own would of taken me a long time to figure out as I have no experience with the Unreals code and there were no tutorials that allow me to figure this out. The thing i did change was the transparency of the water and the color, this allowed me to add a little of my own touch to the game instead of completely ripping it off. I hope in the future i gain the knowledge to do this myself. The rocks in my game are also taken from this sample pack but it only game with one rock the and re sized and merged some together to make different looking rocks, the texture on these ma