TLDR://
Role: UI Designer
Software Used: Adobe Photoshop, Adobe Illustrator
Duration: 72 hours
Submission for Global Game Jam 2023
About the Game
Root Drive Engineer is a pixel-art exploration game where you are tasked with completing a series of mini-games to repair the engines of a space ship. It was created over a 72-hour period by a team of three for the Global Game Jam 2023.
Check out the game below then stick around to read more about my role in its creation!
My Thoughts on Making Root Drive Engineer
First go at diegetic UIs and pixel art was a great learning experience.
Working, as part of a team is great!
My role in making Root Drive Engineer was as a UI Designer. I was stretched in two new ways for this project. First was creating diegetic user interface, and second was designing UI elements for a game that runs at 320x240 pixels which required pixel perfect precision. This project was also my first experience with working on a game project as a team, which I thought was fantastic! Whenever anyone made something cool we all hyped one another up, and having people to bounce ideas off of lead to a better overall final game.
The Process
The UI elements were made using a combination of Photoshop and Illustrator and designed as part of the process of building high-fidelity screen mockups. Once I finished a screen mockup, it was shared with the team for feedback and then iterated on Once complete, individual UI elements were exported as PNG images to be used by the programmer.
Title Screen
The title screen is designed to look like a ship terminal. The screen layout was fairly simple and its creation has two items of note: the logo design and type optimization (will be discussed in detail in a later section.)
Logo
The concept for the logo was to use circuit board like elements to create a tree.
For round 01 I explored different ways to have the icon and logotype interact together. For variety, I also prepared an option 5 that had a different look. As a team we selected option 2 to refine.
Options 6 and 7 explored two different ways to improve the design to fix trapped negative space in the logo beneath the word "engineer". As a team we selected option 6,
The UI elements were made using a combination of Photoshop and Illustrator and designed as part of the process of building high-fidelity screen mockups. Once I fnished a screen mockup, it was shared with the team for feedback and then iterated ofn. Once complete, individual UI elements were exported as PNG images to be used by the programmer.
Controls Screen
The controls screen continues on the design of the title screen design of looking like a ship terminal. Challenges in creating this screen were from creating a wireframe ship and type optimization.
Wireframe Ship
I started with an image of a spaceship which, using Illustrator, I drew a grid over and then warped to give the appearance of being 3-D.
After sharing with the team, it was decided that the ship should be less long and narrow and instead be more "squished". Bellow is the updated ship.
Type Optimization
From this project, I learned that both Photoshop and Illustrator struggle with precise pixel placement which becomes apparent when designing in low resolutions. For general graphics this is not a major issue, but becomes problematic when rendering text. At worst, the design software would render the text in a way that severely reduces legibility, and at best it would be legible, but still look "off". Below is a screenshot showing this issue.
In the image above, the rectangles making up the letterforms have chunks taken out of them. Letters are incorrectly also rendered to have varying widths.
Above is the type corrected to be rendered as intended. Because of time restraints, I was not able to recreate graphics in an art program better optimized for pixel art and instead rebuilt the type pixel-by-pixel using a brush in Photoshop.
Mini-game Screen
The first version of the mini-game screen used a large range of colors, featured buttons which were made to appear under a glass touch screen, and had chunky bezels for the main display. It also has elements which indicate a health system. Something which had to be cut to reach the 72-hour finish line.
As the vision for the look of the game became more refined, so did the color palette. Version 2 of this screen reflects that. The choice was also made to have the buttons feel more tangible. In the above image, the right button is shown it its active state, appearing pressed-in.
Dialogue Box
The look of the dialogue box was inspired by how it appears in Hyper Light Drifter. A popular pixel art game.
The cracks in the box were updated to be more visible and also moved closer to the edges to be clear of text. Also the bar at the bottom, a timer for how long the notification would be visible was removed.
Credits Screen
Lessons Learned
When working with pixel-scale type in the on future projects, software options other than Photoshop and Illustrator should be used.
I was nervous about doing a game jam and working with people to create a game. Now having done it, I can't wait to work with more amazing and talented people to do it again!