Street Typer is a two-player typing game where players combine word attacks and word defenses to defeat their opponent.
- Timeline
- 3 months, Spring 2023
- Areas
- Creative Direction, UI/UX & Prototyping, Game Development, Visual Identity, Animation
- Team
- Grace Li, Ruifen Jin, Ziyu Li
- Tools
- Unity, GitHub, Figma, Procreate, Clip Studio Art, iMovie, Discord
- CREATIVE
- STRATEGY
- UI
Project Overview
My team crafted Street Typer as part of an 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 combines fast-paced keyboard gameplay with the opportunity to learn and practice typing skills. 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 Product Lead 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
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.
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. Problem
Addressing visual design and gameplay challenges to create an engaging and educational multiplayer experience.
I joined the Street Typer team after the game had its first iteration, during which a working prototype was created. From there, we had more iterating to do in order to clarify our scope and player experience, and elevate the prototype to a playable game.
I will go over three of our main hurdles and how we approached them.
How do we create an engaging multiplayer experience that fosters typing skill?
- 1
Refining the Game Mechanics
There were flaws in the original gameplay, so we needed to restructure how players strategically interacted with the keyboard and each other.
- 2
Designing the User Experience
We lacked a consistent creative direction, so we focused on building a backstory for our battleground: an ASCII, arcade-like world.
- 3
Finding the Right Audience
We wanted to ensure our video game could reach real players, so I established our online presence through branding & promotional materials.
Original Concept Board
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.
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-ASCII converter (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.
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
💥 Sharing game successes.
Photos from the yearly Game Creation Society Showcase, where my team presented Street Typer. 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 Product Lead, 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.
