Level Design Challenges

Designers faced a lot of level design challenges on The Wind and the Wisp! There are four levels in the game. The intro (chrysanthemum), petunia, forget-me-not and lily of the valley, with the player returning to the garden hub in between each level. 

The petunia should make players feel angry, and the level is annoying, constantly pushing the Wisp away from its goal. After picking up the petunia, the Wisp and player have the ability to destroy obstacles in their path and can finally move forward. The forget-me-not level begins with the petunia, breaking objects and clearing the way, until players break a tree that was the house of a little bird. The bird runs away in fear, and players put down their anger, put down the petunia, and get the forget-me-not, which allows them to fix broken objects. The Wisp and Wind repair the little bird's home before returning to the garden.

The Garden 

Design challenges: Level layout, architecture.

The garden is the main hub that the Wisp will be bringing flowers back to. The garden houses the doors to the other levels and after each level, the Wisp will return, replant a new flower, and repair the garden a little more. Repairing the garden will open up the path to the next door.

Designing the garden came with an incredible number of challenges. As the main hub the player will be returning to it needed to have a clear path to follow and be beautiful and very visually polished. 

Our hero screenshot also exposed some issues with our path leading into the garden. We spent a lot of time debating how the Wisp would actually enter the garden. Would it be a flat path up to the statue in the center? Would there be a walkway structure that the Wisp would have to go up some stairs, through then back down some stairs to the center? Would it be something different alltogether? 

The camera angle also exposed some issues with roofs and tall objects. We couldn't have objects that are too close to the front of the garden (front being looking in from the camera and deeper into the level) because the camera could potentially clip through it. 

The garden was originally meant to be shaped like a human heart (the artery) to convey that the garden is the Wind's heart (therefore the Wisp lives on in their friend's heart). The art team loved and was very dedicated to this idea, but it created a lot of level design and engineering issues. The level was too big, and the tunnels were creating camera clipping issues. 

Chrysanthemum Mountain 

Design challenges: Onboarding, art direction. 

Chrysanthemum mountain is the first level in the game, and underwent the most changes.

This level showed a lot of iteration, taking at least one aspect from every iteration towards the final version. 

Iteration 1 - August, 2024.

Original level design and flow:

• The Wisp is wandering around an open area, completely indepdent of player control. The player blows at the Wisp and gets their attention, before gaining WASD control of the Wisp. 

• Enter breeze to rise up onto the mountain. 

• Blow away fog and phantom pillars to reveal ruins. 

• Press 'E' to enter a breeze that takes the Wisp away from their goal, the door. The Wisp will fall down and autopath back up to the breeze. The player, at this point, is meant to blow against the breeze to reverse its direction and rise to the top of the cliff.

• (The video below does not show it) At the top of the cliff, go through the door and enter the garden. 

Challenges with this design: 

• Riding the wind stream at the start was confusing. Narratively, players didn't understand what it was or why it was there. They also could not distinguish between the global wind (the wind that appears when the player blows) vs. the wind in the world (the wind stream).

• Blowing against the breeze was not intuitive. Players did not understand it. 

• Players didn't realize the pillars are phantoms and blowable. 

• Clearing fog didn't feel like it had a gameplay function, it was merely revealing more of the map, not a puzzle with a meaningful outcome to progresss the game.  

• Autopathing was a challening mechanic to communicate, and players thought it was a cutscene, not a part of interactive gameplay. 

Good parts of this design:

• Wisp pathing around is interesting and engages narrative curiosity.

• Level structure and moving upwards. 

• Players liked clearing fog walls. 

Iteration 2 - September, 2024.

Iteration 2 is recognizable as the final intro level! 

Original level design and flow:

• The Wisp is wandering around an open area, completely indepdent of player control. The player blows at the Wisp and gets their attention, before gaining WASD control of the Wisp. 

• Enter breeze, halfway up hit a fog wall. Blow the fog wall away to reveal a winding path up a mountain. 

• Walk up the mountain path. 

• Blow away a second fog wall to reveal a wind breeze. Ride it up to an upper cliff and find a door that cannot be opened. 

• On a hill above/behind the door, there is a chrysanthemum flower. Pick it up and use it to unlock the door. Proceed to the garden. 

Challenges with this design: 

• Riding the wind stream at the start was confusing. Narratively, players didn't understand what it was or why it was there. They also could not distinguish between the global wind (the wind that appears when the player blows) vs. the wind in the world (the wind stream).

• The chrysanthemum didn't feel special to pick up. It felt just like a key.

