Xinyi Guo's Portfolio
Character Upgrading System
--- Mobile
I designed this modular character system that can be deployed in most mobile RPG games. Here in this project, I use a music game concept as an example, "character" is represented by musical instruments, and players can upgrade / decompose / manage an instrument's properties.
This is a solo project, I did UX design and Unity implementation.
Background:
In this project, I've designed a Modular Character System uniquely tailored for mobile RPG games, with a creative twist – the 'characters' are represented by musical instruments. This concept blends the enchantment of music with the immersive world of role-playing games.
In this system, each instrument is not just an object but a character with its own set of upgradeable properties, allowing players to experience the progression and evolution typically seen in RPG characters. Players can customize their instruments, enhancing and managing attributes like tone, range, and special abilities, similar to leveling up a traditional RPG character. The system also includes a feature for decomposing instruments, giving players the strategic option to disassemble and reassemble instruments for different attributes or abilities. This concept not only adds a new layer of strategy but also deepens the engagement by allowing players to interact with their instruments/characters in a dynamically evolving game world. The intuitive interface and engaging mechanics of this system make it a groundbreaking addition to the mobile RPG genre, offering a fresh perspective where music and gaming harmoniously intertwine.
The challenge:
Something I need to take into consideration.
1. Clarity and Simplicity: Ensure that the upgrading process is straightforward. Avoid overcomplicating the interface with too many options or complex navigation paths. Use clear labels, icons, and tooltips to guide the player.
2. Progress Indicators: Implement visual indicators to show character progression, such as experience bars, level numbers, or skill trees. This helps players understand how far they've progressed and what's required to reach the next level.
3. Tutorial and Help Systems: Provide a clear and concise tutorial for the upgrading system. Players should be able to understand how to use the system without extensive external guidance.
Research: What needed to be included in the character system:
Before diving into designing the system, I took time to research similar games that have a balanced upgrading system. These are system workflows that I have summarized that can be a good reference for my design system.
Back to design, some signature system design features that a UX designer might receive from a game designer:
1. Instrument Information: Appearance, Brand, Price, Skills, Components
2. Skill Interface: There are two skills (Self-carried, additional skill slot)
3. Skills can be upgraded (consuming components), and there are rewards when upgraded to level 4 and level 7
4. When carrying an active skill, the skill slot cannot be selected for another active skill
5. Components (Headstock, Bridge, Strings, Pickup, Finish) have four levels of rarity
6. Components affect attributes (Accuracy, Tone, Quality, Appearance), where only Finish affects appearance, while other components affect the first three attributes.
7. Component upgrading requires stacking with the same component
8. Components can be decomposed and exchanged for parts
9. Assembly of components allows for optional preset schemes (requires player configuration)
To combine game screens into a workflow:
Here are some essential game screens that I should include in my design:
1. Instrument Details Screen (Displaying Appearance, Brand, Price, Skills)
2. Skill Upgrading Screen
3. Skill Slot Selection Screen
4. Instrument Detail Screen (Displaying Components)
5. Preset Modification and Assembly Screen
6. Component Assembling Screen
7. Component Upgrading Screen
8. Component Decomposition Screen
Research: UI design:
Considering mobile game constraints, here are some things I need to consider before planning UI components.
1. Display of character: The main area should be about displaying and interacting with the character.
2. Clickable areas: should be around the edges considering how players hold phones horizontally.
3. clear storytelling: to introduce the upgrade system, start from the easy feature to the hard one.
Wireframe Specification:
UI Implementation in Unity:
By utilizing Unity's prefab system, I ensured the modularity and reusability of the UI elements, allowing for efficient iteration and maintenance throughout the development process. This approach also enables the seamless integration of future updates or additions to the instrument detail screen.
By arranging the UI elements into layers and hierarchy, laying out every selection for the buttons and navigation lists, and disabling some of them so that the UI looks neat, I ensured that the developer who is in charge of implementing all functionalities into this screen has clear understanding of the UI hierarchy and easily apply all scripts into the prefab elements.
