Project Realisation & Production (Formative)
Revisit to the previous 'Discord's Date Dash' Project Journal(s):
/ / /
(Last updated in Week 10)
/ / /
Technical Development
After completing the high-fidelity prototype for my project in Figma in the previous phase, I transitioned to Unity to begin the coding and interactive development phase. The decision to switch to Unity was primarily driven by the need to manage complex character dialogues effectively.
For this purpose, I am using the Fungus Framework, which simplifies the creation of branching narratives and dialogue systems. This framework aligns perfectly with my project plan, allowing me to focus more on the narrative and character interactions without getting dragged down by complex coding for dialogue sequences.
# Exporting Assets
I started exporting visual assets from Figma and integrating them into Unity. This includes UI components, character sprites, and other graphical elements in the correct formats and resolutions, ensuring compatibility with Unity.
While the transition to Unity has been smooth overall, there were minor adjustments required, particularly in ensuring compatibility between the assets from Figma and Unity's rendering engine. Some assets needed resizing or reformatting to fit Unity’s UI scaling system.
# Implement Dialogue Sequences
One critical aspect of my project involves creating engaging and visually appealing dialogue sequences. I initially explored the default prefab provided by Fungus for dialogue, which follows a static bottom dialogue design commonly seen in visual novel games. However, this design did not align with my vision; I aimed to implement a speech bubble-style dialogue that appears near the characters and dynamically adjusts to the length of the text.
Fungus dialogue prefab.
The desired dialogue design.
Achieving this required significant experimentation since Fungus doesn’t natively support this type of dialogue design. Additionally, tutorials on customizing Fungus in this way were limited. I faced several challenges, including:
- Positioning the Speech Bubbles: Ensuring the speech bubbles were dynamically anchored near the characters as the dialogue progressed.
- Text Responsiveness: Making the bubble size adapt responsively to longer or shorter dialogue lines without compromising the design.
- Animation and Flow: Ensuring the speech bubbles entered and exited the screen smoothly while maintaining the timing of the dialogue delivery.
To address these issues, I extensively experimented with Fungus’s prefab settings, Unity’s UI tools, and iterated its scripts. I iterated on various approaches, testing different methods for scaling the speech bubbles and anchoring them correctly relative to the characters' positions. I also utilized Unity’s layout components, such as Horizontal Layout Groups and Vertical Layout Groups, to ensure the bubbles resized dynamically based on the length of the dialogue text.
When it comes to chat dialogues, the chat dialogues need to remain visible on the screen to simulate the appearance of a real-time conversation thread. By default, Fungus’s dialogue system is designed to close or fade out previous messages when a new dialogue is displayed, which didn’t suit the persistent nature of chat dialogues.
So, I adjust specific settings between Fungus:
- ‘Close Other Dialog’ Setting: I untoggled this option in the dialogue prefab settings to ensure that all chat dialogues will remain visible when moving on to the next dialogue.
- ‘Fade When Done’ Setting: I also untoggled this option in the Flowchart settings to prevent all dialogues in the flowchart block to fade out once it's finished.
# UI Refinement While Coding
While I'm coding, there are some refinement being made for the UI design.
Refinement 1 :
At first, both the character's and the user's chat dialogues were shown in white text. While this created a clean look, it made it difficult to differentiate between who was speaking, particularly during longer conversations. This lack of clarity could confuse the user and distract them from the immersive experience I aimed for.To address this issue, I experimented with color coding to create a clear visual distinction:
- Character Chat Dialogue: Changed the text color to dark grey, offering a neutral and unobtrusive appearance.
- User Chat Dialogue: Updated the text color to purple, providing a vibrant contrast that stands out from the character dialogue.
Left is previous color used. Right is the new colors used.
These changes not only made it easier to distinguish between user and the characters, but also added subtle personality to the chat interface. The choice of purple for the user dialogue was intentional, as it it part of Discord's color palette and matches the overall aesthetic theme of the project.
Refinement 2:
Another refinement I implemented during the development phase was adding a header for triggered chat dialogues. This feature serves to enhance clarity and guide the user through the flow of conversations.
Since chat dialogues are initiated by the user selecting a topic from a checklist, I wanted to ensure that the user immediately understood the context of the conversation. Without any indicator, it might not be apparent which topic the current chat dialogue was addressing, especially when switching between multiple topics in a session.
To address this, I added a header that appears at the top of the chat interface whenever a new chat dialogue is triggered. This header acts as a clear divider between topics, reinforcing the connection between the user’s action (choosing a topic) and the system’s response (starting the related chat).
# Animated Background (WIP)
In my previous prototype, I used pixel art backgrounds from other artists as placeholders. I planned to create three distinct pixel art backgrounds. However, as I started working on them, I realized that the process was more complex than anticipated due to:
- Perspective Drawing: Crafting backgrounds in perspective required meticulous attention to detail, which added a layer of difficulty.
- Canvas Size: The larger canvas size necessary for the backgrounds made the drawing process more time-consuming and technically demanding.
Given the time constraints and the need to prioritize Unity development, I decided to simplify my approach while still achieving variety by focusing on creating a single background but with three different time settings:
- Morning
- Evening
- Night
This approach allowed me to showcase three visually distinct backgrounds indirectly, as each time setting brings a unique atmosphere and mood to the same scene.
While I have sketched out the general composition and started working on the base background, I have paused detailed work to focus on completing the Unity development first. Once the core functionalities are finalized, I will revisit the pixel art background and finalize its design and animations.
/ / /
Prototype Walkthrough
This prototype walkthrough video showcases the current state of the project and demonstrate how the Discord's Date Dash works.
/ / /
Usability Test
I created a Microsoft Forms to gather feedback during the usability testing phase and managed to involve a total of six participants. Once the data was collected, I tabulated all the the data from the forms and my personal observation of their user test.
Below is my analysis of some that is considered as main pain points from the participants, and my action plan for each of them:
Originally, the plan was to introduce 5 characters per day, allowing players to interact with a wide range of characters in each session. However, users found this pace overwhelming and felt it might be too much things to read due to dialogue heavy.
Taking this feedback into account, I decided to revise the pacing of the game by reducing the number of characters per day. Instead of five, players will now interact with only three characters per day. This change will make the interactions feel more manageable and less overwhelming.
Below are some of the characters that I will be removing from each categories:
/ / /
Annotated Bibliography
Chris' Tutorials. “How to Import a 2D Character Sprite Sheet and Use in a GameObject in Unity (2021).” YouTube, 2022, www.youtube.com/watch?v=FXXc0hTWIMs.
This student learns how to import a 2D character sprite sheet into Unity and use it in a GameObject. The tutorial provides step-by-step instructions on setting up animations for a 2D character. The process includes importing the sprite sheet, slicing it, and creating an animation controller.
Coco Code. “Create a HEALTH BAR, Volume Slider and LOADING BAR! | Unity UI Tutorial.” YouTube, 2022, www.youtube.com/watch?v=tWUyEfD0kV0.
This student learns how to create and implement UI elements such as a health bar, volume slider, and loading bar in Unity. The tutorial covers setting up and scripting the UI components.
Destined To Learn. “Unity Tutorial Auto Scaling Image to Fit the Length of the Text Using Unity UI. NO CODE, Super Easy!” YouTube, 16 May 2021, www.youtube.com/watch?v=W_ST3nsf27Y.
This student learns how to auto-scale an image to fit the length of the text in Unity UI. The tutorial demonstrates an easy method for dynamically adjusting UI elements based on text content.
Dev Tutorials. “5. Parenting and Sorting Order of Unity UI - Build 2048 Puzzle Game in Unity 3D.” YouTube, 19 Feb. 2016, www.youtube.com/watch?v=KmnT5EiDfhY.
This student learns about parenting and sorting order of UI elements in Unity, specifically in the context of building a 2048 puzzle game. The tutorial explains how to manage the hierarchy of UI elements and ensure proper layering.
Unity3D School. “Align UI Elements in Horizontal or Vertical Direction | Layout Group | Unity Game Engine.” YouTube, 19 Dec. 2021, www.youtube.com/watch?v=taG7EkdciDc.
This student learns how to align UI elements in a horizontal or vertical direction using Unity’s layout group. The tutorial focuses on organizing UI components efficiently and ensuring that they scale and align properly within the interface.
Unity3D School. “Create Radio Button Behavior Using Toggle Component in Unity Game Engine.” YouTube, 17 Jan. 2021, www.youtube.com/watch?v=XXeGLwPMmR8.
This student learns how to create radio button behavior using Unity’s Toggle component. The tutorial shows how to set up toggles to function as radio buttons. The video highlights the simplicity and power of Unity's UI components for interactive design.
Comments
Post a Comment