Phar-Mini ASU - Game UI & UX

A Top-Down Simulation for Industrial Engineering Environments

Engine: Godot 4.3 | Duration: 2+ Months (ongoing) | Estimated Delivery: May 2026

Focus: Environment Systems, UI/UX Responsiveness, Scene Optimization

1. Project Overview

Phar-mini is a simulation prototype developed for industrial engineering pipelines at Arizona State University. It models the dynamics of facility growth — hospitals, laboratories, and factories — within a scalable top-down environment.

My contribution focused on dynamic world rendering, environmental feedback, and user experience systems. Over two months, I implemented key systems that bridged technical performance and design clarity, supporting real-time feedback loops essential for simulation usability.

v1

v2

2. Objectives and Design Philosophy

Phar-mini aimed to visualize industrial growth and spatial interaction in a clear, data-driven context. My design goals included:

• Clarity: Ensure that data visualization and scene readability scale with simulation complexity.

• Responsiveness: Create adaptive systems that preserve user context during dynamic updates.

• Performance: Optimize rendering and logic without sacrificing interactivity.

• Immersion: Simulate environmental conditions (light, time, visibility) to ground the player in a believable world.

3. Core Contributions

3.1 Day/Night Cycle with Live Shadows

Purpose: Support real-time environmental feedback that reflects simulation pace.

Approach:

• Built a shader-driven time-of-day system integrated with the engine clock.

• Adjusted directional light intensity and color based on simulation speed multipliers.

• Implemented real-time shadows using GPU instancing and cascaded shadow maps.

• Optimized for minimal draw calls using material reuse.

Result: Smooth ambient transitions and dynamic shadows provided intuitive cues about simulation progress and task pacing.

3.2 Fog of War Behavior System

Purpose: Emulate spatial uncertainty for operational planning and exploration.

Implementation:

• Scripted a fog mask shader controlled by proximity checks and ray-casts.

• Integrated with agent vision logic to reveal discovered zones dynamically.

• Used signal-driven updates to reduce per-frame overhead.

Outcome: Improved the realism of “information flow” across facilities, balancing visibility and strategy while maintaining 60+ FPS stability.

3.3 Responsive UI and Mobile Port Control Mapping

Focus: Thumb-Zone Analysis, Mobile Refactor, Interaction Layout, Team Sandbox Environment

Purpose: Ensure mobile usability by mapping thumb zones, refactoring UI layouts, and providing a sandbox for team iteration.

3.3.1 Thumb-Zone Mapping & Safe-Area Analysis

• Studied natural thumb arcs, reach patterns, and interaction comfort zones using a landscape-orientation model (as shown in the Figma diagram above).

• Calculated usable safe width, accounting for Dynamic Island / camera bezel occlusion and gesture-home indicator spacing.

• Defined three functional regions:

  • Left Zone → Navigation & camera panning

  • Middle Zone → Core build actions & object placement

  • Right Zone → UI actions, upgrades, and management tools

• Anchored UI elements to these zones to reduce occlusion and prevent accidental taps during high-precision building.

  
  

3.3.2 Refactoring UI Assets for Mobile Usability

• Converted desktop UI components into mobile-appropriate touch targets (≥ 64 px) with consistent padding and spacing.

• Rebuilt control nodes using proportional anchors and container-based layouts, ensuring consistent scaling across 16:9, 19.5:9, and ultra-wide mobile resolutions.

• Reorganized UI hierarchy to support modular swapping of menus (Build, Upgrade, Supply Chain, Settings).

• Introduced adaptive visibility rules to prevent clutter and maintain focus during high-density building tasks.

  
  

3.3.3 Interaction Rules & Visual Hierarchy Redesign

• Established layout rules for build buttons, upgrade actions, overlays, quick-access toggles, and transient pop-ups.

• Ensured that critical gameplay elements remain in the central and lower-central vision zone, maintaining immersion without obstructing tile placement.

