PHASE 3: Project Realisation & Production

Revisit to the previous 'Discord's Date Dash' Project Journal(s):

> PHASE 3: Project Realisation & Production

/ / /

Technical Issues

Importing Character Sprite

Initially, I tried importing my character animation sprite into Unity, but it didn’t display. After troubleshooting, I found out that:

Sprite Visibility: The sprite was hidden beneath all GameObject layers.

Sort Order Issue: I assumed it was a sorting problem, but adjusting the Sprite Renderer’s sort order didn’t fix it.

Canvas Limitation: All GameObjects were under a single Canvas, preventing proper layer sorting.

To fix this issue, I had to:

Canvas Organization: Break down GameObjects and reorganize them into multiple separate canvases.

Reassign and Optimize: Each GameObject was reassigned to the correct canvas, preventing unwanted overlaps and display issues.

Canvas Mode Adjustment: Change Screen Space - Overlay to Screen Space - Camera so the Canvas no longer rendered above everything by default.

This issue took longer than expected to resolve, but breaking down and restructuring the UI elements significantly improved the layering system and ensured proper rendering of all sprites.

/ / /

Refinement From Usability #1

Discord Chat Window

Based on user feedback, I modified the chat layout by adding a plus (+) button inside the Discord Chat window interface.

Left is old design. Right is new design.

Enhanced Accessibility: The button provides a clear and intuitive way for users to access additional features without disrupting the chat flow.

Improved User Guidance: Users no longer have to guess where to find extra options, making navigation smoother.

Streamlined Interaction: Reduces unnecessary clicks and keeps the interface minimal while maintaining functionality.

This small change significantly improved usability by making interactions more intuitive and efficient.

Email Window

To improve readability, I highlighted important words in the email using a contrasting green from the color palette. Additionally, I incorporated an animation where each highlighted word animates in one by one once the email window is displayed.

Left is old design. Right is new design.

Improved Clarity: The contrast color naturally draws users’ attention to key information, ensuring that important details stand out.

Better Visual Hierarchy: Helps guide users' attention to crucial parts of the email without overwhelming them.

Consistent Design: The green highlight maintains visual cohesion with the overall color palette, ensuring a polished look.

Better User Engagement: The smooth animation keeps users engaged, improving their overall experience by making the information more memorable and easier to process.

This adjustment makes important information more noticeable, reducing the chance of users missing critical details.

Scroller Sensitivity

I adjusted the speed of the slider to be faster by tweaking the scroll sensitivity. After experimenting with different values, I settled on 12 as the optimal setting.

Before and after settings changes.

Improved Efficiency: A faster slider speed allows users to navigate content more quickly, reducing the time spent scrolling.

This adjustment improves the responsiveness of the slider, helping users achieve a smoother and more efficient browsing experience.

Dialog Trigger Speed

I slowed down the speed of the chat dialogues, as the current speed was too fast. Most users had to wait for the dialogues to finish before scrolling up to read the previous messages. To address this, I checked the flowchart block for any relevant commands and found that Fungus provides a Wait command.

Improved Readability: By adding a 1-second delay between each dialogue, users now have more time to read the current message before the next one appears.

Better User Experience: This adjustment prevents users from feeling rushed and ensures they don’t miss important information.

Increased Engagement: Giving users time to process each line enhances their interaction with the narrative, making the experience more immersive.

This change improves the pacing of the dialogues, resulting in a more comfortable and enjoyable experience for users.

/ / /

Refinement From Usability #2

Checklist Window

I added indicators in the checklist window to guide users, making it clear that they need to use the checklist to continue interacting with the character.

Option 1, Option 2 & Option 3.

I considered three different options for the indicator and ultimately decided on the second option, as it better suited the overall aesthetic of the project. The indicator will be animated, gently pointing towards each of the checklist boxes.

Clear Guidance: The animated indicator helps users understand the next required action, reducing confusion and improving navigation.

This changes will help users understand how to move forward in the interaction, improving clarity and overall flow.

Red Flag Notes Window

Similar to the Email window, I highlighted important information in the Red Flag Notes using a green contrast color from the palette. Since users frequently switch between interacting with the character and referencing the notes, this helps streamline the process.

Before and after highlighted.

All of the notes.

This helps users efficiently absorb important details while keeping the interface visually cohesive.

Images In Discord Chat Window

To prevent the chat from feeling text-heavy and lacking content, I added images while users interact with characters. To implement this, I created a custom command in the Fungus flowchart, allowing me to reuse it easily.

Snippets of the code & how it looks on the Fungus Flowchart commands.

How it looks like in chat & pop-up.

Custom Command Integration: Although I created a new command, I still needed to use Fungus’s Say command to ensure the images appeared correctly within the chat flow.

Image Popup: I designed a new prefab that allows users to tap on an image, triggering a popup to display a larger version for better visibility.

This improves the content balance, user engagement, and accessibility, making interactions with characters more dynamic.

/ / /

Alternative Approaches

Pixelated Background Images

Initially, I planned to hand-draw pixelated background images, but due to time constraints, I opted for a faster approach: editing existing images to apply a pixel effect. This allows me to maintain the aesthetic while saving time for other crucial tasks.

