Lirica

 
 

About Lirica

DigiPen GAM400 & GAM450 Class

Year: 2019-2020

Team: The Opera Haus

Engine: Unreal engine 4

Role in game: Lead Designer / UX&UI Designer


 

Game Concept

A 3D puzzle adventure game that follows the journey of a young girl as she aims to restore the world of Opera by completing musical puzzles with a magic flute that influences the environment around her.


MY WORK IN THIS PROJECT

Our project “Lirica” is a 3D music puzzle game where the player is a girl name “Renatta” who got drag into “Lirica” the world of opera that is fading away because people stop caring about music, the player will have to solve the puzzle with her magic flute in order to restore the world of Lirica. In this team, I take on the role of lead designer, UX (User experience) designer, and UI (User interface) designer.

 

UX/UI Design

UI Wireframe

https://xd.adobe.com/view/d6f394f6-ff14-45c8-b6fb-91f4855777af/

UI Layout & Animation

With the help of a programmer, we implement UI in Unreal according to the wireframe. I rearrange the UI placement and put in animation scripts using blueprint and Unreal animator.

Capture-6.JPG

HUD

Quest board

A box on the top-right of the screen shows the information on task and progression tracking of the quest. The text color is used to differentiate the main-quest (Yellow) and sub-quest (Blue) to make it easier for players to separate them. The box can also be hidden away when not need.

Lirica   6_22_2021 4_01_23 AM.png

Minimap

A 2D picture that map-down the entire space with a quest icon to help the player find the quest and objective. I redraw the map instead of using a top-down camera to project the space to deduct the unnecessary details making it easier for the player to understand the map. I also design the Minimap frame and put a +/- sign into them to indicate that it could be zoom in and out.

Lirica   2_4_2021 04_04_23.png

Music notes & scroll

Music notes are used to represent the note player is playing on the controller/keyboard. At the same time, the scroll helps the player visualize the C-Major note scale. I color pick eight different colors by using four face-pad colors to represent their button notes and four none face pad color to represent the D-pad button. These color has also been through a usability test on blind color people.

Ingame - Staff.png
Lirica   2_4_2021 04_03_37.png

Quest Icon

Quest Icon is a Space UI place on top of the NPCs to indicate that this character is interactable. Quest icon also appears in the Mini-map to help the player navigate the level. I use music notation as a reference to create [!], and [?] icon for quest icon and quest accepted icon. I also design a button pointer base on the music notation as well.

Dialogue box

For the dialogue box, I have used a transparent dialogue box with two types of font to indicate the speaker and the conversation. I also set up a Text-color style to highlight the critical information within the conversation (Blue text is essential or tutorial information and Red text for warning/danger).

Diegetic UI design

Poco (the helper that follows the player around) changes its color to indicate the current Note of the puzzle object and the note particle effect to indicate the Note that the player is playing (The button that the player press). After the system is done, I’m also color pick the particle and Poco color to match the non-diegetic UI on the color of the notes.

Capture-10.JPG

Tutorial Design

Waypoint placement and encounter design

2019-12-07.png

Setup

Input narrative

I set up the tutorial document according to the tutorial structure and have the narrative designer fill in the dialogue, I then implement dialogue into the CSV file after it has been finalized and proofread by the creative director.

Capture-5.JPG

Quest setup

I have been working closely with the programmer on the adjustment of game mechanics and puzzle sets. I help design the functionality of the puzzle mechanic along with setting them up in both level and CSV files according to instructions from the level designer. I also continue working on the Tutorial setup for the new level and color pick hint object material color (In our game hint object material are set up particular by Tech-artist to make designer able to pick the color of the object without ruining their texture).

Capture-3.JPG
Capture-4.JPG

Management and Documentation

Designer team’s roadmap

As I take a leading position. I start my job by planning the designer roadmaps to set up goals for the team and tracking the progression of the other design team members. Then I create an asset list for feedback requirements (Both sound and Art).

Capture.JPG
Capture-1.JPG
Capture-2.JPG

Game Design Document

I completed the UI/UX part of the game design document and the other general mechanic designs.