Managing Player Profiles

In my previous blog post, I shared how I implemented the opening logo animation for my sign language learning game "Sign Pals." Today, I'll share how I created a profile management system.

After the opening logo animation, players are directed to the Character Tabs screen where they can create and manage their profiles. This is a crucial feature for an educational game as it allows multiple users to track their individual progress.

What I want to Include

  • A persistent data structure for storing player information (name and avatar)
  • A singleton pattern manager that maintains profile data across scene transitions
  • Two interconnected UI screens:
    1. Character Tabs - For selecting, creating, editing, and deleting profiles
    2. Character Selection - For customizing player avatars and names
  • JSON serialization with Unity's PlayerPrefs for persistent storage between play sessions
  • Visual feedback for selection states and user interactions
  • Sound effects for button interactions to enhance the user experience
  • Validation logic to ensure proper data entry before saving profiles
  • Extensible architecture designed for future learning progress tracking
  • This system allows multiple players to create personalized profiles and supports my future plans to track individual progress as they learn sign language through the game.

    Profile Data Structure

    For the initial version, I'm keeping it simple with just the player's name and their chosen character avatar. 


    I've planned a future enhancement that will add learning progress tracking:


    This future enhancement will track which letters players have completed, their current position in the learning path, and their accumulated score. I've designed the system with this expansion in mind, so adding this functionality will be straightforward.

    Profile Manager

    To manage these profiles throughout the game, I implemented a singleton pattern that persists across scene changes:


    Saving and Loading Profiles

    For persistent storage, I used Unity's PlayerPrefs system with JSON serialization:


    The Character Tabs

    The Character Tabs screen is where users select, create, edit, and delete profiles. Each profile slot shows the character avatar, player name, and management buttons. Empty slots display a "+" button to create a new profile.

    When a player selects their profile, I apply a visual indication by slightly scaling up the selected slot:

    Character Selection

    When creating a new profile or editing an existing one, players are taken to the Character Selection screen. Here they can:

    1. Choose a character avatar
    2. Enter their name
    3. Save their profile

    I implemented a dedicated manager for this screen to handle all the selection interactions:


    The character selection UI shows a preview of the selected character and uses checkmarks to indicate the current selection:

    When the player completes their selection and enters a name, the profile is saved:

    When the player completes their selection and enters a name, the profile is saved:

    I added validation to ensure the player enters a name and selects a character before they can continue:


    Managing Profile

    The Character Tabs screen supports several key operations:

    1. Creating a new profile: When a player clicks the "+" button on an empty slot, they're taken to the Character Selection screen.
    2. Editing an existing profile: Similar to creating a new profile, but with the current values pre-filled.
    3. Deleting a profile: Includes a confirmation dialog to prevent accidental deletions.

    UI: Profile Cards

    Inspiration

    One of my first steps before starting the actual design is finding inspiration on Pinterest. I enjoy exploring the various UI layouts and visual styles there, and I came across two layouts that I think would be a great fit for my UI.

    Character Cards

    I like how each character has their own unique color personality, and I want to highlight that even more. To do this, I placed each character peeking through a “window” on a circular white background, making them clearly visible against an outer gradient background that reflects their individual colors.


    Final UI


    Possible Future Enhancement

    I plan to expand the profile system to include the LearningProgress tracking, which will allow me to:

    • Track which sign language letters each player has mastered
    • Remember where they left off in their learning journey
    • Store scores and achievements to motivate continued practice
    • Adapt difficulty based on individual performance

    Moving Forward

    With the profile system in place, players can now create personalized avatars and I have the foundation to implement progress tracking in future updates. In my next development phase, I'll be implementing the Mode Selection screen, where players can choose between Learning, Practice, or Duel modes.

    Comments

    Popular posts from this blog

    UDP vs TCP

    Initial Research

    Final Approach: Python OpenCV