Process in Photoshop

To achieve the pixel effect, I used Photoshop’s "Save for Web (Legacy)" feature:

Resizing the Image: I scaled it down to a small resolution, reducing details to create a pixelated look.

Adjusting Export Settings: In the Save for Web (Legacy) window, I experimented with:

Dithering Patterns (e.g., Diffusion, Pattern, Noise) to control how pixels are distributed.
Color Quantity to limit the number of colors, achieving a retro, low-bit look.

Final Touch-ups: If needed, I manually tweaked the image to refine certain areas to make it align with the overall color palette.

Some testings with different settings.

The finalized settings I will be using.

This works for me because:

Fast & Efficient: Instead of spending hours drawing, I can generate pixelated backgrounds quickly and apply this technique to other images across different windows.

Customizable Aesthetic: By tweaking dithering and color settings, I can still create a unique pixel style tailored to my project.

Consistent Visuals: Since I’ll be using this method across multiple assets, it helps maintain a cohesive pixel-art-inspired look without inconsistencies.

While this method isn't as detailed as hand-drawn pixel art, it is a practical and effective alternative that aligns with my project's timeline and overall aesthetic.

/ / /

What's Next

Refining Scope Before The Gradshow Exhibition

With the remaining time before the gradshow exhibition, I discussed with my supervisor and decided to reduce the number of interactable characters from 9 to 5. The main reason is to prioritize quality over quantity is because I already have 5 fully developed characters, and instead of overwhelming myself with additional workload, I should focus on refining what I have. To ensure the project still feels complete, I will add a "Coming Soon" label where necessary, making it clear that additional content was planned but is not yet available.

After finalizing the usability test refinements, I will reuse the framework I created for the first character and apply it to the remaining four. This approach will help me streamline development while maintaining consistency across interactions. If time allows me, I will also add more UI micro-animations and sound effects to enhance the user experience.

By narrowing the scope and focusing on polishing existing content, I can ensure the project is well-executed, engaging, and ready for the public.

/ / /

Annotated Bibliography

P A N T H E R. "Master the Pixelated Dithered Effect in Photoshop!" (2025). YouTube. Available at: https://www.youtube.com/watch?v=9XJiojbALv4&list=LL.

This student learns how to create a pixelated dithered effect in Photoshop. The tutorial covers the technique of dithering, a method of creating the illusion of shading or color depth using pixel patterns, which is especially useful for creating retro or pixel art styles.

stevehalliwell. (2023). Fungus-wiki / adding_command [online] GitHub. Available at: https://github.com/Fungus-Community-Edition/Fungus-wiki/blob/main/adding_command.md.

This student learns how to add commands to the Fungus framework. The guide on GitHub provides detailed instructions on extending the functionality of Fungus by creating custom commands.

‌

Unity Technologies (2016). Clones not being Destroyed. [online] Unity Discussions. Available at: https://discussions.unity.com/t/clones-not-being-destroyed/177790.

This student learns about the issue of Unity clones not being destroyed properly and explores possible solutions to fix the problem.

‌

Unity Technologies (2017). UI Image sorting layer? [online] Unity Discussions. Available at: https://discussions.unity.com/t/ui-image-sorting-layer/664600.

This student learns about sorting layers for UI images in Unity, specifically how to manage the rendering order of UI elements.

‌

klyaksun (2025). Night neon downtown city street with signboard on building perspective view. Abstract future cityscape road game panorama. 2d cyber futuristic metaverse district environment. Anime skyscraper banner. [online] Adobe Stock. Available at: https://stock.adobe.com/my/images/night-neon-downtown-city-street-with-signboard-on-building-perspective-view-abstract-future-cityscape-road-game-panorama-2d-cyber-futuristic-metaverse-district-environment-anime-skyscraper-banner/1003597452.

This student uses an abstract, futuristic cityscape featuring neon lights, skyscrapers, and a metaverse-inspired environment as the project's background image.

‌

klyaksun (2025). Night city backstreet with dim illumination. Vector cartoon illustration of dark alley between modern urban buildings, waste bins, trash bags, cardboard boxes on ground, bright city lights in windows. [online] Adobe Stock. Available at: https://stock.adobe.com/my/images/night-city-backstreet-with-dim-illumination-vector-cartoon-illustration-of-dark-alley-between-modern-urban-buildings-waste-bins-trash-bags-cardboard-boxes-on-ground-bright-city-lights-in-windows/618028215.

This student incorporates a vector cartoon illustration depicting a dimly-lit city backstreet as the project's background image.

‌

klyaksun (2025). City street with houses and buildings with glowing windows at night, perspective view. Cityscape with road, houses, store and skyscrapers with neon signboards, vector panoramic cartoon illustration. [online] Adobe Stock. Available at: https://stock.adobe.com/my/images/city-street-with-houses-and-buildings-with-glowing-windows-at-night-perspective-view-cityscape-with-road-houses-store-and-skyscrapers-with-neon-signboards-vector-panoramic-cartoon-illustration/559664278.

‌This student uses a vibrant, cartoon-style illustration of a city street at night as the project's background image.

Search This Blog

Degree Project