Gero Pero
My Roles & Responsibilities
UX & Level Designer
- In charge of overall story and level flow.
- Came up with interactive mechanics.
- Implemented level design and metrics.
- Designed menu flows.
- Communicated with artists for desired art direction.
- Implemented art assets and particle effects.
- Mixed audio from Metadigger for BGM and SFX.
Gameplay of Gero Pero
Gero Pero is a 2D side-scrolling action platformer, where the player takes the role of a frog named Gero, who has special froggy abilities that can help him overcome his challenges and save Pero.
Gero is able to jump on walls, slide through low ceilings and swing across obstacles in order to defeat enemies and traverse through the dangerous environment.
CHARACTERS
Heroine frog learning the ways of survival before landing onto an unpleasant incident.
Gero’s father who acts as a mentor while guiding the player through tutorials with short dialogues.
The main villain is a large spider, who has kidnapped the unconscious Pero from Gero.
PERO
GORFERY
GERO
OBJECTIVE
The main objective of the game is to save Gero’s father, named Pero, who has been taken away by a giant spider known as Gorfery, who lives deep within the cavern.
At the start of the game, Gero traverses through the forested level while being taught by the father. As Gero ventures deeper down the forest, he accidentally falls into the cave instead. Gero instantly blacks out and Pero attempts to save his child. However, the pit was too deep for Pero to manoeuvre thus falling along with Gero as well.
At the bottom of the pit, Gero who is semi-conscious notices that his father has been taken away by an unknown entity. Gero eventually wakes up and proceeds to search for his father, unknown of the dangers ahead of him.
GAME MECHANICS
Few key mechanics to help Gero interact with the environment.
Change in cursor sprites to allow players to intuitively understand that it is an interactive object.
INTERACTIVES
OBSTACLES
LEVEL DESIGN
Dynamic Level
Instead of always assuming that the player will go through the intended route, we should always take precautions of every possibility and consider them as routes as well.
To make a dynamic level, I like to branch out possible ways of reaching the end instead of a straight linear path.
Escape Level
After defeating the boss, the cavern starts collapsing. Gero has to escape quickly before it crashes.
By building a full level with simple mechanics that are clear cut, players are able to flow from one to another naturally and do not have to pause to think which results in breaking the flow. Perfect for a chase scene.
I playtest intensively to ensure that the metrics allow fluid movement.
MENU FLOW
Main Menu
-
The main menu was done with a symmetrical layout, emphasising on the game title and start button.
-
The background was done in layers stacked with a vignette along with particle effects and slight animations to give life.
-
After pressing the start game button, the UI elements translate out and we transition to clouds fading out, as the screen translates downward to the game scene.
Pause Menu
The pause menu was designed with the same theme as the main menu.
-
The game pauses as a wooden board drops down and foliage comes in as a background for the interface. This is important as it does not take away the immersion of the game world from the players as they are still able to see the game.
-
UI buttons are aligned on one side, while the pause menu title is on the left, which blends in with the symmetry of the background leaves on both sides.
GAME FLOW
1. TUTORIAL
Gero starts in the forested area and travels down slowly with the guide of Pero.
The player learns the mechanics in a progressive manner, from basic to advanced controls.
Eventually, at the end of the tutorial, Gero falls into a deep hole and Pero immediately jumps in to save him.
3. CAVERN
Gero will have to continue venturing through the cave and exploring the areas to find a way to his father. The level has branching routes that eventually converge. The player may access a shorter but dangerous route or a longer but safer route.
5. BOSS
The boss has a few attack sequences that are easy to learn. Its eyes are contrasted with its body colour, making it more obvious to the players that the eyes are interactive too.
The eyes also represent the current health the spider boss currently has. More information about the boss will be described further in the boss behaviour states.
7. SECRET FOREST
Gero reaches the secret forest level and finds a cocoon. He tries to get rid of the cocoon, which turns out to be Pero who was trapped in it.
They continue on their way out, greeted by the bright and tranquil environment which acts as a reward for the player, symbolising that they are no longer in danger.
2. CUTSCENE
As Gero wakes up, he sees Pero getting taken away by an unknown creature but is too weak to stand. He closes his eyes and loses consciousness again.
Through this cutscene, the player knows that Pero has been taken away and rescuing him becomes the main goal of the game, and traversing through the levels was the unconscious goal.
4. SECRET CAVE
Gero will go through a scenic transition towards the boss level, giving players some breathing space before the boss fight. This scenic level showcases captured frogs in the background to add to the narrative elements.
6. ESCAPE
After the boss dies, the cave will start to crumble and rocks will fall throughout the scene. Gero has to escape the cave while watching out for falling rocks.
This escape sequence will transition into the underground area, symbolising that Gero is closer to ground level.
8. ENDING
Both Gero and Pero managed to find the exit of the cave. However, there appears to be a hailstorm outside.
What further adventures would they have to go through in order to go back home...?
The game ends as the screen fades to black.
EndNote
I worked very closely with my designer teammate on this project. It was also our first time using a custom engine. We managed to pull through the engine limitations with the help of our tech team as well.
Overall, working on Gero Pero was a great learning experience!
Project Details
Team: 2 Designers, 2 Artists, 5 Programmers
Engine: Loss Engine (Custom)
Duration: September 2019 - April 2020