Reworking PUNCH-OUT!! for Mobile: An Extremely Deep Dive into Election Year Knockout

Oct. 27, 2020
protect

The games in the long-dormant Punch-Out!! series are a rare thing to behold. In spite of their lasting appeal and swarms of die-hard fans, they represent a style of game that is rarely tackled by other developers. When we decided to make one ourselves, we quickly found out why.

These games are known for their complex character-driven fights with dozens of hidden tricks that players are still finding to this day. They have a history of being developed for underpowered hardware and have to rely on advanced visual and animation techniques to punch above their weight - literally and figuratively. They are extremely high-scope projects to take on. This may be the reason so few games of their kind are attempted.

The effort required to do it correctly is hard to justify for what amounts to a single player, deterministic arcade experience in our modern world of multiplayer physics sandboxes and endless emergent gameplay. It's what Punch-Out!! does with its mechanics and charm that makes it so special and, in spite of its nature, infinitely replayable.

It has been our goal for the last two years to breathe new life into this beloved franchise and bring it to a new audience on mobile devices. We are extremely proud (and surprised, honestly) of how well we were able to take a six-button game and shove it onto a phone with literally zero compromises.

I present to you: Election Year Knockout. Let me show you how we did it.

The analysis of what came before us

Credit: Najzere, StrategyWiki
Image credit: Najzere, StrategyWiki

Before we begin, it's useful to do an analysis of our source inspiration, including the original gameplay we plan to retarget. If you're already an expert on all things Punch-Out!!, you can skip to the next section.

The core gameplay loop in Punch-Out!! is a timed battle in multiple segments where your goal is to reduce your opponent's health to zero using a limited set of boxing moves. Behind the scenes and hidden from the player is some likelihood that your opponent will get back up upon being knocked down. Likewise, the player can get back up when knocked down as well. Fighters are lined up in a progression sorted loosely by difficulty, with a rematch each after you beat them all. The difficulty of each character is not always dependent on things like health or punching power. Punch-Out!! is what we call a "puzzlebox fighter," where each new opponent is as much of a riddle to poke at and explore as he is a test of your reflexes and skill as a boxer. This is an important distinction, as other games in this style do not feel "like punch out" when this puzzlebox aspect is missing.

The player and the opponent are both stuck in the middle of the screen, where all of the action takes place. This static arcade setup works very well on mobile, perhaps better than other boxing games that allow free movement, as it frees up the screen's entire real estate for player input.

Despite the complexity of each opponent you face, the original game's controls are very simple. Across the various versions of Punch-Out!!, there are left and right body blows that can also be thrown high by holding forward. You can block incoming punches. You can dodge left or right, or duck downward. There's a dedicated button for throwing a knockout blow when you have the resources to do so. Arcade Punch-Out!! and Super Punch-Out!! on the SNES go a step further and assign different speed and damage to each type of punch. This is all of what you, the player, have access to for the entire game.

There's assuredly much more to these games in the minutia, but we now have enough of an analysis to make a translation to touch screens.

Getting things to work on a touch screen

Your phone is a very limited gaming device by its nature. It's a black rectangle with a screen you can touch, and it has an array of other sensors to detect motion, impacts, and sound. While some great stuff has come out using those other sensors, I personally don't like motion control in games and we can't rely on every phone having high quality sensors - if they have them at all. Instead of looking at the limitations of mobile gaming and working around them, we decided to look at what phones do well and lean into those strengths.

First and foremost, we had to make punching feel good. If we couldn't, none of the rest of this would be worth it. In terms of puzzle design, Punch-Out!! rarely distinguishes between different punches, and that's probably due to the control scheme they use. The differences in punch types are a bit abstract on a controller and therefore less reliable to build puzzles around.

On the phone, it's different. Tapping the screen is a very literal action, much more so than pressing a button on a controller six feet away from what's happening on screen. That doesn't mean adding virtual controller buttons to the screen works any better, though. Virtual buttons provide no tactile feedback, requiring the player to visually calibrate his finger location constantly. To avoid this problem, mobile games often simplify their controls to use a single touch anywhere on the screen.

It turns out if you divide the screen into quadrants, it works just as well as face buttons on a controller while still providing that literal interpretation of the player's intent. Tap the top right quadrant for a right jab. Tap the bottom left quadrant for a left hook. We knew we were on to something good when we got this crucial part implemented. It felt perfect, and we didn't have to reduce any of the complexity that makes these games so much fun to play. More importantly, we avoid discrete virtual buttons entirely. The player can express specific input intents this way without ever having to worry exactly where his finger lands.

