Street Typer

Timeline
Areas
Collaborators
Tools
3 months
Spring 2023
Creative Direction
UI/UX & Prototyping
Game Development
Visual & Animation
Grace Li
Ruifen Jin
Ziyu Li
Unity, GitHub
Figma, Procreate, Clip Studio Art, iMovie
Discord

Street Typer is a two-player typing game where players combo word attacks and defenses to defeat their opponent.

Project Overview

My team crafted STREET TYPER as part of a Experimental Game Studio course, where we iterated on the original idea of a typing competition game and explored ways to make such a game creative and engaging.

STREET TYPER is a homage to late-night fighting game sessions with friends and ‘80s ASCII-terminal graphics. The game combining fast-paced keyboard gameplay with the opportunity to learn and practice typing skill. Build devastating combos and compose powerful attack names to claim the title of gold-tongued champion in this two-player typing game.
My Contributions
I served as our team's Project Director and lead the creative direction for our game. My work included refining the styles of our game as well as outreach to get real players to try out our game.

While defining our creative goals and managing the team to achieve our objectives, I also contributed to ideating and creating animation work, concept art, and concept UI.
Street Typer hosting game gif.
Street Typer typing attack gif.
Players can host a game by pressing Host (P1) in order to play with a friend, who joins their game by typing in the host IP address and pressing Client (P2). They can now battle against each other in the same typing match.
Players type in a combination of adjectives and verbs (blue-colored attack "attributes" + white-colored word "attacks") from a shared word bank. The longer the attack, the more damage to the opponent, and the more difficult for the opponent to defend against.
Play With Your Friends
Create Combos from the Word Bank
Type Blocks to Defend from Attacks
After receiving an attack, players have a brief window to type in a block command and successfully defend against your onslaught, avoiding any harm. The block command varies in typing difficulty based on the attack received.

If the player is not successful in blocking, they will take some damage to their health. Once the opponent's blue health bar reaches 0, the player wins the battle.
Street Typer defend from attack gif,
1. Problem Space
How do we create an engaging multiplayer experience?
I joined the Street Typer team as project manager after the game had already went through its first iteration. From there, we had a lot of broad-level refining to do in order to define our scope and game experience.

I will go over two of our main hurdles and provide some details on each.
1. Refining the Game Experience. There were flaws in the original gameplay, so we needed to restructure how players strategically interacted with the keyboard and each other.
2. Defining the Visual Experience - We lacked a consistent creative direction, so we focused on building a backstory for an ASCII arcade world.
2. Refining the Game Experience
From a terminal-inspired idea to an ASCII fighting-style game.
The original video game concept was a "hacking" game imagined in the computer terminal setting, a two-player typing game based solely on typing speed. Players could type anything they wanted to in their box. The problem with this game experience was that players could exploit each typing match against their opponent by mashing keyboard buttons to win, which we noticed was happening a lot during our preliminary player tests.
We wanted to create an experience that was more strategic and exciting, but also unlike current typing racer games whose win condition relied completely on typing speed.

After brainstorming ways to translate the original game format, we settled on a "shared word bank" mechanic where players must choose specific words to type. This allowed for deliberate competition against the opponent when coming up with various word combinations.

Using the word bank, players dealt damage to each other by "creating" attacks through wordplay-- typing in descriptor words before an attack verb. For example, typing "BURNING PUNCH" would deal some damage to the opponent, but typing "BURNING BLISTERING PUNCH" would give the opponent even more damage. On the other end, in order to block an attack, the opponent would need to accurately type a random phrase that shows up on their screen, with phrases varying in difficulty based on the attack.

We went through a number of iterations to polish the game UI after transitioning to this gameplay style.
UI iterations for Street Typer.
Early version of Street Typer's UI.

A more preliminary UI design.

Intermediate version of a Street Typer UI.

One of many UI iterations exploring ways of positioning player mechanics and information.

Street Typer UI exploration final.

A cleaner UI closer to the final product, with no distracting graphics.

3. Defining the Visual Experience
In our first round of play tests, we noticed a lack of world-building and art direction. We wanted to create a more engaging sense of battling your opponent instead of mindlessly key-smashing.
Looking towards '80s and '90s arcade battle games and terminal graphics and for creative inspiration, we explored possible pivots to using pixel art, 8-bit visuals, bitmapping, or dithering techniques to communicate our visual language instead. Specifically, we looked to define our two battle characters, the players of the game.

However, we still wanted a way to create ASCII-style art, and went through various unsuccessful iterations.
Art direction moodboard for Street Typer
ASCII character art explorations.
These iterations were oftentimes too uncommunicative to make sense of what the ASCII conveyed, or too simple in a way that made animating attack sequences difficult.

A breakthrough occurred when we found an image-to-ASCII converter (DeepAA by OsciiArt) that worked perfectly for our needs.

We were able to convey our character illustrations as ASCII-format animations after modifications in speed and linework. Putting the animations in our game helped achieve our goal of giving the player a visual sense that their typed text translated to attack and block interactions with each other.
Illustrated animation of girl character, Player 2.

Original illustration frames for Player 2's ultimate animation.

ASCII gif of girl character, Player 1.

Final ASCII-style animation for the same ultimate sequence.

3. Branding and Marketing
Designing our project page and preparing for the showcase. Our game is available to play on Itch.io here.
Lastly, we also developed a variey of media to define our branding and make our game accessible to anyone interested in playing it. This includes logo work, posters, cover art, key art, merchandise, and other deliverables.
Street Typer visual work grid.
Street Typer poster.
4. Reflections
Below are photos from the yearly Game Creation Society Showcase that my team presented Street Typer at. It was heartwarming to watch many different people try out our team's game. Witnessing their enjoyment and engagement affirmed the success of our endeavor to create a captivating two-player experience.

This was also a project in which I felt I learned a lot from my teammates. As the Project Director, I was able to take a broad-level involvement in Street Typer to shape how our video game progressed, and in doing so I observed ways in which my team's resident designer & programmer, and artist collaborated to bring our vision to life.
Street Typer for GCS Showcase!Street Typer at GCS Showcase - we have a winning typing champ!
Errandly
XiFin, Inc.