Project B (Rumi’s Bakeshop) — A Casual Web Game Case Study
Case Study written by Mesai Memoria, Game Designer and Artist of Rumi’s Bakeshop
Play the game here: https://volumebutton.itch.io/rumis-bakeshop
Game created by
Jarl Sarmiento aka VolumeButton, Game Developer
Mesai Memoria aka Saico, Game Designer and Artist
Overview
Rumi’s Bakeshop is a casual fast paced web game created for a mini game jam in itch.io, Mini Jam 94 -Baking.
The game jam’s theme is baking. Although it is not required, we still followed the theme. The game jam has one limitation; your game should only have two buttons as controls, that includes everything from the menu until the gameplay.
And we managed to follow the limitation in our game.
Ideation
My partner thought of the idea about creating a game that includes a food truck where you as the player is a cook that serves your customers. When serving, you can walk to the left and to the right to interact with the station, where the left and right buttons are applicable to the game jam’s limitation.
My idea on the other hand is a game that includes a conveyor belt where the baker or the cook stands in front of it and grabs the correct food from the conveyor belt according to the order shown on the order note.
After an hour of discussion, we concluded to create the idea I have presented since it sounds more fast paced and easier to play and understand.
Objectives and Gameplay
After deciding on the idea, we had to specify the controls, the different elements in the game and the overall gameplay.
Story: The baker named Rumi, can grab a cake according to the order that shows up and has the ability to reverse the conveyor belt when needed to grab the correct cake.
With that, the controls include: Enter Key and Spacebar
- Enter Key — Used to grab a cake
- Spacebar — Used to reverse the conveyor belt
When grabbing the correct cake, the player will score a point.
Each order has a time limit, the player must grab the cake within the time. If the time is up and the player didn’t grab the correct cake, the player will lose. Grabbing the wrong cake will also count as a mistake and can be a factor for the game to be over.
Since we had the basic gameplay covered, we moved on to the other elements. According to the basic gameplay we had discussed, these are the elements found in the game:
- Conveyor Belt
- Cakes
- Scoreboard
- Timer
Conveyor Belt Animation
The conveyor belt animation was one of the hardest part in creating the game. We had to make the conveyor belt move to the left, up, then right when going clockwise, and left, down, then right when counter-clockwise.
The horizontal tiles in the conveyor belt were easy to animate, the challenge came when we had to create the animation for the corner tiles of the conveyor belt.
Basically, there are four (4) loops in the conveyor belt, the top set of tiles, the bottom set of tiles, the top corner tile, the center left tile, and the bottom corner tile.
We had to analyze how to make the animations first and from observing how the tiles move in a conveyor belt, we arrived at this analysis.
To animate the corner tiles, we thought of the idea to mask a rotating circle behind the corner tile. In this way, when all tiles are placed in the conveyor belt, the tiles would move like they are all in sync.
Wireframe
After analyzing the animations, and specifying the elements in the game, we moved on to making the wireframe and lay out the user interface. Having the wireframe and the basic gameplay ready, my partner, who is the developer, started programming.
Prototype
Since we did not have assets yet, shapes with different colors were used to create the prototype.
The game was built in Unity and scripted in C#. The two most eye-catching and important moving objects in the game are the conveyor belt and the cakes. The conveyor belt was animated by keyframes. To produce a seamless transition when reversing the movement of the conveyor belt, I remapped the current animation frame to it’s corresponding opposite value on the reversed animation. The moving cakes on the other hand was animated through code so that the positions of the cake wouldn’t be capped by an animation clip. Put some collider setups here and there, and you’ve got one working conveyor belt. The order system was developed as a controller for most of the gameplay mechanics. Everything passed through it and it was responsible for what happens next and updating UI elements. Everything was wrapped in the end by a very dirty state machine responsible for navigating the menu, the game itself, and the game over screen.
~ Jarl Sarmiento aka VolumeButton, Game Developer
Testing
My partner, the developer, tested out the game first without the assets, to experience if the game is fun or if the gameplay feels repetitive and not enjoyable after playing for more than a minute.
Modifications
While having the discussion with grabbing the wrong cake, we thought that doing this mistake once and losing the game immediately is too much, so we decided to give the player three (3) lives instead. To simply put it, grabbing the wrong cake three (3) times means game over.
After observing my partner playing with the prototype he made, I thought it was repetitive and needs a little bit of a challenge.
So, I suggested to add a special level where an order will be randomly cancelled and the player should not grab that cake. Grabbing a cake while the order is labeled cancelled means game over.
With that, we expanded the gameplay and added difficulty to the game.
The game elements now include:
- Conveyor Belt
- Cakes
- Scoreboard
- Timer
- Lives (3 Lives)
- Cancelled Order Label
Art
We chose a 2d-art style with a magical theme. Our main character, Rumi, a slime, is a magical creature that can control the conveyor belt with his slime magic and serve the cake to the customers by teleporting it. Having a magical creature as our main character should automatically mean that the environment should be magical as well.
The character is inspired from the anime, That Time I Reincarnated as a Slime, where the main character is a blue slime named Rimuru Tempest.
The cakes are downloaded from an asset library. The cake illustrations are created by an artist ilhamtaro in Envato Elements. The art for the cakes were supposed to be created originally, but we couldn’t fit it in the timeframe. The illustrations were modified to fit the art style of the game.
Sound Effects and Music
We chose SFX and Music that sounded magical to fit the theme. The SFX and music are not originally made but are also taken from an asset library. Here are the creators and the links of the assets, downloaded from Envato Elements.
- Button Magic SFX
By GameChestAudio - Magic Ding SFX
By GameChestAudio - Wrong Answer SFX
By GameChestAudio - Magical BGM
By Korolkov - Game Over Trombone
By sonic-boom
Mockups
Game Screens:
- Main Menu — In this screen, a Play and Exit button are added. A How To Play section is also needed to give the player an idea on what to do. The controls with icons are also necessary to let the player know visually what buttons to press.
- In Game Screen
- Game Over Screen — Considering that there are three factors where you can lose; grabbing the wrong cake three (3 ) times, grabbing a cancelled order and running out of time to grab the correct cake, I had to make three game over screens that indicated how you lost that game session.
Since the limitations of the game jam requires two buttons only as controls, and we have decided on the Enter Key and the Space Bar, we also used this as controls to navigate the menu. This navigation is a single-buttoned adaptation of console menu navigation systems.
- Space Bar — To navigate the different options in the menu.
- Enter Key — To select an option in the menu.
Final Development
The assets are then placed in the program. The initial program was modified to follow the direction of the conveyor belt in the art. Since in the prototype, the game was made with the camera angle on top, now with the assets, the camera angle changed.
Final Testing
Final testing was done within Unity to ensure that the game is playable and has little to no bugs. The game is then prepared for launch.
Launch
The game is deployed in itch.io as a WebGL application ran on HTML5. You can run the game easily in the website itself.
Run the game here: https://volumebutton.itch.io/rumis-bakeshop
Final Notes
We hope our process can inspire you in creating your next game. You may leave a comment on our itch.io page about our game. Your feedback will be highly appreciated!