This quadrant input system also allowed us to differentiate ourselves from the games that inspired us. It has never been our goal to make Punch-Out!! directly, but instead go our own direction given an established formula. Designing our puzzlebox fights around properly using left, right, high and low punches leans into what makes a touchscreen fun to use while opening up new possibilities for level design.

The other thing touch screens do well is the swipe input, but it can be a challenge to implement correctly. Sometimes, other games try to use swipes as a primary input. However, swipes take energy to perform. Repeated swipes will only make a player tired and frustrated. Thankfully, dodging in Knockout is a rarely-performed action with a long cooldown, so mapping it to left and right swipes makes sense. Even more rare is the powerful star punch. In Knockout, we turned this into a screen-spanning haymaker and mapped it to an upward swipe. We spent a lot of time perfecting the technical details of the swiping motions in our game to the point where they felt invisible to the player. I'll go into more detail about that below.

Finally, blocking. Because blocking logically prevents you from punching, we can overload the basic tap input. In our game, the player character will block if you hold both thumbs down on each half of the screen at the same time.

So at the end of it all, we had an input system that preserved every aspect of Punch-Out!!'s core gameplay, one that remained intuitive while avoiding virtual buttons of any kind. Best of all, we were able to do our own unique designs as a result of the control change. It truly is a full, unrestricted console gameplay experience on a touch screen device.

Specific game design problems and their solutions for mobile

Making a mobile game requires much more than just a transliteration of a console control scheme. Following are multiple smaller design lessons we learned along the way, grouped into the best order I can manage:

Game speed - Mobile gamers are not the same as on PC or console

Mobile players have different expectations for their entertainment compared to PC and console gamers. When we originally designed Knockout more to Punch-Out!!'s blueprint, we learned that the game felt way too slow. On console it feels fine, but for whatever reason the experience just lagged behind when it was on a phone in our hands. You never quite realize how much downtime there is in the Punch-Out!! franchise until it's pointed out to you.

We reacted by ripping out anything that got in the way of the player having fun. We replaced the downtime in the Punch-Out!! formula by expanding its risk/reward system. This fixed the engagement problem we were seeing by always ensuring there was something for the player to do or react to. I'll go into further detail about this in the section about changes to the Punch-Out!! formula.

Our next major change was to the game's round timer. We originally had fewer, longer rounds with seconds ticking by in real time. One of our publisher friends suggested reducing each round to about 45 seconds. We pushed back on this at first, but ultimately saw the wisdom in their suggestion. The newly increased pace of the game felt way better when the breaks happened around the time they suggested, but it still felt too restrictive when the player was on a roll.

As a compromise, we increased the round timer but made the seconds tick faster. This is something Punch-Out!! does as well, and though I suspect it might have originally been some kind of hardware limitation on the NES, they tellingly kept it for the Wii remake of the game. Importantly, the seconds slow down when you're engaged in your attack combo. This adds urgency when you're winning, provides relief when you're losing, and gives you the agency to dictate the flow of the fight yourself.

Of course, a publisher isn't necessarily thinking about such game design considerations when making a suggestion like this. Mobile gamers do prefer shorter bursts of action, it's true, but a publisher's real goal is to show you an ad every minute or so. Certainly, they've spent thousands of hours studying exactly how big of a bite to give players each time to make them feel fulfilled but refreshed enough to play a little bit longer. So long as it feels good as a player, I'm in.

The increased pace drove us to add other ways to rest and relax the player between fights as well. The extra effort put into these sections between the main game scene also allowed us to further distance ourselves from our source of inspiration. For instance, there is a surprising amount of story built into the news reports that happen at the end of each fight. Little bits of world building packed with humor pervade every moment you're not fighting. We've found players naturally seek out these tidbits when they need rest, and it likely prevents churn among the population of gamers that appreciate it.

Or maybe it increases churn in players who hate story in their games. I should test that... Let me know in the comments below what you think.

Changes to the Punch-Out!! formula and going our own way

Part of our work in removing things that got in the way of the fun involved replacing Punch-Out's "knockout blow" and "star punch" systems with our own risk/reward system.

Punch-Out!! has had these two systems throughout its history. The first one, found in the arcade version of the game and later Super Punch-Out!! on the SNES, requires you to fill up a power meter by punching your opponent. Once you fill up the meter, you can throw one of several "knockout blows" to do massive damage to your opponent.

