Skip to main content
HB
Hiram BarskyProduct Designer + AI
All work

Case Study

Ring-Rival

I wanted to know if a browser could feel like a console boxing game. Finding out took a lot of deleting.

  • AI-Assisted Product
  • Mobile Web
  • Game Design
  • Solo Build
Role
Lead UX Designer & Developer
Mid-fight: gloves, a blocking opponent, trash talk and the super meter. Gameplay as the opening frame, because the cinematic that used to sit here promised a game that didn't exist.

01

What I'm Working On Right Now

The star punch. You bank stars by landing counters, and the meter above the gloves is what you spend them from. Getting the meter, the wind-up and the hit to agree with each other is the hard part. If the star burns a frame before the punch connects, the reward stops feeling earned and starts feeling scripted.

This is a phone capture of the current build, title screen through to a knockdown against Tor Volkov. It is the newest thing on this page and it is not finished.

Star punch landing on Tor Volkov, straight into the count. Recorded on a phone at the size it is actually played, because that is the only screen the timing has to feel right on.

02

Every Boxing Game I've Liked Was on a Console

Every boxing game I've liked was on a console, and there's a reason for that. The punch has to land the instant your thumb moves. The animation has to read as a body hitting another body. The opponent has to feel like it's thinking. You get none of that for free in a browser.

I wanted to see if I could get it anyway. No install, no app store, just a link you open on your phone.

03

Building a Fighter Out of Parts

A fighter isn't a drawing. It's a body, two arms, two legs and a head, all separate, because they all have to move on their own. So I built the rig before I built anyone to put in it.

Glass Joe went through it first, and you can see every seam. Flat block for a torso. Each arm one wedge from shoulder to glove, no elbow in it. Legs meeting the hip at a hard edge, one flat colour per limb. Then I ran Von Kaiser through the same rig at heavier proportions, and that was the real test. If the rig held for a second fighter, I could add fighters as data instead of drawing each one by hand.

It held. It also still looked like paper. A flat wedge swinging at a flat block just looks like two shapes overlapping, not like contact. So I went back in and split each arm into a shoulder, a bicep and a forearm, gave the legs a knee and a calf, and shaded the torso so a turn reads as a turn. Make the parts fast, throw out whatever doesn't read, rebuild the layer underneath.

Glass Joe, first one through the rig. One flat colour per limb, no elbow, no shading anywhere.
Von Kaiser. Same rig, heavier build. This is the one that told me the rig would hold.

04

The Part AI Couldn't Do

My first go at making a punch land used impact particles, and it was the wrong call. The burst was so big it buried the fighter at the exact moment you needed to see him get hit.

After that I stopped guessing. How long the game freezes on contact. How hard the screen shakes. A 60ms buzz in your hand when you connect. How fast the health bar drains. Where the punch button sits, how big the block zone is. I tuned every one of those by hand, on a real phone, over and over, until it felt right.

There is no model you can ask whether a punch feels like a punch. AI gave me raw material at three to six builds a day. Deciding what to keep was mine.

05

One Sheet Per Fighter

Because the rig is shared, I don't draw a fighter anymore. I generate their sheet. Ready, jab, cross, hook, uppercut, special, wind-up, block, hurt. Same nine poses, same joints, every time.

Eight of those the fight code can count on. The ninth belongs to the fighter. Glass Joe's is the Glass Jaw. Von Kaiser's is the Kaiser Barrage. That one slot is what stops a roster feeling like the same guy in different colours.

It also means adding an opponent isn't an art project. It's the rig at their proportions and a sheet off the back of it.

Glass Joe. Lean, nervous, and his special is the Glass Jaw, which is exactly as bad for him as it sounds.
Von Kaiser. Same nine slots, and the Kaiser Barrage sitting where Glass Joe keeps his glass jaw.

06

What I Deleted

It used to take 22 seconds to throw your first punch. Now it takes 6. I didn't optimise anything to get there. I deleted the splash screen, the mode select, the fighter select and the tutorial. What's left of the tutorial is one card, and you make it go away with a tap.

Audio was failing in about 40% of sessions and I had no idea, because nothing ever errored. Browsers block sound until you interact with the page, and the game was starting its audio on load. Moving that behind the first tap took it under 2%.

I also built webcam hand-tracking. It worked, and it was genuinely impressive. It was also completely wrong for someone playing on their phone on a couch, so I cut it.

07

The Design System

Every colour comes in a pair: the state at rest, and the same state ten percent lighter on impact. Colour and brightness change together because that reads faster than either on its own.

Four colours, each with its own glow, because a punch has to register in the frame it lands.

08

Every Opponent Has Their Own Rhythm

Same rig Glass Joe came out of, but the wedges are arms now. Klaus Brenner is heavier and slower to reset, so you have to read him differently than the others.

Every opponent has their own special, their own trash talk and their own rhythm instead of being a reskin. And getting knocked down stopped being a countdown you sit and watch. It became something you can fight your way out of.

Klaus Brenner. Bigger, heavier, and on a rhythm you have to learn separately.
The thinking behind itThe Work Is Deleting, Not GeneratingAI made producing screens almost free. That moved the bottleneck from making things to deciding which ones to throw away — and no model will do…Read the post

Want something like this built?

I design and ship products end to end. Tell me what you're working on, or grab a time and we'll talk it through.