Rive Blog

Pocketwatch Games leveled up Monaco 2’s UI with Rive

Fewer people, faster results — how Rive helped a small game studio achieve polished, interactive UI.

by

Valerie Veteto

-

Tuesday, October 1, 2024

At Pocketwatch Games, building polished, interactive UI is essential.

The creators of Monaco: What’s Yours is Mine, Tooth and Tail, and the highly anticipated Monaco 2 won the Independent Games Festival Grand Prize in 2010, cementing their reputation early on as a top indie studio. They’re a small but talented team, so they need tools that save time and resources without sacrificing quality. 

That’s where Rive came in and flipped the script on how they design and implement UI for Monaco 2, a game that promises expanded features, like procedural generation and a 3D engine.

From painful to plug-and-play

Sasha Riddle, an environment and motion graphics artist at Pocketwatch, discovered Rive through the team’s art director, Lee Dotson. “When Lee found Rive, I was like, ‘Finally, this is exactly what I need.’ Vector-based with state machine interactivity — it felt like the perfect combo.”

Before Rive, the process felt messy. Sasha created animations in Adobe Animate, and then engineers rebuilt them in Coherent, software specifically for game UI. It slowed everything down. “It’s not just the animations; it’s waiting for the engineers to make them work,” Sasha says. “With Rive, it was a completely different experience. I could build state machines and see how the UI would work in real time. It’s a one-to-one representation of what you want to create.”

Learning Rive was quick. Sasha dove into our YouTube tutorials, played around with basic elements, and quickly got the hang of state machines — despite never having used them before. “Once I got it, the workflow just clicked,” they explain.


Turning headaches into high scores

For the engineers, Rive simplified things too. CTO Joseph Riedel explains, “We needed polished, dynamic UI. Other solutions were expensive and complicated, while Rive delivered quality without hassle. The API was simple, and integrating it into our custom engine was easy.”

Phil Homan, a Pocketwatch engineer, loved the collaboration Rive enabled between artists and developers. “I could jump into the Rive files and make small tweaks without constant back-and-forth. It also eliminated a lot of boilerplate code. The art looked great, and it’s easy to scale and adapt for different platforms,” Phil explains.

“When I create elements, I walk Phil through how I want it to work,” Sasha adds. “We get on a Zoom call, I share my screen, and show exactly what to do. It’s super clear.”

As Sasha got more comfortable with state machines, they balanced their creative vision with technical simplicity. “There’s a lot of engineering language I understand better now. I’m always thinking about how everything works together and making sure I don’t overcomplicate things.”

Joseph adds, “Normally, you’d need a dedicated artist and engineer just to build UI. That would be their entire job for the whole project. With Rive, fewer people took less time to do a better job. It saved us the salary of a web designer. We saved engineering time, too, which is also money. It’s hard to evaluate, but it was significant enough to scare us. We were looking over the precipice and didn’t know how deep it went.”

He continues, “With Coherent, everything Sasha built would have needed to be a webpage or a composite of multiple webpages. Then the question becomes, “How do you populate everything with data?” You have to set player names, values, sliders, etc. Not only would we have had to build that, but it’s not in our native language; it’s in Javascript. To get the engine’s data into the webpage while running Javascript, you have to hook up boilerplate code that’s bespoke for every screen.”

“It would have caused a lot of friction between the person building the webpage and Phil because there’s no way to validate those paths. Rive simplified all of that.”

Worldbuilding results

One of the trickier UI components in Monaco 2 was the character selection screen, which involved complex states like hover, selection, and dynamic number inputs. “I don’t make super complicated state machines, but there are definitely moments where Rive saved me a ton of time,” Sasha says. The character select interface populates in real-time as players choose characters, with seamless transitions and animations that feel intuitive and responsive.

The same applied to other game elements, like in-game trinkets. “If you try to buy something and don’t have enough money, a different animation state kicks in. Rive made it super easy to set up different scenarios like that,” Sasha says.

Phil appreciated the flexibility Rive brought to the team’s custom game engine. “We scale the HUD layout to fit any aspect ratio, whether on a Switch or a larger screen. I take the .riv files Sasha creates, set the state machine values, and get it running. It was straightforward compared to how convoluted things would’ve been with another tool.”

Beyond time-saving

Rive didn’t just save time — it made the process fun. “UI work can be a grind,” Joseph admits. “But Rive kept us in that creative flow longer, and it shows in the final product.”

Sasha agrees. “Without Rive, I would’ve had to learn web design on top of everything else I do. It freed me up to focus on other things, which is a huge win when you’re on a small team.”

Ultimately, Rive didn’t just streamline the workflow at Pocketwatch — it made it possible for a small team to build high-quality, responsive UI without breaking the bank. “I don’t see why indie developers wouldn’t use it for UI,” Joseph says. “It’s faster, cheaper, and just makes sense.”

With Rive, Pocketwatch Games found the perfect balance between art and engineering, allowing them to deliver polished, interactive interfaces without all the usual friction. Now they can focus on what matters most: making great games.

Start Building Games

Keep an eye out for Monaco 2 and start building games with Rive today. 

Join our newsletter

Get all the latest Rive news delivered to your inbox.