• Level felt boring. 

• Overall, the level did not utilize the blow mechanic enough in engaging ways. 

Good parts of this design:

• Very clear and simple map design. Players are not getting lost and the path is interesting. 

• Lock and key problem-solution ordering. Finding the door first, but not being able to go through without the chrysanthemum, was interesting flow and made the chrysanthemum feel a little important. 

Iteration 3 - November, 2024. 

Original level design and flow:

• The Wisp is wandering around an open area, completely indepdent of player control. The player blows at the Wisp and gets their attention, before gaining WASD control of the Wisp. 

• Enter breeze, halfway up hit a fog wall. Blow the fog wall away to reveal a winding path up a mountain. 

• Walk up the mountain path. At the top, blow away fog to reveal ruins that also have some unclearable dark fog. 

• Blow away a second fog wall to reveal a wind breeze. Ride it up to an upper cliff and find a door that cannot be opened. 

• On a hill above/behind the door, there is a chrysanthemum flower. Pick it up, and learn that the chrysanthemum can clear fog automatically when the chrysanthemum is in range). Players must breathe in sync with the chrysanthemum to activate the mechanic. 

Challenges with this design: 

• Still the same confusion about the wind streams. They were confusing. Narratively, players didn't understand what it was or why it was there. They also could not distinguish between the global wind (the wind that appears when the player blows) vs. the wind in the world (the wind stream).

• The chrysanthemum breathing interaction was unclear (see Prototyping Gameplay for more details about testing various breathing mechanics). Players also reported feeling disappointed once they discovered the system wasn't actually listening for their breathing, it was just trying to get them to breathe the correct pattern. 

• Overall, the level did not utilize the blow mechanic enough in engaging ways. 

Good parts of this design:

• Giving the chrysanthemum a mechanic made it feel more important and interesting. 

Iteration 4 - November, 2024. 

This iteration is where the level starts to look very close to the final version. 

Changes from last iteration: 

• Added Wisp sad animation to communicate more emotion. 

• Turned wind stream that the player blows the Wisp into to a dandelion that the Wisp gets blown away with. 

• Removed fog wall mid air that the player has to blow away. 

• Added dark fog to the ruins that the Wisp also can clear. 

• Dark fog is blocking a path up a hill that the Wisp cannot go up, so the Wisp uses the dandelion to fly up and find the chrysanthemum. 

• After picking up the chrysanthemum, learn that "while holding the chrysanthemum you can dispel dark fog". Fog clears automatically when the Wisp approaches and is holding the chrysanthemum. 

Iteration 5

Changes from last iteration: 

• Added Wisp sad animation. 

• Fog doesn't clear automatically. Holding the chrysanthemum gives the player the ability to blow it away. 

• Go back into the ruins to clear the dark fog, and reveal a hidden object that gives some narrative. 

Iteration 6 - Final Iteration

Changes from last iteration: 

• Removed the ruins between the fog walls. The level was too long compared to other levels. 

Why the Final Design Works

• Clearing the fog wall now reveals the door (not ruins) making the door more important and level shorter. 

• The sad Wisp is more emotionally engaging! The Wisp acknowledging the player also introduces the idea that the player might be a force outside of the Wisp. 

Petunia Desert 

Design challenges: Camera angles, communicating gameplay and mechanics.  

The petunia desert is the second level in the game, and the design goal was to make players feel frustrated and angry so that when they pick up the petunia, they feel powerful being able to break down what used to be obstacles. 

The most difficult parts of building the petunia level were the top-down camera angle, and communicating the petunia mechanic during gameplay.