The NES version and its Wii remake use a "star punch" system that encourages the player to explore each character and take risks to earn stars. Stars can be used to throw an uppercut, and (in the remake) multiple stars used at once increase its damage.

Image credit: GameXplainImage credit: GameXplain

Both models are fun, but there are drawbacks to each. The "knockout blow" system is well suited for the arcades. It's simple to understand, and the gameplay loop is fairly quick. However, we thought this would be too straightforward for a modern game of this type. The number of strategies you can attach to it is limited, and the risk is a little too low for the reward you get from it. You do lose some of your power meter when you get hit, though.

The "star punch" system is a clear evolution, but the developers went a little crazy in the punishment department. Earning the stars is very fun and using them is meaningful, but taking a hit destroys stars you've accumulated. This rewards high level play, but is absolutely frustrating to new players and downright rude by modern sensibilities.

After a few iterations, we settled on our own approach. We kept the power meter concept, but limited its utility. Punching still fills the meter, and the meter is still used to throw the haymaker (our version of a star punch). In our model however, using the haymaker also consumes the power meter. The game then becomes a challenge of how to most optimally fill the power meter multiple times per fight. It is a resource management puzzle with multiple ways for the player to solve it.This specifically rewards offensive play by design. As newer players will tend to stick to more defensive play like blocking and dodging, the power meter acts as a carrot on a stick in front of players to lead them to more effective strategies as they learn the game. Instead of blocking or dodging everything, players begin to learn counter punching as a means to preserve and build their power meter for their most powerful attacks. We reinforce this by not draining the power meter when the player gets hit.

We use the power meter to encourage riskier play with defensive strategies as well. Blocking consumes a small amount of the power meter, and will immediately remove the haymaker from play if you've powered it up. Over the course of play, you learn that you can also time blocks perfectly to massively fill the power meter. Combined with counter punches, counter blocks provide a skilled player with resources he can use to dictate each fight like a coordinated dance.

Finally, we replaced the stamina hearts from Punch-Out!! with a stamina meter in Knockout. This has been controversial to some of our more casual players as they tend to want to mash the screen to win, but it serves an important game design function. Besides, if they just chill they find out the stamina comes back pretty quickly when they idle. While this all does discourage mashing, it also encourages mastery of your resources available to you as a player.

Punching too often (and especially missing your attacks) will wind the player and root him in place. You must block an attack to get your stamina back, or otherwise wait out the exhaustion. However, because punching also builds your power meter, you quickly learn that you're trading stamina for a chance at your haymaker with every attack. If you want to risk becoming winded to increase your other resource, you can.

Additionally, we made it so the haymaker instantly refills the stamina bar upon a successful hit. This means the player is even more heavily encouraged to go on the offense - just with a strategy in mind. When you become skilled at this balancing act, you're in a constant cycle of risking your health to trade stamina for power, then wailing on your opponent with the haymaker, which immediately allows you to risk more stamina.

With this new system, we believe we've meaningfully improved upon the systems found in the Punch-Out!! games. Election Year Knockout is faster, more dramatic, and feels oh so much better when you land those perfect combos to play your opponent like a fiddle.

Aspects of the original design we didn't touch

One of our unsuccessful experiments was to take away health from the player upon a successful normal block. This felt awful. I'm happy to report this feature does not exist in the final game.

For the time that it was a thing, it sunk every game design decision it touched. It had a good intention behind it, of course. We wanted to discourage players from standing frozen in fear, holding up a block. Besides, if our goal was to encourage aggressive play, wouldn't it make sense to discourage defensive play?

No. Absolutely not. We discovered that defensive play is an important stepping stone to aggressive play. When you first encounter a new opponent, you're more likely to be patient so you can learn the AI's patterns and how it reacts to you. Without the ability to do this, the game feels very unfair.

Besides, there is already a punishment for defensive play - we just didn't consider it to be one at first. The round timer is constantly ticking. If you don't eventually go on the attack, you move into the next round. Your opponent is able to withstand a fresh set of knockdowns. It's a small thing, but it's important. We don't have to consume player health during the learning phase of each encounter, because the time pressure is already enough to encourage the player to make a move.

Besides, we found there is a better solution to the original problem of having a player constantly block. We give the opponent an unblockable attack. A fair and well-telegraphed unblockable attack forces the player to change strategies, especially when we can ramp up the damage on sa

JikGuard.com, a high-tech security service provider focusing on game protection and anti-cheat, is committed to helping game companies solve the problem of cheats and hacks, and providing deeply integrated encryption protection solutions for games.

Read More>>