Story Together Documentation

General Background

Story Together is a website game designed for Connections Lab - IMA Low Res Fall 2022.

Works for PC .

Website: https://ten-cooked-bongo.glitch.me/

Code: https://glitch.com/edit/#!/ten-cooked-bongo

• Note: No info is been collected during the use of the website.

Credits:

Together: Gameplay design, Game mechanics

Jun Shu: Client side work: drawing app in P5 editor, Chat (from previouse assignment), Drawing on the cover, and etc

Yueqing (myself): Server side work: drawing app implentation, Players role assign, jump through page. chat function connected to the server, and etc

Key concept and/or intention

Idea born from Jun’s previous assignment: Telling a stroy based on a picture. We want to turn it into a mult-player game. At the begining, we plan to have three(or more) pictures and the players need to tell a story based on the pictures. During one discussion. we suddenly thinks: what about let the players themselve to drawing and see how the story changes? As a result, the main mechanic is been settled.

The game is designed for icebreak or a party. Compare to accurately describing the content of the story, seeing how the story is changed and having fun is more important.

Production decisions

We began with deciding what is the minmal playable version of this game. And here is the plan we have:

1. Three players with audiences. the players can choose their position

2. At least one story

3. A drawing App allows the player to switch color

At the very begining, we plan to give the players ability to erase what they’ve drawn. We decided to cancle this feature since it would be more intersting to see how wrong drawings would effectt the story.

Also, I was wondering should we allow the player see previouse player’s drawing. Jun said it would be more instresting if they can see. So we kept this feature.

First version with erase function applied

Major Challenges and Solutions(if applied)

• Role sellection:

  I counted the number in each namespace and wish to limited each room to one player. However, I did not find a way to disable the button when the number is => 1 and able it when the player leave before finishing the drawing

• Page organization:

  I need player N can see what player 1-player (N-1)’s drawings. I plan to place all the rooms under same namespace (private) at the very begining. I try to make player N’s room as a sub page of player N-1’s page. However things didn’t work as I expected since I need to have different setting for each page. As a resulte, I put all of them in different name space and connected them from the server side. I am not sure if this is the most effective way but at least it works :D

• Chat and drawing implentation

  Jun’s P5 drawing app: https://editor.p5js.org/FantasticJun/sketches/txFsmvrvI (earse function is still here, haha)

  I need to use Jun’s code and connect them to the server. The drawing app broke the code at the beging and I am not sure why, Since I am not very familiar with “extraCanvas” in P5, so I updated the drawing app’s code and deleted all the extraCanvas. Magically, everything works!

  I made a mistake when implenting the chat box. Instead of let waiting room listen for message named “msg” from client, I make all roomes listen for the message and only waiting room did not listen. As a result, wait room’s client can’t get the message. After checking all the log I print out, i realsed what’s wrong and fixed the bug.

This log did not show up when I checking the log

This line was not here at the begining

Potential Next Steps

1. Add count-down to each room:

   1. Only when players in the previouse rooms finished drawing, the next player can start his/her drawing

   2. After all the players click finish and jump to the waiting room, count for ~3 minutes and them shows the whole story in the chatbox.

2. Add a database for the storys:

   1. Each time the player jumps to the drawing room would get a new story line

   2. The players can contribute to the story database with their own story

3. Add room create function:

   1. Players can create a play room and invite others to join

   2. Players can choose how many players needed for a round,