Street Typer

Timeline
Areas
Team
Tools
3 months
Spring 2023
Creative Direction, UI/UX & Prototyping, Game Development, Visual Identity, 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 combine word attacks and word 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 led the creative direction for our game. My work included polishing the game's visual identity as well as marketing STREET TYPER to real players.

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 game interfaces.
I. Overview
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.
II. Background

Addressing visual design and gameplay challenges to create an engaging and education multiplayer experience.

III. Context

Introducing the problems and progress of the original game concept, alongside various media and video game inspirations.

1. Refining the Game Mechanics

The original video game concept was a "hacking game" imagined in the computer terminal setting, a two-player typing competition that was based solely on typing speed. Players could type anything they wanted to in their respective input boxes.

The biggest problem with this game experience was that players could exploit each typing match against their opponent by mashing keyboard buttons to win. We noticed this was happening a lot during our preliminary player tests.

We wanted to create an experience that was more strategic and exciting, but also different from current typing games whose win condition relies completely on typing speed.

IV. Discovery

Deciding our main game mechanic, a shared word bank that fosters competitive playfulness and creativity among the two players.

After brainstorming ways to translate the original game format, we settled on a "shared word bank" mechanic, where players must select specific words to type. This mechanic would be the main focus of the screen, and allowed for deliberate competition against the opponent when coming up with different word combinations.

Interface iterations

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.

V. Visual Direction

Learning from visual styles of past gaming eras to hone in on our game's creative expression and art direction.

2. 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 mindless key-smashing) by honing in on the visual language of the game.

The distinctive style of many arcade, battle, and console games in the ‘80s and ‘90s emerged as a creative response to the technological limitations of their time. We purposefully used tools to create those styles, exploring 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, using those nostalgic styles.

VI. Motion & Animation

Building out the character development of the two players through lore as well as unique motion and animation styles.

Character Studies and Lore

At first, our two characters had no personality or differentiation. We needed to build out the character development of the two players through unique motion and animation styles.

To flesh out the characters, we looked towards our own childhood memories playing games, exploring the idea of them being childhood friends who played fighting games together.

In the end, we still wanted a way to visualize our characters with ASCII-style art, and continued to go through various unsuccessful iterations to convey the characters better.

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

We were able to convey our character illustrations as ASCII-style 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.

VII. Marketing

Animation and marketing artifacts that formed Street Typer’s digital presence and translated to sales on gaming platforms.

Lastly, we prepared for showcase, and I took on the responsibility of managing our game presence online. I developed a variety of media to define our branding and ensure our game was accessible to anyone interested in playing it. This included logo work, posters, cover art, key art, merchandise, and other deliverables.
Reflections
Street Typer poster.
💥 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.