Devlog # 49 - Creating Connection Overlays for Puzzle Guidance
Hey everyone! We’re back with another devlog update.. In our puzzle game, each level features three distinct blocks, each with its own unique environment, obstacles, and pathways. Each block has doorways on both the left and right sides that are meant to connect to doorways on other blocks. During playtesting, we noticed that players were having trouble figuring out which doorways connect between blocks in our puzzle game, leading to some head-scratching moments. So, we set out to create a simple, effective way to help players navigate these connections without feeling lost. Here’s how we tackled it!
Step 1: Designing the Overlay in Photoshop
The first step was creating a visual map for each block. Using Photoshop, we traced the layout of each block, focusing on key elements:
Floors, Obstacles, and Platforms: These were outlined to show where characters can move and where they cannot, helping players visualize possible paths.
Doorway Connections: a color-coded system to indicate potential connections
Red: Doorways that cannot connect to the current block.
Green: Doorways that can connect to the side doorways of the block in focus.
Blue: Doorways that can connect to the bottom doorways of the block in focus.
This tracing process created a simplified, visual guide for each block, making it easier for players to understand the connection possibilities at a glance.
WITHOUT OVERLAYS
WITH OVERLAYS
Step 2: Enhancing the Overlay in Unity
After completing the tracings,we imported the Photoshop files into Unity and worked on integrating them into the game. To make the overlays more effective, we developed a custom shader that adds a subtle glow effect. This glow highlights the overlays without being too intrusive, making them stand out even when players zoom out to view the entire level. The shader’s effect directs players’ attention to key areas without overwhelming the visual experience, providing a clean, intuitive map.
Outcome:
The introduction of the Connection Overlay system has significantly improved the player experience. The overlays offer clear visual guidance on how blocks can connect, reducing confusion and helping players solve puzzles faster. This feature has now become a core component of our game’s user experience, offering an engaging way to assist players without breaking immersion.
By simplifying the connection process, we’ve been able to enhance the overall gameplay flow, making the puzzle-solving experience more enjoyable and less frustrating. We look forward to sharing more updates as we continue refining the game!
Best regards,
Playdew team
https://store.steampowered.com/app/1752540/Lost_Twins_II/
Step 1: Designing the Overlay in Photoshop
The first step was creating a visual map for each block. Using Photoshop, we traced the layout of each block, focusing on key elements:
Floors, Obstacles, and Platforms: These were outlined to show where characters can move and where they cannot, helping players visualize possible paths.
Doorway Connections: a color-coded system to indicate potential connections
Red: Doorways that cannot connect to the current block.
Green: Doorways that can connect to the side doorways of the block in focus.
Blue: Doorways that can connect to the bottom doorways of the block in focus.
This tracing process created a simplified, visual guide for each block, making it easier for players to understand the connection possibilities at a glance.
WITHOUT OVERLAYS
WITH OVERLAYS
Step 2: Enhancing the Overlay in Unity
After completing the tracings,we imported the Photoshop files into Unity and worked on integrating them into the game. To make the overlays more effective, we developed a custom shader that adds a subtle glow effect. This glow highlights the overlays without being too intrusive, making them stand out even when players zoom out to view the entire level. The shader’s effect directs players’ attention to key areas without overwhelming the visual experience, providing a clean, intuitive map.
Outcome:
The introduction of the Connection Overlay system has significantly improved the player experience. The overlays offer clear visual guidance on how blocks can connect, reducing confusion and helping players solve puzzles faster. This feature has now become a core component of our game’s user experience, offering an engaging way to assist players without breaking immersion.
By simplifying the connection process, we’ve been able to enhance the overall gameplay flow, making the puzzle-solving experience more enjoyable and less frustrating. We look forward to sharing more updates as we continue refining the game!
Best regards,
Playdew team
https://store.steampowered.com/app/1752540/Lost_Twins_II/