process document - amazon s3 · process document conrad bassett-bouchard emily porat jayanth...

37
Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi

Upload: others

Post on 30-May-2020

13 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Process DocumentConrad Bassett-BouchardEmily PoratJayanth PrathipatiKate CareyRiva FouzdarSina Siddiqi

Page 2: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Sections1 Who Did What2 Storyboards3 Wireframes + IxD4 Character Art5 Environments6 Animation7 Dialogue8 Playtesting9 Development10 What Worked11 What Didn’t Work12 Future Improvements

Page 3: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Opening scene from Wolfe Goes to School. Dark, yet playful.

Page 4: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Who Did What

Page 5: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Team Wolf is:

Conrad Bassett-Bouchard(Design lead)

Emily Porat(Research Lead)

Jayanth Prathipati(Development lead)

Kate Carey(Design + research lead)

Riva Fouzdar(Research Lead)

Sina Siddiqi(Development lead)

Animation, brand, game design, interaction design, process documentation, wireframes

Character development, dialogue, playtesting

Project manager, Twitch integration, Unity programming

Animation, brand, concept documentation, environment, game design, narrative, playtesting, storyboards

Character development, dialogue

Concept creator, game producer, Unity programming

Page 6: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Storyboards

Page 7: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Storyboards were a crucial part of defining the game as a team. We used the storyboards to fur-ther refine the narrative and to split up asset creation between art, interaction, and develop-ment.

After deciding on the structure of the game, we needed to bet-ter understand the sequence of

events in order to divide up the work. We storyboarded all the cutscenes and the first round of dialogue to visualize how the game would look. These story-boards were early definitions the sequence of the cutscenes, game interactions, and visual style of the game.

Page 8: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Wireframes / Interaction Design

Page 9: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Video game design in six weeks is no small task. Audience participation games (APGs) rely on Twitch chat to handle both audience chat and interactions with the interface. Twitch streamers complain that APG interactions clog up the chat channel. Although time constraints led us to keep the input of votes in the chat,

we did decide to focus on displaying information on the screen whenever possible, since a major part of the game is to inspire audience discussion in the Twitch chat. The game narrative takes place onscreen throughout the game, while the class attendance sheet is prominently displayed to show which students are still around.

Page 10: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

We also wanted to make the game feel interactive, even if only the streamer was able to control the actual game interface. One way of accomplishing this task was to have vote tallies change in real time. Although each audience member only gets one vote, they are allowed to revote and overwrite their original choice.

Page 11: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

audience members needed reminders of past answers, it would be natural to refer to students by name, as opposed to a “job title” or a “player number.”

Finally, we wanted to make Twitch commands simple by focusing on the recognition over recall usability heuristic. It made sense to leverage human intuition by associating the students faces with real names at every opportunity so that audience members would identify more strongly with the characters. This way, when

Page 12: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Character Art

Page 13: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Despite its dark storyline, Wolf Goes to School is designed to be a playful game. The character art was created keeping in mind that dichotomous nature. The characters are in a very grave situations, and have professional identities and quirky personalities, despite clearly being schoolchildren.

Alix, the gender-neutral mad scientist child.

Page 14: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Environments

Page 15: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

The environments for Wolf Goes to School set the tone for the whole game. We under-stood early on that the concept of a wolf eating school children would have to be playful, rather than gruesome. The visual style of the environments was in-spired by children’s storybooks, with childish colors and playful textures.

Using the storyboards, we quickly understood what environments needed to be created: a classroom, a play-ground with tetherball court, and a forest path. As develop-ment went on, we had to add variations on each environment in order to reflect the narrative and address technical concerns. For example, the playground

Page 16: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

needed to be shown at night while the kids tie up the student who was voted as the wolf, and we needed another version in the daytime with the pool of blood for the scene the morning after.

Page 17: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Dialogue

Page 18: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

preted the clues, causing them to vote for the wrong character (skewing the remaining rounds).

Finally, we decided on a way to create dialogue that has the kids equally throwing blame on each other, without fixing the wolf or who dies each round. We did this by assigning each character a set of dialogue that is either neutral, implicates him/herself, or implicates a primary character they are blaming. If that character is already gone, we assigned each character two additional characters to blame. By organizing the dialogue this way, we were able to random-ly throw accusations at various characters, essentially confus-ing the audience and increasing the overall effectiveness of the dialogue. It was an elegant solu-tion, given our time constraints.

Writing the dialogue for this project was truly an iterative process. In order to cut down on the volume of dialogue we needed to write, we initially at-tempted to set the wolf to be the same character in every play-through of the game However, this made the game only play-able once through - once the audience figured out the wolf was the same kid each game, there would be no point in play-ing again.

Our next set of dialogue cre-ated clues that pointed to one specific character every round, regardless of the wolf’s identity. This allowed us to create dia-logue that purposely implicated one of the kids, influencing who was chosen each round. During playtesting, however, we found the audience often misinter-

Page 19: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Kid doctor Greg’s Round 1 dialogue.

Page 20: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

AnimationAnimation

Page 21: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Our designers had never animated before, so it was a big challenge going into the project. We used Adobe After Effects for computer keyframe animations. These animations are seen throughout the game, as well as during the cut scenes. Some triumphs included animating an effective opening scene, as well as

