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.
Play With Your Friends
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.
Create Combos from the Word Bank
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.
Street Typer typing attack gif.
Street Typer defend from attack gif,
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.
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.

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.

Branding and Marketing
Street Typer is available to play on Itch.io here.
Lastly, we prepared for showcase, developing a variey of media to define our branding and ensuring our game was accessible to anyone interested in playing it. This includes logo work, posters, cover art, key art, merchandise, and other deliverables.
Street Typer poster.
Reflections
💥 Sharing game successes

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.


🤹  Collaborating on a passion project

This was also a project in which 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.