Game Overview:

Phase 4 is a rotating point-capture 4v4 multiplayer designed after the 4 phases of matter: Solid, Liquid, Gas, and Plasma. There are 4 playable characters that players can choose from. The game features a map with 4 different sections, each designed with its hazards. Players need to capture the objective to earn points while holding off the enemy team.

Role: Game Designer, Level Designer, and UI Artist

Engine: Unity 3D

Platform: Windows/PC

Team size: 22

Tools used: Unity, Blender, Photoshop, Figma, Trello

Link to itch.io page

Mustard - One of the playable characters designed after Gas

My contributions to the team:

Helped ideate game modes and game mechanics, as well as skills and abilities for the playable characters
Worked on designing the map with another team member, where we each worked on 2 "quadrants' that reflect the phases of matter
Worked with the art team to design UI elements for the character selection and in-game UI interfaces
Organized assets and updated the art team about the status of models in the game and any issues
Created shaders and particle effects for the map such as lava, toxic puddles, rushing rivers, and capture point effects
Designed assets for our final pitch presentations

Process

Concepting

We started with the idea of using 4 elements: water, earth, air, and fire. After some thought, we decided it would be best to try to branch out from that genre and instead use the phases of matter! From there we decided on the game mode, while also keeping in mind the scope of our project. After talking with the programming team we decided that a point rotation would be best.

Map Design

After the game's basic structure was established, my main focus shifted to map design. I worked on the Gas and Liquid Sections of the map. For the concept process, I designed

Gas section:

Map hazards such as toxic geysers, poison puddles, and a gas wall surrounding the perimeter.

Liquid Sections:

A constant water stream that players can fall in and edges around the perimeter.

Final Iteration of the map layout

Map Blockout for prototyping

I created a lockout of both the gas and liquid parts of the map
I highlighted hazards, hard points, and pickups
I first started blackouts using Unity Pro Builder for rapid prototyping
Then, we moved the map designer into Blender, as it was easier to edit and change

Final Map Evolution

Using the art assets provided by the art team, we polished the 4 map quadrants. To enhance the features of the map, I created shaders and particle effects using Unity's system once we were happy with the asset placements. I created:

A running river shader that I borrowed for waterfalls
A poison puddle shader that we were able to edit for the lava
Gas particle effects on the gas wall
"Capture point" particle effects
A fog effect below the map

I also used Blender to create all the path textures for the map! It was done by UV mapping the sections of the map and using Photoshop to draw the roads.

Detailed Map View

Character Select UI Design

I used Figma to design UI assets, here are the first drafts of the character selects. After some testing and feedback, I learned that the text was too small on the screens and there was too much information being displayed on the screen at once. I had a great time challenging myself with designing UI and especially enjoyed the iconography aspect of it all!

GIF of character select functionality

Wireframing

First, I hopped into Miro and created a wireframe of the UI we needed for the game. Here it maps out our

Main Menu
Credits
Lore Pages
Play
and Tutorial

I then hopped into Figma and started laying out screens using grey boxes, quickly creating concepts I could expand upon.

Wireframes and Planning

Prototype in Figma

Final Decisions

I decided it would be best to give each character their own page, where players will navigate based on the tabs at the top of the screen. I provided a starting screen that displays the information on what the players should do.

Each character page includes:

Stylized gradient, Ready/Joined player trackers, tabs to switch between characters, background, decorations, and animated abiity descriptions

The screen will also tell you what team you are on (red or blue), show the number of players ready, the join code, and the ability to start the game once ready!

In-Game UI Designs

Unfortunately, not everything could be implemented in the final game, such as a kill feed, a team status list, and a scoreboard.

I spent some time researching games such as COD, Splatoon, and Battlefield, to study how they designed their point capture UI. The difference was, that since our game was almost top-down, it was a bit harder to place the UI around.
I received a lot of good feedback such as adding cardinal directions on the Minimap to make the player arrows look darker.

I also designed tooltips to replace the tutorial since our scope could not accommodate a full tutorial
Lastly, I designed a pause menu and settings submenu.

Lessons Learned:

Overall, I think we all learned that making a multiplayer in such as short amount of time is difficult. However, for only a little less than 4 months, I think our progress was incredible. I learned so much about designing playable characters, playtesting, designing levels, creating UI assets, making shaders and particle effects, and much much more! It was also an incredible time to work on my communication skills and get out of my comfort zone to quickly learn how to solve problems. Creating games takes a lot of task management and clear communication so that everyone shares the same vision.

Copy of Phase 4 Final Presentation - Marist Spring 2024