animating a moving mouth with appropriately-moving teeth. With more time, we’d like to go back and draw silhouettes as vector graphics instead of .png images in order to make more convincing walking animations.

A sprite sheet of mouth animations for Bruno, the hipster artist child.

Page 22: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Playtesting

Page 23: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

We were able to hold two play-testing sessions. The first session took place after creating about one third of the dialogue, and we read out the character re-sponses aloud rather than hav-ing a digital game. There were four players total, and a few things became apparent im-mediately. First, the dialogue greatly contributed to playtester

enjoyment. The players enjoyed the humorous bits of clever dia-logue and had no problem con-versing. At this point, however, we were planning on structur-ing the dialogue in a tree, with hundreds of different options for each decision. After this play-test, we realized that we had to downsize the dialogue creation deliverables.

Page 24: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

We held a second playtesting session after completing all of the dialogue. We ran the game through a Twitch channel and copy-pasted responses from the dialogue document, simulating what actual play would be like (minus the graphics). One take-away from this session was that people seemed hesitant to contribute at first, but chatted

more as the game progressed and enjoyed the game, overall. Additionally, players did not like the response randomness - they wanted more pointed dialogue hinting at the wolf’s identity.

Page 25: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Development

Page 26: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Coming into the project, the team developers were both newbies to Unity. Software de-velopment on this project was really challenging and reward-ing. Our main challenges on this project were learning Uni-ty, integrating our designs and dialog into a logical structure, hooking the game up to Twitch and getting all of the right in-

put from there. We had a lot of moving parts on this project, from the Twitch chat integration to all of the various cutscenes animated in After Effects and spritesheets created in Illustrator that needed to be integrated into various Unity GameObjects.

Page 27: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Specifically, we had to learn how to integrate Twitch Chat and integrate their OAuth func-tionality. Finally, we had hun-dreds of lines of dialog that we converted over into JSON and then parsed so that our Game Logic could properly use it and figure out when to say what line of dialog. We also a multitude of different scenes with custom

drawn designs and timers to create a great story telling expe-rience for our crowds using tim-ers and Unity CoRoutines.

Page 28: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

We found that integrating with the Twitch API was generally easy, but using Unity Paradigms and mental models was quite hard. The idea of scripts being attached to Objects was very antithetical to OOP paradigms that were taught to us at school, so it was a bit of a challenge to adapt and learn. There are var-ious intricacies to Unity that were hard to understand and we wished we had done more learning earlier to get past these roadblocks when developing Wolf Goes To School.

Page 29: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

What Worked

Page 30: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Before this project, five of our six team members had never made a video game. So the odds were certainly not stacked in our favor, despite attacking the assignment with fervor. To make this game work, we had a lot of moving parts which needed to all come together in just six weeks. From writing effective, meaningful dialogue, to focusing on interaction design, creating thoughtful characters and environments, all while learning Unity and Twitch inte-gration strategies, every mem-ber of the team was needed to make this project a success. In the end, despite scaling the project down as necessary, we ended up with both a playable video game, and a much stron-ger foundation surrounding the principles of video game design.

Page 31: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

What Didn’t Work

Page 32: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Grand ideas must always be molded into viable realities, especially when you’re on the clock. In this vein, one major element of the game we weren’t quite able to complete in time was the streamer’s integration into the game. Originally, we intended for the streamer to play the wolf, thereby having to act on camera for the audience. In lacking this element of the game, we’ve produced more of a “Twitch Plays” game, where the wolf is an NPC.

One other hardship was the di-alogue development. Although we successfully navigated prob-lems of having way too many pieces of dialogue to write, playtesters still found that the dialogue was too random. Good for a playable game, but could be iterated upon in the future.

Page 33: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Future Improvements

Page 34: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Building a playable game was in itself a gratifying achievement for team Wolf. But that’s not to say there isn’t lots of room for improvement!

As previously mentioned, our first step for developers would be to create the streamer side of the game, to bring theater and streamer-audience interac-tions to the spotlight. Also, we’d like to integrate either a chat-bot command that tells players what a character has said in past rounds, or ideally, create a screen that displays (at appropri-ate times) what characters have said in the past.

In terms of dialogue, we’d like to tighten up the overall body of text to give hints to audience members as to who their target is. Although the dialogue as is

accomplishes our goals for the project, it has the potential to be a masterful puzzle of hints, red herrings, and comedy.

Finally, our designers would first love to tighten up some anima-tions, as we had to make some sacrifices to the animation of our anthropomorphized silhou-ettes. Additionally, we’d like to create a couple of different screens to display information that currently clutters the Twitch chat somewhat, as well as to improve the overall connection the audience has to the game.

For now, however, we present Wolf Goes to School as the first videogame five of our six team members have ever made. It was a challenging and reward-ing experience, and we’re proud of our final product.

Page 35: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

The cast of Wolf Goes to School.

Page 36: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards

Thanks for playing!- Team Wolf Goes to School

Page 37: Process Document - Amazon S3 · Process Document Conrad Bassett-Bouchard Emily Porat Jayanth Prathipati Kate Carey Riva Fouzdar Sina Siddiqi. Sections 1 Who Did What 2 Storyboards