Summary
Watch your Step is a 2D Slide puzzle game, created with Unity. Find your way through the cave system. Collect the gems, and break all the tiles to get the highest score. Watch Your Step, and don't fall in! For this project, I am responsible for the In-game Main theme Song, all game and UI scripting, and project management.
The Pitch
Game pitch slides
I had pitched this game with a loose idea of what I had wanted it to be. I wanted to keep an open mind about different mechanics, and I wanted to give the art half of our team free reign over the look of the project.
When developing this game idea, I was under the impression that it was supposed to be a mobile project. Unfortunately, due to the Covid-19 pandemic, the project was changed to be a PC/ Web game. Originally the gameplay was centered around the idea that the user swipes or tap on their phone in order to play the game. With that in mind, there were a few main attributes I wanted my game to have. First, it had to have Fast gameplay, that could be picked up and set down during someone's downtime. Next, It had to be a game with multiple puzzle solutions, but only one correct solution. Finally, I wanted the game to be something I would want to play.
There are many examples of slide puzzles being done in other larger games, most times as mini-games. I drew inspiration from dungeon puzzles in the legend of Zelda, and mini-games like Thin ice from club penguin. Next, I searched on the Google play store, to see if I could find other mobile puzzle games similar to what I wanted to create, but at the time I couldn't find anything quite like what I wanted.
The Goal of the game is to break every destructible tile you can in order to get the highest score on the level, but if you do not break every tile you can still win if you solve the slide puzzle by getting your character to the level exit. The idea was to create level re-playability by allowing players to challenge themselves to get a perfect score. While also allowing more casual players a way to complete the game in a more leisurely way.
Movement is controlled by using the W, A, S, and D keys on the keyboard to dictate the direction of character movement. After Movement is initiated, the character slides as far as they can in that one direction before stopping when they get to a wall. As the character slides, all of the tiles they pass over will break and the player can no longer move over those parts of the level again. The only exceptions being special tiles that may be un-breakable, or require multiple hits to break. These specialty tiles would allow us to make more interesting, and complex levels as the difficulty increases.
Pre-Production
Early concepts & Project 0rganization
As the person who pitched the project. I was responsible for managing production, assigning tasks for all team members every week, holding my team accountable, and documenting progress. I like to use Trello boards to organize tasks and progress. I also set up a shared Google Drive folder that all members had access to so that we could freely share files and assets. My team would meet virtually twice a week for at least one hour to work together, ask questions, discuss new ideas, and critique our work. Outside of our meetings we had created a private discord for the project so we could reach each other. We would post updates, share concept images, link Pinterest boards, and have an open dialogue throughout the project. Having multiple outlets for communication was very important as we started this project at the beginning of the COVID-19 pandemic lockdown began. It was a rough transitional period, but with the right organization, we were able to work with our new conditions and successfully complete the project.
Before diving into the game engine, we had to come up with a few level designs, and a concept for what we wanted the game to look like. We started off by using grids to create the different level maps. When making any kind of maze or puzzle that requires the player to get from point A to point B I find it best to start at the end of the puzzle and solve it backward.
I split our team up into two factions, I lead the Game design team, and I assigned our most experienced artist with leading the art team. While two of us were working on level block-outs and discussing mechanics. The other half of our team was working on developing a theme for the art, as well as character design. Throughout the project, I met with my lead artist regularly to discuss progress, assign them tasks to distribute, and critique work. We also had regular Discord meetings with the group as a whole to discuss major changes, individual progress, and update our Trello board.
Production
Examples of the game's progression over time.
Movement
When building out the game, I first used colored square tiles to represent the map and a red square representing the player. In this first phase, I focused on laying down the groundwork for the game mechanics and environmental behavior. One of the biggest challenges I had faced was getting the character's movement to work. There were a few goals I had to achieve to get them to feel how I wanted them to.
I wanted the player only to move when their character has come to a complete stop. To start, I implemented basic directional movements mapped to the proper keys on the keyboard. But the player was able to move freely around the map. I made two adjustments to the game. I added a collision event that would stop the player in place once they hit a wall. Then I made a condition that the player cannot move unless they are at a full stop. There were a few bugs and issues in this first version with the player's collisions and getting stuck on invisible walls. These bugs caused us to be tweaking player movement consistently in these first few versions of the game until we had controls we were happy with.
Player Movement C# code lines 74-102
// This vector is used to tell weather or not the player is in motion // between updates.
Vector3 Distance;
// Set the distance by subtracting the previous position coordinates
// from the player's current position.
Distance = this.transform.position - thisLastKnownPosition;
// This prints distance to the console for debugging purposes.
print(Distance);
// If the player is not dead because of a flame trap.
if (!flameDeath)
{
// Check and see if the player is currently in motion or if they
// have stopped.
if (Distance.y <= .5 && Distance.y >= -.5 && Distance.x <= .5
&& Distance.x >= -.5)
{
// If they have stopped, they can choose a new direction based
// on their keyboard input.
if (Input.GetKeyDown(KeyCode.W)
|| Input.GetKeyDown(KeyCode.UpArrow))
{
// The player wants to move up.
thisLastDirection = thisUP;
transform.localEulerAngles = thisUPRotation;
}
else
if (Input.GetKeyDown(KeyCode.S)
|| Input.GetKeyDown(KeyCode.DownArrow))
{
// The player wants to move down.
thisLastDirection = thisDown;
transform.localEulerAngles = thisDownRotation;
}
...Destructible Tiles
After working out how the player moves around and adding a simple destruction script to the breakable tiles. I had set up a working example of how the basic game mechanics were supposed to function.
In the fourth iteration of the game, we replaced the colored squares with some temporary art created by our small art team. This helped to improve the look of the game. The new art was to the proper scale the final art. I made some tile prefabs and began working on the different behaviors of the tiles. I started by making a class script for the destructible tiles. After that, I made behaviors for sticky tiles and multiple hit tiles. I wanted to make the tiles as modularly as possible so changes and additions to the game could be made easily for my team to implement. We were also able to re-use the destruction script for the gems that we had spread across each level. I started building out all of our levels and created the framework for level progression and User interface. Such as creating a score counter, level loading scripts, and level destruction scripts.
The sticky tile behavior proved to be difficult to get right on the first try. It was easy enough to stop the player when they hit a sticky tile. Once they stopped, however, the character wouldn't align on the grid. To solve this problem, I adjusted the sticky tile to snap the player in the center of the tile, facing the same direction they were in previous to being stuck. This kept the player on the grid while maintaining the function of the sticky tile
To take a deeper look into the code for this project you can use this link to check out my GitHub repository for Watch Your Step
Sticky tile C# code lines 48-62
// Sticky tile collision event.
private void OnTriggerExit2D(Collider2D collision)
{
// Set the collision to aOtherObject.
GameObject aOtherObject = collision.gameObject;
//Find the player's movement script.
PlayerMovement aPlayerMovement;
aPlayerMovement = aOtherObject.GetComponent<PlayerMovement>();
// If aPlayerMovement is not empty then snap player position,
// Otherwise do nothing.
if(aPlayerMovement != null)
{
//Snap the player's position to the center of the sticky tile.
Vector3 aDirection = aPlayerMovement.thisLastDirection;
aMovement.thisDirection = aDirection;
// Reduce the tile's hit count.
thisStepCount--;
...
}UI/UX Design
In the late stages of the production, I built the UX/ UI of the game and refined the score-count. I also swapped out all of our previous art assets for our final art. Because I had set up the tile-prefabs, all I had to do was open the prefab and replace the sprites. Everything in all of the levels updated itself. Our team member in charge of Visual effects had added fire torch traps that added a timing element to the gameplay. They also added in our final version of the character, the character animations,
sparkle effect to the gems, and an animated background.
After receiving some feedback from our professor and other users about the game art, I decided to join forces with the art team to create variations in the tile types. I then added a function to my tile script that would randomize the sprite displayed in each level at spawn. It also randomized the sprite's rotation. This way, if the player has to re-play the level. It will have a slightly different look every time it's played. It also maintained a visual interest in our environment.
The UX/UI of the game was one of the most in-depth I have ever made. I started by drawing some mock-ups with notes about how I wanted it to look. Then I gathered some fonts and examples into a file and sent it over to the art team. It has about four different menus and button connections to program and setup. I also needed to make sure that the player met conditions to advance. I was lucky to receive the art before I finished scripting out the interactions. It allowed me to create the interface with all of the final assets.
UX/UI design notes and screenshots.
Audio
The very last task I had, was to create a sound sheet for the game. As well as implement some sound. We did not have the time to add the majority of the sounds to this list, but I composed an original song for the project. I used the Garage band app on my iPad to create our main theme song. I made a script that determined what to destroy when advancing to the next level and what should stay. This way, the music was constantly able to loop itself without any pauses, hiccups, or bugs in the audio.
Audio list for Watch Your Step
Player Feedback
From the second half of this project through to the end. I was posting our prototypes for our classmates to play and review. This feedback gave us a chance to improve the game and find issues that needed to be solved. We had found a lot of bugs in our game from the user testing phases that helped us get the best final project we possibly could. I would ask players to give feedback on specific problems I was working on to gain insight that would help me fix it.
By the end of the project we were able to implement almost all of our player's suggestions and fix all of the bugs they had ran into while playing the early versions of our game.
One of our first feedback forms with comments.
Postmortem
One challenge for me as the lead scripter and game designer was how to perfect the character's movements. When creating the controls, we iterated the mechanic multiple times to handle the different tiles the player will encounter. Over time we had some weird bugs, including the player flying across the screen, refusing to collide with things, the player getting stuck on invisible objects, and many more. The Movement of the character got the most TLC in this game. Specifically, during testing, we had some seriously funny playthroughs.
We faced many challenges going into this project at the beginning of the COVID-19 pandemic. It was my first time leading a team remotely, and there were many struggles with communication, organization, and motivation for my team throughout. I am very proud of my team for pulling through and creating something we can be proud of in such unprecedented times. Watch Your Step was both challenging and rewarding for me in many ways, even though it looks different than we had initially imagined. It still turned out to be an engaging and fun game to play.
If you have not played the game yet, you can play it for free on Itch.io with this link.
Watch Your Step FAQ