• I analyzed an early paper-prototype for Phar-mini’s mobile notification drawer to ensure it aligned with our visual hierarchy and mobile usability goals.

  
  

  

  Key Findings

  • Information Density: Multiple icons and mixed visual cues made each row hard to scan on small screens.

  • Tap Safety: Touch targets were below the recommended mobile size, creating accidental taps during scrolling.

  • Clutter: High-frequency simulation events produced too many notifications, overwhelming the list.

  • Interaction Conflicts: Rows attempted to support multiple actions (open, expand, jump to location), increasing ambiguity.

  Recommended Improvements

  • Use a single severity cue (colored strip or dot) instead of multiple icons.

  • Increase row spacing and touch target size for mobile comfort.

  • Pool related events (e.g., grouped resource warnings) and reduce redundancy.

  • Limit each row to one primary action; move advanced controls to an overflow menu.

  • Convert the sorting bar into a dropdown to save vertical space.

  Outcome

  These refinements improved scan-ability, reduced visual noise, and created a safer interaction model for mobile devices. The evaluation informed a cleaner, more focused notification system that fits the game’s fast-paced management loops.

3.3.4 Team Sandbox for Prototyping & Testing

• Developed a dedicated mobile UI sandbox scene in Godot so designers and engineers could experiment with variations of:

  • Build menus

  • Placement indicators

  • Resource overlays

  • Camera controls

  • Scaling presets

• 

  Enabled rapid A/B testing of layout changes without breaking main gameplay scenes.

• Standardized layout presets so all team members could test consistently across Android and iOS devices.

  
  

Outcomes

The new mobile control scheme significantly improves playability on small screens by aligning interaction zones with natural thumb reach and reducing cognitive load during construction tasks. The sandbox pipeline accelerated cross-team experimentation and allowed Phar-mini’s mobile port to develop a consistent, ergonomic, and production-ready UI foundation.

3.4 Optimized Loading and Scene Transition Pipeline

Purpose: Enable fast simulation resets and data reloads without breaking flow.

Implementation Details:

• Designed a loading intermediary scene to handle pre-bake processes (e.g., mesh static baking, shader caching).

• Used ResourceLoader.load_threaded_request() for asynchronous scene management.

• Added memory-safe instance dumps and object pool resets to prevent leaks.

Result: Reduced load stutter by ~45% and created seamless simulation restart loops critical for rapid prototyping and user testing.

4. System Architecture and Workflow

Category	Practice / Tool
Version Control	Git with feature branches per subsystem
Organization	Modular GDScript architecture; scene-based encapsulation
Prototyping	Figma for rapid prototyping, A/B Testing
Optimization	Shader caching, and spatial partitioning
Profiling	Built-in Godot Profiler & frame time graph
Team Coordination	Agile-style task tracking via Jira & Git commit tagging

5. User Experience Integration

Every system was designed to reinforce UX clarity within a data-heavy environment.

• Visual Feedback: Dynamic lighting and fog patterns double as progress indicators.

• Loading Transparency: Transition screens provide feedback for asynchronous tasks.

• Error Recovery: Scripted resets allow safe recovery from invalid simulation states.

• Scalability: Interface hierarchy and signal-based architecture support modular UI addition.

6. Before and After Showcase

7. Outcomes and Reflection

Impact: Phar-mini successfully served as a proof of concept as a simulation that would encourage Industrial Engineering interests. My work provided the foundation and pipelines for dynamic rendering and interaction design in simulation contexts within this prototype. I am to continue to make an impact in the coming months as we port to mobile and add complexity to the game experience.

Key Learnings:

• Balancing workload and UX responsiveness in complex simulation loops.

• Structuring scalable shader code and UI systems for collaborative environments.

• Translating engineering data into visual cues for non-technical users.

Next Steps: Future iterations will incorporate:

• Persistent save/load logic for industrial state tracking.

• Custom UI theme modules for accessibility testing.