This week we want to take you behind the scenes of Rec Room’s bakery and give you some back story on how we made the cakes!
Cake has been a long-requested food item so we were excited to bring out a variety of them for our players to enjoy! Last month, we added chocolate and red velvet cakes for the first taste test. However, some cakes are just incomplete without candles. That is why we just added two brand new ones - the celebration cake and the 87 flavor cake, both with candles that can be blown out with your microphone. They are great to share with friends to celebrate special occasions together.
The recipe
Preparing ingredients
Most food items start with the visuals. In this case, an artist spent several torturous days staring at close-ups of cakes to make our Rec Room cakes look pretty and delicious inside and out. We picked three popular flavors that can be found in real life, and made one that has more Rec Room character to it: the 87 flavor cake, brought to you from Coach’s secret recipe book.
The content creation for a food item involves a whole lot of steps. First, we try to plan the cake design so that it’s as flexible as possible - sprinkles, for example, can be added or removed in a texture, while icing puffs need to be modeled in. Then we usually start by making one slice and building a whole cake out of it, so that we end up with a “whole cake” mesh that looks identical to eight “cake slice” meshes when they’re tucked together. Then we go back and build versions of the slice that have had bites taken out of them. Then there’s the cake stand and cloche, the candles, particle effects for the flames, smoke, and confetti, and textures for everything. Making the food look delicious really comes down mostly to the texture.
Baking the first batch
After all visual elements have been prepared, they are ready to be added to the game. Since this process is pretty standardized, it went smoothly. Though we did have one funny moment. Since cake slices are the thickest food item we have ever made, when applying the eating animation for screen players, it looks like the avatar is stuffing their entire face into the cake to consume it! Perhaps the cakes are too yummy, or it is a sign that we need to explore Rec Room mukbanging.
Thankfully, our system allows us to make adjustments to animations easily.
With some final tweaks and adjustments, we were able to push the first two cakes to the store!
Adding some flare
Cakes are often used for celebrations such as birthdays or anniversaries. Those special occasions wouldn’t feel the same if we can’t go through the process of letting the protagonist of the day make a wish and blow out candles. We have gone through several design iterations before making it a delightful interaction.
Initial design
The first big design question that came up during the planning stage was: how do we make sure players with a muted mic, or no mic at all, are still able to blow out the candles?
At this stage, we were more focused on breaking down technical tasks to complete and we vaguely agreed that candles would extinguish after a set time. If the microphone can be used, players can blow out the candles by getting close enough to the cake, and make enough sound in the microphone.
First iteration: What about the song?
After the initial technical set up, it suddenly dawned on us that a set timer could be tricky in a lot of situations. Most relevantly, people would usually sing the birthday song before blowing out the candles. If we set the timer to be too short, the candles risk extinguishing before the song ends. If we set it too long, players who don’t have their microphones set up would need to wait a long time before enjoying the cake slices. In addition, the initial design would blow out all candles once it picks up sound that passes a certain volume. Though it can only be activated when an avatar is within an invisible collision zone, there is a high chance that the candle flames extinguish accidentally during the song. That would be a frustrating moment and we definitely want to avoid that.
With that, we concluded that we need to change the timer system. Additionally, a second design question was introduced: how do we make sure that the players know when they are able to blow out candles to minimize situations where candles are blown out accidentally?
We went on different tangents on methods to solve the challenges. Some proposed adding a mechanism to wave out the candles, others proposed to add a button near the cake.
One of Rec Room’s values is “when in doubt, build it”. If a photo tells a thousand words, a prototype tells a billion words! Promptly, we decided to try this following design before jumping too deep into the rabbit hole:
We wanted to add a visual feedback to indicate that players are within the invisible trigger zone and are able to blow out candles. We would make the candles vertically “sink” into the cake so that it looks like they are melting. We hoped that this would make the players feel more in control and avoid unexpected behaviors.
The timer is changed in a way that only counts when you are within the invisible trigger zone. The timer also mapped to the height of the candles, so that when they are completely “melted”, the flames extinguish.
Add a notification prompt when the candles are half-melted stating “Blow into your mic to blow out candles” for a clearer instruction for first-time users.
Second iteration: Let’s add more delight
After playing with the prototype, we all agreed that this wouldn’t be the final version, but there were some good learnings and numerous pain points we can iterate upon:
Though the candle melting was an interesting visual feedback, it added a sense of urgency and stress along with the notification instruction. Adding a timed element went against the delightful mood that we were aiming for.
Blowing out candles through the microphone was cool, but after seeing the flames extinguish it felt a bit anticlimactic. We needed to juice up the animation and special effects to make it a really celebratory moment.
This prototype brought out our third design question: how do we make sure that the experience is delightful?
Our final outcome should be able to solve all three of the design problems we encountered. And here are the solutions we came up with to address each of them:
How do we make sure players with a muted mic, or no mic at all, are still able to blow out the candles?
Since the timer feature went against this goal, we needed to reconsider the fallback method for players without access to microphones. We drew inspiration from how players normally interact with objects within Rec Room: hover one of their hands in front of an object, see the green outlines light up, then grab to hold the object on their hands. To translate that to our usage: the player would hover their hands in front of the cake, see the green outlines light up, then grab in the air to interact and extinguish the candles (the cake won’t move). After testing, this felt like a natural fallback method to rely on since some objects like dorm doors behave in a similar fashion.
How do we make sure that the players know when they are able to blow out candles to minimize situations where candles are blown out accidentally?
The solution can be broken up into two parts:
In order to avoid blowing out all the candles accidentally, we decided to translate the timer mechanics to the blowing feature. A player would need to blow into the microphone for a fixed amount of time before all flames are extinguished. To illustrate, accidentally reaching the microphone threshold for 0.5 second would only extinguish 2 to 3 candles. This leaves some buffer time for people to react and make sure that is what they intended to do. This also applies to the fallback method where you need to grab 2 to 3 times before all flames are extinguished.
We chose to give feedback that players are within the invisible trigger zone by combining visuals and sound. Whenever a player is present within the zone, the candle flames grow bigger and flicker. A sound effect is also activated whenever someone enters it.
How do we make sure that the experience is delightful?
To add more delight, we decided to add a confetti effect with cheering sounds around the person who blows out the candles to make the moment extra special.
The other portion of enhanced delight is achieved visually: we made the candles bigger, animated the flames at different stages, and added different sound effects to make it feel more immersive.
With the final design implemented, we were delighted by the experience and decided that it was ready to be shared with the players.
Putting on the shelves
There you go! After ironing out the last technical and design issues, we were able to add all of the cakes to our stores. We hope that they can help celebratory events hosted in Rec Room feel extra-special!
What’s next
We are working on automating some aspects of the technical set up process for food items. To illustrate, after all assets are ready, it takes about one day of manual labor to create the different components, structure them correctly, assign meshes and materials, set up the correct LODs, hook up the scripts, tweak the pickup points and animations, add the sound effects, and so on. We are building a simple tool where artists can drag and drop the core elements of the food item and it would take care of all of the setup work. It also contains options to add some level of customization to the interaction. Ideally, after the automation, the food item should be ready to be added after only a few adjustments unless it needs special interactions like the candles. By cutting off repetitive steps, it should decrease the time spent on setting up by at least 50%. We hope that the new system will enable artists and engineers to create more fun and delicious items more efficiently in the future.