Concept:
Ever wondered what it would feel like to direct a show? Well, you would be glad someone (me!) sweated and cried over code to give you this chance.
For my midterm project, I wanted to create a ‘theater/stage management experience’. This idea stems from our assigned Crawford reading on interactivity. He argued that activities like reading or watching a performance are not actually interactive since a person can only react to the experience and not influence the outcome or the final showcase. I created this experience not to counter his point, but to instead give the user a playful way to interact with the theatrical world (or at least influence how a show turns out) by stepping into the shoes of a stressed director. The experience is made in a game format (mini-games), and I decided to focus on three problems a real director might face backstage: broken spotlights, mixed-up scripts, and a panicked actor. I believe three problems were the optimal choice since it allowed me to work on the user experience/aesthetics while still keeping it challenging (but not too much) for the user.
Sketch:
Link to the experience: https://editor.p5js.org/Leyanah/full/27UhALCdQ
Process:
To make this, I first started with a game plan (as described in my midterm progress post) and worked on the game cover and each individual mini games separately. This helped me work on each section and notice errors early on. It also gave me a sense of confidence to know that at least some parts of my project were up and working. Then, I merged everything into one p5 console. This was the hardest part since I had a lot of debugging to do on so many lines of code (especially removing redundant lines that were crashing the game). In general, I really like my game. I am especially proud of having been able to create different states, which allow the user to navigate through the game, from the backstage to the mini games and eventually to the show. I have also used ‘class’ to make the tears fall randomly at different speeds in my tear mini game and to make my actor move (using a sprite sheet) at the end for the show. Here are the codes:
class Tear {
constructor(x, y) {
this.x = x;
this.y = y;
this.speed = random(4, 7);
}
update() {
this.y = this.y + this.speed;
}
display() {
fill(120, 190, 255);
ellipse(this.x, this.y, 18, 26);
triangle(this.x, this.y - 22, this.x - 8, this.y - 6, this.x + 8, this.y - 6);
}
}
class Character {
constructor(img, x, y, h, frames) {
this.img = img;
this.x = x;
this.y = y; //y is where the feet touch the floor
this.h = h;
this.frameW = img.width / frames; //width of one picture
this.frame = 0; //which picture of the sprite sheet is shown
this.w = this.frameW * h / img.height; //keeps the picture's proportions
}
display(brightness) {
tint(brightness); //used to change the brightness of the picture
image(this.img, this.x - this.w / 2, this.y - this.h, this.w, this.h, this.frame * this.frameW, 0, this.frameW, this.img.height);
noTint();
}
}
One part of my code that I think makes the whole difference is this:
function drawShow() {
ShowTime = ShowTime + deltaTime / 1000;
let Results = [LightsFixed, ActorCalm, ScriptReady];
//the actor on stage - final performance
if (ActorCalm) {
ShowActor.frame = floor(frameCount / 8) % 8; //the next picture of the sprite sheet
ShowActor.display(255);
}
else {
CryingActor.display(255);
}
//the stage is dark without working lights
if (LightsFixed) {
Darken(60);
//spotlight beam for the show
blendMode(ADD);
fill(60, 48, 18);
triangle(Width / 2, -20, Width / 2 - 150, LightY, Width / 2 + 150, LightY);
blendMode(BLEND);
}
else Darken(200);
This part of the code is what makes my experience interactive since the show will be affected based on the success or failure of each mini game. For instance, if the ‘tear’ game fails, the actor would appear crying on stage; otherwise, the code displays his spritesheet. Below are images of these two different outcomes.
Similarly, the ‘wires’ game determines whether the show will have good lighting or we’ll just have a dark stage. As for the audio, I decided to have looping audio throughout the game (triggered by the start button and stopped when we reach the ‘show’ stage) and winning/losing soundtracks for the mini games. I used more pronounced winning/ losing soundtracks for the final show to mark a difference from the mini games and give the user a better ‘sense of accomplishment’ when they finish the game (I noted this when I made my friends test the game).
References:
I opted for generated characters and backgrounds to focus on improving the game itself rather than creating everything from scratch, given our two weeks. To generate my characters and props, I used “Pixler.dev” (Link) and Claude for my backgrounds. As for my audio, I sourced all my sound effects and music from “Pixabay” (Link). To help me with coding, I referred to the p5 directory and “The Coding Train” videos on OOP (Link and Link) and back buttons (Link). I also had trouble with the timer bar, which was not matching the time limit. I asked Claude, and I understood that p5 gives a variable called deltaTime, the milliseconds since the last frame. Adding it up counts real time so the bar matches the seconds in each mini game.
Reflection:
In terms of further improvements, I would like to work on making the script game’s influence slightly more consequential. What I mean is that right now, the tears change which actor appears and the wires change how dark the stage is, but the script game only affects the review bubbles. If I had more time, I would give it a visible effect on stage too. For instance, if the script is ready, the actor could deliver his lines with speech bubbles showing the script text. If it isn’t, he could freeze and show question marks or stammer.
Finally, I am grateful to my friends who tested my game. Their feedback helped me judge the ‘flow and feel’ of the game. For instance, I increased the overall timer (especially the tear game timer). I also made the scripts shorter so that the lines can be read faster. Now that I have a finished project, I can admit that I really enjoyed the process. I had lots of fun coming up with the script and the reviews (especially the bad ones) and seeing my ideas come together into one game. I hope people enjoy the game.
