Responses by Basement Studio.

Background: This is a passion-fueled project born from our innovation lab. Spanning from concept art to web production, we delved into novel techniques to enhance the process and strengthen our expertise in crafting immersive experiences. We designed this project for a nostalgic community of web creatives and retro game enthusiasts.

Design core: We crafted a retro point-and-click game, blending both modern and traditional technologies. We achieved our unique aesthetic by integrating a wide array of techniques into a meticulous post-processing pipeline. This includes concept art, AI image and audio generation based on hand-painted artworks, complex 3-D work that would also be rendered in the browser; classic, 2-D sprite-sheet animations; and pixelated dithering everywhere.

Favorite details: One, we achieved a captivating parallax effect through the perspective projection work of the overall. Two, we developed a three-by-three-pixel dithering technique using indexed color coding to produce a retro-vibe look and feel. Third, we built a debug engine for curious users to peek under the hood and see how we’ve artfully arranged a complex array of elements directly in the browser.

Challenges: We had to skillfully arrange different visual assets onto the final canvas, ensuring a smooth performance and a flowing story sequence that evolves with user interaction.

Time constraints: We believe that time constraints often spark creativity. Take the debug engine we developed: This was a major collaborative effort born out of the need to solve problems quickly and promote teamwork. This tooling not only saved us time, but also let us fine-tune our work to achieve the best final look possible.

New lessons: This passion project served as a challenge for our team to explore and discover things. In the process, we established new, innovative methods to work on future projects. We also tackled game development tasks and established an original image-processing pipeline. We learned new ways to manage 3-D camera controls on the browser and how to handle different complex assets for web environments.

Navigation structure: We carefully designed an intuitive user navigation to easily trigger actions and dialog.

Technology: For conceptualization and production, we used Blender, Figma, Leonardo.Ai and Photoshop. Our development stack is mostly built on top of React with Next.js as the framework, react-three-fiber for managing three.js and WebGL features, GSAP as the animation engine, and Vercel to deploy the project.

Special technical features: We created a custom hook named “useStory” to keep events and states in sync. Rooted in a promise chain, this approach strictly maintained the order of the story sequence. As certain promises, like a character’s dialog, were fulfilled by user interaction, they would unlock subsequent elements in the game.