DevLog #5 User interface / polish

This week was focused on UI enhancements and general polish for  Re:Action to improve player experience and communicate gameplay systems more clearly.

What I Worked On:

Echo Input Overlay (UI Feedback)

• Implemented UI icons to represent when the player can record (R) or spawn an echo (T).

• The record icon highlights in red while recording is active.

• The spawn icon only appears when a valid echo recording is available, and disappears again during recording or after spawning.

• These icons help guide the player without cluttering the screen with text.

Timed Gate Countdown Display

• Added a TextMeshPro-based timer that shows the remaining time before a gate closes.

• This timer activates when the player triggers a pressure plate, then disappears once the gate closes.

• Helps players plan their movement better, especially in a hallway-style timed gate levels.

Cinemachine + Pixel Perfect Tweaks

• Adjusted the Cinemachine virtual camera framing for a more horizontal “hallway” feel for level 2.

• Ensured compatibility with the Pixel Perfect Camera and itch.io to preserve crisp pixel art at all times.

UI Polish & Presentation

• Created consistent layout and scaling for all in-game UI elements.

• Tweaked colors, anchor points, and visibility logic for clarity and responsiveness.

• Ensured UI responsiveness across different resolutions and safe zones.

Main Menu & Level Select

• Created a main menu with options to start the game, view controls, or change settings.

• Maintained a cohesive style across all UI screens for consistency.

Animated Clouds

• Added animated cloud layers to the menu background for visual appeal.

• This small touch brought a sense of motion and atmosphere, making the menus feel more polished and alive.

Reflections:

• These UI additions significantly improved player understanding of Echo state and timing-based puzzles.

• Using icons instead of text kept the screen clean and intuitive — playtesters immediately understood what was happening.

• The polish pass made the game feel more responsive, readable, and intentional.

Next Steps:

• Begin final QA pass and documentation polish for submission.