Superweights

Designing a competitive multiplayer boxing game built with Unity

Role  
Game design, Art, UX

TEAM
JAMES PAI, justin pai

TIMEFRAME  
in progress

Tools  
unity, C#, photoshop, illustrator, audacity, FL studio

Superweights is a top-down boxing game inspired by classic fighting games and boxing pop culture.  It uses hand-drawn 2D animations and is developed in Unity.  I am currently developing the game for commercial release as part of a two-person team, co-founding an independent game studio called Pompaduo.  The game features 2-player local multiplayer on the PC, with additional features planned.  The initial version of the game is the result of rapid prototyping, iteration, and playtesting over the course of three months.

My responsibilities on this project include game design, user testing, art direction, and UI design.  I produced all the illustrations and hand-drawn animations for the art assets, as well as branding materials such as posters and business cards.  To inform design decisions, I ran playtests to gather player feedback, which was particularly valuable when designing the round and health systems.


Inspiration

I first conceptualized the game when I was inspired by a birds-eye photograph of Muhammad Ali's knockdown victory over Cleveland Williams.  I wanted to create a competitive multiplayer boxing game played from the same perspective, which was something that was not currently on the market.  I teamed up with my brother to create a prototype and we began brainstorming ideas. 

We took inspiration from a number of sources, but some of our main influences are the Rocky movies, Hajime no Ippo, and retro fighting games such as Street Fighter and Punch-Out.  These were all unrealistic depictions of boxing but were extremely popular due to a dramatized or over-the-top style, which was what we decided to establish for our game.

 


Design

Goal

We wanted the game to be accessible enough for anyone to pick up and play, unlike traditional competitive fighting games which required new players to study, memorize, and practice specific combos in order to stand a chance against an experienced player.  However, we still wanted to design deep gameplay mechanics that would raise the skill ceiling. 

Our design goal was to create a game that was easy to pick up and play while being difficult to master. 

To accomplish our goal, we decided to avoid complicated combos and focus on positioning, mobility, and timing as the primary means of skill.  The 360 degree range of motion is something that is unique to our game that makes the gameplay very different from traditional side-scrolling fighters.  As such, we needed a new control scheme for the player. 

Control scheme

We experimented with a dual joystick configuration with one stick controlling the character's movement and the other controlling the character's heading.  A quick playtest confirmed our suspicions that having to aim the character not only felt clunky but was entirely unnecessary since boxers are almost always facing each other in the ring.  Our solution was to have the characters always rotating to facing each other, which worked very well despite needing some tweaks down the line.

For combat, each player had a left and a right punch, mapped to the left and right bumpers on the controller.  Depending on where the opponent was located, a punch on the corresponding side would be most effective.  This would encourage strategy in positioning as well as attacking.

Once we had a general design document written, we began working in Unity with the goal of having a playable prototype done over a weekend.


Rapid prototyping

We split up the work for our weekend prototype for a more efficient workflow.  My teammate would handle most of the coding while I produced all the art assets needed for our baseline.  I chose to create pixel art in Photoshop for a fast yet comical art style. 

Inspired by minimalistic interfaces, I decided to create an avatar system that showed the current status of the character as he got more injured.   I drew 6 different expressions that displayed the various stages of a character's "health" without needing an explicit health bar. 

I also drew a basic set of the character sprites for each of the character states (hurt, idle, left punch, right punch, KO) and recorded acapella sound effects using a USB microphone.

After we had our basic prototype completed, we experimented with several mechanics such as blocking and set out to playtest the game with groups of friends for evaluation.


Playtesting

For our playtests, we set up the game on a laptop connected to a TV with two Xbox 360 controllers hooked up.  Each playtest had approximately 6 participants and yielded overwhelmingly positive impressions, but also revealed several issues that needed to be addressed.  We iterated on the issues we found and continued to playtest our prototypes
.

Some major issues

  • side-specific attacks (i.e. right and left punches) were an interesting mechanic but was often disorienting when the player was in certain orientations
  • the gameplay was too sluggish and did not reflect the face-paced dynamic of real boxing
  • the two attacks felt very limiting in the absence of combos or following up an attack
  • players did not have enough mobility to take advantage of

Our solutions

  • eliminate side-specific attacks and change attacks to use face buttons (ABXY) instead of shoulder buttons
  • add a dash move to reward positioning and increase player movement speed
  • revamped combat system to allow for combos and follow-ups
  • remove blocking to focus gameplay on mobility

Iteration