The camera was creating problems because occasionally, it would clip outside of the maze walls resulting in two problems. Either players would lose sight of the Wisp, or the wall would go invisible (part of how Cinemachine's rendering works). 

Iteration 1

Original level design and flow:

• Wisp enters the desert at the ground level but falling rocks crash through the ground and the Wisp falls into an underground maze.

• The Wisp navigates through a dark maze following candles. The candles are lit but periodically being put out by the petunia, which is deep in the maze generating wind. 

• After picking up the petunia, the Wisp and player can punch their way out of the maze.

• There is a geyser that's dried up, so the Wisp and player have to break rocks blocking the water flow to ride the geyser back up to the ground level, and find the door to return to the garden.

Challenges with this design: 

• Wisp crashing through the ground and top down camera in the maze created a lot of camera issues and clipping. 

• Geyser ending didn't feel dramatic and big enough. Art wanted to show the water returning to the desert, as the geyser floods the level, but there were too many technical art difficulties that this got scrapped. 

Iteration 2

• Wisp falls down into the maze in a small intro sequence upon entering the level. 

• The Wisp navigates through the maze but is periodically being pushed back by the petunia, which is deep in the maze generating wind. 

• After picking up the petunia, the Wisp and player can punch their way out of the maze.

• There is a big cliff and the door back to the garden is at the top. The Wisp and wind can knock down pillars and rocks to create a path to ascend to the door. 

Challenges with this design: 

• The maze shape was a bit random (no waypoints, players got lost), and it was hard to see where the petunia wind was coming from and why.

• Ending and breaking rocks/pillars to ascend to the door was confusing. Players were blowing and seeing the dandelion disappear, but not sure what the outcome of doing so was. 

Iteration 3 - Final Iteration 

• Wisp starts in the maze and it is an open area (not underground).

• The Wisp navigates through the maze but is periodically being pushed back by the petunia, which is deep in the maze generating wind. The maze is much more linear and the Wisp only ever needs to move in NSEW directions (no diagonal movement) and Wind only ever pushes directly against the Wisp. 

• After picking up the petunia, the Wisp and player can punch their way out of the maze.

Why the Final Design Works

• Linearity of the movement made it easier for players to understand what the obstacle was. It also made it easier to tune to make players frustrated. 

• A clever art solution: to resolve the camera clipping, we made the walls shorter than the camera and added padding to the inside of the path. So from the side view, all the walls look more triangular rather than box-like. 

Forget-Me-Not Forest

Design challenges: Puzzle design, blockmesh readability, emotional arc.

Forget-me-not forest is the third level in the game. Players enter the level with the petunia and can continue breaking things, feeling powerful, until they accidentally break a bird's home. They need to put the petunia down, put down their anger, and pick up the forget-me-not. The level ends with players being able to fix the bird's home again. 

The most difficult part of the forget-me-not level was the narrative arc and puzzle design. 

Iteration 1

Original level design and flow:

• Enter the level holding the petunia flower, and get lost in a tiny forest, breaking objects. 

• Accidentally break a tree that a little bird is living in. The bird falls out, gets hurt and is scared of the Wisp. The player will feel bad for hurting the bird and chase after it. 

• Find a broken bridge that the Wisp cannot cross. 

• Put down the petunia and pick up the forget-me-not, which has the power to rewind broken objects. Rewind the bridge so that it's whole again and the Wisp can cross.

• Find Lil Buddy again and he's trying to reach fruit that's on a tree. The Wisp cannot continue because there is a gate blocking the way and two windmills can activate it. The Wisp can only activate one. Repair a broken ladder so he can climb it. He eats the fruit and helps you spin the second windmill to raise the gate. 

• Find a cable car puzzle that the Wisp needs to ride on to cross. Repair a broken bridge on the other side for Lil Buddy to catch up. 

• Wisp has to activate the dandelions in the correct order to create a breeze to carry the Wisp upwards. Lil Buddy will assist with the dandelion order. 

Challenges with this design: 

• Tiny forest. Playtesters felt it was too easy and they didn't feel intentionally lost. They just felt like they were walking around.

• Level is too long. Most playtesters did not finish the level. 

• Puzzle readability. Playtesters did not understand the interactions, and this level needed a lot of art assets to be readable. 

• Narrative was extremely unclear. Players did not see Lil Buddy fall out of the tree. 

Iteration 2

Cut the entire forest at the start. Combined the windmill and cable car puzzle, and cut the ladder puzzle. 

Original level design and flow:

• Enter the level and find a petunia flower. Pick it up and break a few objects in the way. 

• Accidentally break a tree that a little bird is living in. The bird falls out, gets hurt and is scared of the Wisp. The player will feel bad for hurting the bird and chase after it. 

• Find a broken bridge that the Wisp cannot cross. 

• Put down the petunia and pick up the forget-me-not, which has the power to rewind broken objects. Rewind the bridge so that it's whole again and the Wisp can cross.

• Cable car (which became a flower basket) puzzle to cross to the other side. Repair a broken bridge to help Lil Buddy cross. 

• Blow on two windmills with Lil Buddy and fly away in a breeze back to the broken tree. 

• Rewind Lil Buddy's broken tree home. 

Why the Final Design Works

• Petunia mechanic still feels novel and players don't get bored before breaking the Lil Buddy's tree home.

• Level is shorter and Lil Buddy's scripted animation moments are clearer and more meaningful.