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
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.
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.
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.
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.
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.
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.