Game Jam Review – That One Friend

Overview and Concept

This was for a monthly Bitsy jam and can be played here! I had just discovered this wonderful tool that week, saw the jam was on, and dove in. The theme was simply “Oh no”. Fearing you’re out of place or unwelcome at a party was one of my first ideas, and I stuck with it almost immediately. It’s a relatable feeling that I haven’t seen explored in games, and one that I quickly saw an easy implementation for within Bitsy’s limited mechanics. The central idea would be capturing your character’s insecure inner monologue in writing. This would intrude into your interactions not just with others – who all look at-home in the setting – but also thoughts in response to interacting with the environment.

Design and Writing

Initially I wanted to have a lot more variability in the dialogue, and have it react to what the player did. But within Bitsy’s system, and my time constraints this mostly got cut. Instead I went with everything starting as a series of mostly neutral, but awkward interactions, and ending with a random, looped selection of self-deprecating inner monologue.
I wanted the situation to be obviously uncomfortable for the player character, but also avoid just depicting a hostile environment. The character not liking it was to be shown as valid, and emphasized. But if the people at the party were all actively hostile it expressed a shallow, and tired world view. Instead I settled on a mostly neutral environment where the player character’s discomfort, and assumptions about themself and others were the main barriers. It may be awkward, but the only person stopping the character is themself.
Navigating the awkward space made for an interesting experiment. Naturally some folks will leave after reading a certain amount of awkward stuff. But if someone wanted to read everything, there was no sense of closure. In fact the lack of payoff meant that the character’s suppositions were partially validated. So I created a character for the player to befriend if they made it to them. It would also be an awkward conversation, but the two would connect over their shared discomfort. This made a more satisfying structure, and had a more nuanced message: enduring awkwardness is rewarded. It contradicts the player character’s pessimistic attitude towards the party.

Initially I was going to create a more guided experience. The player’s attention would be directed to various key points that would advance the game state, eventually leading to the girl you befriend. It went something like this:

  • guy at the door introduces premise, sets player on edge and instills doubt over if he was trying to discourage you
  • mentions weird girl at party who went outside
  • casually encourages you to get a slice of pizza + directs to it
  • player finds bathroom door locked if tries
  • pizza gives player prompt about going to the bathroom
  • bathroom unlocked
  • exiting bathroom leads to different game state where girl is back indoors at book shelf
  • she is the only person other than you not passed out that isn’t animated
  • combined with earlier prompt, hopefully directs player’s interest to her for conclusion

As with the complex dialogue this got cut due to limitations in Bitsy and time. Short version: the closest I have found to moving a sprite in Bitsy is loading into a duplicate copy of the level with the sprite in the new spot.

Art

Working with 3 colors and 8×8 sprites, and tiles was an interesting, new challenge. I decided to leave sprites and tiles the same color. At one point I wanted to have every wall interactive (thus a sprite by Bitsy’s logic), so hiding the diffentiation there wasn’t as important. But the 2-color palette gave a better feeling of drudgery to go with the character’s attitude. The biggest challenges came down to making it readable at such a lo-fi resolution.
In experimenting I quickly found I needed to set up a visual language. Not just for myself, but for the player. Specifically I needed a clear way to communicate that up to 64 pixels were humans in a wide variety of poses. This is the template I settled on.

 

person template
Basic person template without arms. Each arm would be 2-3 pixels long from top or middle torso.

The head needed to be 2 pixels as 1 could read as a rounded edge, and legs 3 so that they could bend at the knee. I experimented a lot with movement, and poses. I’m happy with the complexity of some, but it also sacrifices readability. So the game starts by focusing your attention on your character, and the 1 immediately in front of you. Both of these are extremely close to the template to give the player a baseline of what a human looks like.
player and starter
Later I also changed torso proportions, and hair to try creating more feminine characters. The body was really challenging because arms generally overlaped any detail here, masking it. This messed up any attempts to either narrow the midsection, or slope the front of the chest outwards. Doing the hair led to a creative solution. For the long hair shape to have a proper border, 1 pixel at the top of the back was removed. This gave the visual impression of the chest having more volume, and a narrower torso at the same time.
girl
I also wanted to set the player character apart visually to help convey the scene’s feeling. You are shorter than everyone else by 1 pixel. You are the only conscious character with your arms flat at your side. You are the only conscious character that is not animated. These last 2 points did change so that the girl you befriend stands out, and has some visual similarities to you. But otherwise it holds true.
player and girl.png
I did a similar approach on establishing a visual language for the complicated visuals of the kitchen table, specifically the chairs. The chairs read very similarly to a standing human. Additionally the area is crowded enough that to avoid seated characters’ pixels merging into the table, the chairs’ pixesl merge into the wall. Not great for readability. So I made sure that on both sides there is an empty chair away from everything as a baseline. Chairs originally had a 2 pixel gap between legs to set them apart from people, but this made it so 1 of the seated characters’ heads lined up directly into a leg, looking really awkward. Similarly, the person passed out on the left is there so that their head is out of the way of the most visually complex seated sprite above them.
table.png

Broken Perspective

My first instinct was to use a typical top-down approach to perspective with the tiles, but as I got deeper into visually decorating the room everything broke. In games like Zelda, the top down isometric effect works because of the lack of detail. Walls are relatively bare, and rooms are defined in very broad, and open shapes. As soon as you start putting lots of things close together the illusion of perspective shatters. It’s also just really awkward if you have convex corners too close to each other. The logic of top-down isometric dictates the corner edges angle inwards if you want both walls to be visible.
pillar.png

Near another corner it means the top of the wall is narrower, which is visually confusing even in isometric before you add decoration.
I ended up with an interesting comrpomise that’s still unrealistic, but holds to internally consistent and believable rules. It’s vaguely isometric, but with an implied camera that’s angled to face slightly north. There’s a number of instances of perspective though. Large surfaces taper slightly, and some wall decorations are given perspective so they don’t look out of place against nearby corners.
north window.png

Visual Blocking

I wanted the home to feel very believably full of furniture, and items in spite of Bitsy’s strict structure. This resulted in a lot of assets with overlapping visual edges that stuck just a bit into nearby grid spaces. Bitsy doesn’t support spriete transparency by default, so I made it a goal to avoid these being traversable. This created a lot of interesting challenges to make sure a blocking sprite read as blocking to the player. I addressed this by clustering things so the traversable area of the room is a simple shape without nuance. For example the kitchen is filled in to be completely solid so there’s no confusion of where you can go. In the few areas where this wasn’t easily done I expanded existing decoration with things like end tables.

 

table blocking
Because of the bottom corner of the shelf the hitbox was the size of the green box regardless. The side table made this much easier to understand.

Still I tried to avoid working exactly to the edge of various grid spaces. Humans being uniform in size, and using the visual language I talked about didn’t have any problems with reading hitboxes. The result is a space that is easily readable for traversal, but also feels more natural and complete than many grid-mapped games.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s