Our playtests resulted in many key insights that helped shape the direction of our game in addition to features we had already planned.  Further iterations on our prototype included a significant combat system overhaul that allowed for deeper mechanics such as chaining attacks, frame-based hitboxes, input-based combos, and attack canceling.  These additions and their dependence on animation frames also called for a monumental increase in art assets. 
 

Animation

I used Phototoshop's built-in animation system to illustrate dozens of frame-by-frame animations by hand.  These were rough prototype animations used to design the timing of the attacks and set up appropriate hitboxes and hurtboxes.  One of my greatest challenges in this task was figuring out how to bring the animations to life with a minimal amount of frames per animation.  I researched traditional animation examples such as classic Disney films and studied basic animation principles such as squashing and stretching.  I often found myself physically imitating the character's moves in person in order to gain a better understanding of the exact motions I needed to draw.
 

Interface

Another addition as a result of iterating and playtesting included health bars on the interface, which participants were initially divided on but unanimously preferred once they played a version that included health bars.  Participants felt that they had a better understanding of a character's exact status due to the precise nature of health bars (compared to the avatar system) which sometimes made fights more intense. 
 

Controls

Because one of our design objectives was to allow players to be able to pick up the game and play it without needing to study a set of moves or a map of controls, we needed a way to teach players the controls which had become more complicated than the initial prototype.  I realized I could utilize the empty space on the surface of the boxing ring in order to display the controls so that players could reference the mat without needing to pause the game or rely on memorization.


Refinement

After further playtesting and polishing the core gameplay mechanics, we decided that the state of the game had reached a point that captured our design objectives and solved most of the issues we found in our playtests.  The next step was to give it a visual overhaul and and refine the rest of the game, including the round system and menu screens.
 

Visuals

I created a new art style for the characters and moved away from our early pixel art.  To reflect our over-the-top gameplay, I designed the characters to be equally as ridiculous with gigantic upper bodies and flopping pompadours.  I wanted to give our game a unique sense of character and humor.

I revisited all the prototype placeholder animations and redrew each frame in high resolution with color and shadows.  Having placeholder animations already made things easier this time around because I had all the poses for each frame, but it was shockingly time consuming - the entire art overhaul took a full week of non-stop work.  Regardless, the results are something I am extremely proud of. 

In addition to the animations, I also created an interactive main menu and a character select screen.  As a homage to the Street Fighter II intro, the game starts with a dramatic punch.  For the player select screen, I felt obligated to animate the characters dancing in place.
 

Music

While I have no background in music composition or production, I composed a handful of music tracks for the game using FL Studio and a USB MIDI keyboard.  I was inspired by old-school video game music from the SNES era as well as the iconic soundtrack from the Rocky movies.  These tracks were used for the main theme and character select screen.


Branding

We brainstormed over 20 different names for our game, originally settling on the name "Dirty Boxers" as a humorous pun, but the toilet humor seemed like it was a bit too much and not everyone got the pun.  We ended up changing it to Superweights to reflect the physical design of our characters as well as the over-the-top gameplay.
 

Poster

I created a poster as promotional material for Superweights.  This was drawn and colored in Photoshop.  I first created several thumbnail drafts of potential layouts, then settled on one that felt more like a movie poster.  I drew out the details using a blue brush then went over them with the final lines before coloring it and applying image effects.  Finally, I made a 27"x36" print to display at our upcoming showcase events.

 

 

Rough storyboard sketch

Business cards

Since we would be networking at developer events and showcases, I used Illustrator to design a logo for our studio and created business cards with Superweights branding.  I created several variations of the business cards and used and submitted them to Moo.com for printing.  For the text on our business cards, I designed a custom typeface that matches the hand-drawn visuals of our game.  I downloaded a script template from MyScriptFont.com, drew each letter with a Wacom tablet in Photoshop, then converted it into a font format. 


Results

Seattle indies Expo 2015

We submitted Superweights to Seattle Indies for judging, and it was one of 25 games chosen from worldwide submissions to attend and showcase at Seattle Indies Expo 2015.  This was an all-day public event during PAX Prime where industry, press, developers, and the general public could play some great independent games.  While the even was extremely exhausting, we had an absolute blast letting people play Superweights and were thrilled at the enthusiastically positive comments we received.  We also made quite a few valuable contacts during the event.

Next steps

The amazing response we got at our first showcase reaffirmed our belief that we were heading in the right direction with Superweights.  Now that the core gameplay and art style is finalized, we are continuing development by adding more content to the game in the form of additional levels, game modes, and characters.  This will require further investment as well as user research in order to prepare Superweights for commercial release.