2023 July Challenge
In 72 hours, how do I
design a playable game?
Setting Sail 🔱
Journey on Isla's Tale
UX/UI, Mockups, Assets
Implement Assets in Unity
Collab in 5-person team
Challenges
Design playable platform game
Finish within 72 hours
Learn Unity Engine
Isla's Development
Play Isla's Tale
Battle against giant shrimp as Isla the mermaid in this 2D shooting platformer!
The Approach
Ideate
Scoped MVP
Set goals around playability
Designed platformer
Design
Mood board for inspiration
Focus on cute and dark aesthetics
Conclude
Results,
and learnings
Discussion
on next steps
1. Ideation
Prioritizing Players & Features
i. Player Stories: Wants & Why
Reviewed user stories with my team to highlight key features players expect in platforming scroller game.
ii. Prioritizing Core Needs
Labeled each feature's importance & achievability in the 72-hour time limit by color-coding as high, mid, or low.
Focus on Base Functionality
I decided with my team that we would not have time for some features given its lack of necessity and amount of effort required and could be cut. The features listed below are the main four that we focused on.
Main Menu
Access title screen and options whenever
Accurate Movement
Control Isla with simplicity and ease while focusing on combat against enemies and dodging obstacles
Navigation and HUD
Visual set up for players to track Isla's health and status
Pausing
Stop game to access additional options
Making Waves:
Isla's Title Screen & Logo
Based on a mini-style guide, I made mockups for the game's title screen.
Eurie (our game's main artist) and I synced up and agreed that the playable mermaid would use pastel colors and have a cuter aesthetic.
We also agreed that the game's environments and enemies should have a darker tone to create a striking contrast of colors.
First Mockup
Included menu & logo before Isla would be the screen's centerpiece
Smaller Font
Experimented with tinier font to show more of the background art
Bigger Font
Likewise with bigger font and different gradients
Final Title Screen Design
I settled with a size that was well-centered and impactful. I added transparency for a more menacing feel. Lastly, I included a moving font effect to simulate the dynamic flow of water.
Like other games, I made health bars for the HUD.
My goal was to design a non-digetic UI due to easier implementation and familiarity to players.
After designing 6 assets in Photoshop, I placed them in Unity to test their looks.
Final Title Screen Design
Our game's artist and I decided to also add a visual indicator to have
Isla's character portrait change based on her current health (healthy, moderately hurt, and severely hurt).
Healthy
100% Health
Moderately Hurt
50% Health
Severely Hurt
30% Health
An Enchanting Tutorial
And Victory!
I asked our artist to draw a Mermaid win pose for the screen and placed it center.
Lastly, I reused the game title’s font, colors, and motion for the victory text and added buttons to the bottom.
Sunken: Game Over Screen
I initially designed this screen's mood to be dark and dramatic, but I was not satisfied with the bubble motif and tone.
I experimented with the background's color gradient again in Photoshop and found a gradient that matched the grim sentiment.
The new gradient's deep dark blue into a pitch black descent captures how any player would feel: loss. Lastly, I added subtle tiny rays of light to imply a continuous ocean's descent.
3/ Conclusion:
Finishing Isla's Tale 🏁
Out of this entire process, what did I learn? Well…
🤓 Using Unity as a Designer
Isla's Tale allowed me to learn Unity by learning how to implement UI and how to work in tandem with other design tools such as Figma, Photoshop, GitHub, etc.
🤝 Designing a game in a team setting
I had to collaborate with our engineers and artist on technical game details and iterate my designs based on feedback. As a result, I improved my soft and technical skills!
💣 Adapting to Setbacks
There were difficulties that I had to navigate with the team as we tried our hardest to make the 72-hour deadline. We struggled initially to create assets within Unity that matched the resolution of different screen sizes. We also had to cut back on several features and considerations involving player accessibility.
Given more time, further play testing, story-telling, and accessibility options would enhance our game's playability.
Fortunately, the team met the objective of creating a fun, playable 2D platformer within the time constraint.
Thank you for reading, and please check out Isla's Tale!
Battle against giant shrimp as Isla the mermaid in this 2D shooting platformer!