Image Weaver

Image Weaver is a word game where players form words from visual collages. Use hints, shuffle letters, and compete in online tournaments. Fun, challenging, and perfect for word puzzle lovers!

Comment

  1. Cognitive Challenge: I wanted to create a game that engages players by challenging their problem-solving skills and vocabulary. With collages as visual clues, players are pushed to think outside the box and recognize patterns that lead to the correct word.

  2. Visual Appeal: Instead of using four separate images, I combined the clues into a single picture with four collages. This not only simplifies the design but also enhances the game's aesthetic, making it more visually engaging for players.

  3. Word Association: The core of the game is finding one word that connects all the elements in the collage. I was inspired by how powerful and satisfying it is to make those connections and see how different visual hints lead to a common word.

  4. Sense of Accomplishment: Players love the feeling of solving a challenging puzzle. By offering unique and creative collages, Image Weaver ensures that every solved puzzle gives players a rewarding sense of achievement.

  5. Educational Value: As a word puzzle, Image Weaver naturally helps players improve their vocabulary and language skills. It’s a fun way to learn new words and strengthen word association abilities.

  6. Universal Appeal: Word games have broad appeal, and I wanted to create something that people of all ages and backgrounds could enjoy. The combination of visual clues and word puzzles allows Image Weaver to be accessible and engaging for a wide audience.

These elements together inspired Image Weaver—a game that combines mental stimulation, visual creativity, and universal fun!

What it does

In Image Weaver, players are presented with a picture that contains 4 collages, and 12 letter buttons. Their goal is to form the correct word that represents the picture using the letters provided.

The game also includes helpful features like:

  • A hint button, where players can unlock a clue for a price.
  • The ability to unlock a random letter for a price, helping guide them toward the correct answer.
  • A shuffle button to rearrange the letters if they need a fresh perspective.

The most exciting part is the online tournament mode, where players can invite their friends and compete to see who can solve puzzles the fastest. This competitive aspect adds a fun, social element to the game!

How I built it

To develop Image Weaver, I used React Native and TypeScript for the front end, ensuring a responsive, mobile-friendly UI with type safety for clean and scalable code.

For authentication, I integrated Azure AD B2C, providing secure user login.

For tournaments, I leveraged Azure SignalR to display live scores and detect the first player to complete five puzzles as the winner.

I built the tournament logic using Azure Functions, handling tournament creation, user authentication, joining tournaments, updating scores, negotiating with SignalR, and broadcasting live updates.

For data storage, I used Azure Cosmos DB to store tournament and game data. Static images used in the game are stored in Azure Blob Storage for efficient access.

This setup ensures a seamless, real-time, and scalable multiplayer experience. 🚀

Challenges we ran into

  1. Balancing Game Difficulty – Finding the right balance between easy and hard puzzles took careful tuning. I had to refine collage complexity and letter selection to create an engaging challenge for all players.

  2. Implementing Complex Features – Features like unlocking a random letter for a price required precise logic and seamless integration. Handling transactions correctly was particularly challenging.

  3. Generating Effective AI Collages – I used Bing AI to generate collages, but ensuring they effectively conveyed the intended words while maintaining visual and thematic quality required fine-tuning and evaluation.

Overcoming these challenges involved technical problem-solving, creative design, and rigorous testing to create a polished and enjoyable game experience. 🚀

Accomplishments that we're proud of

Accomplishments I’m Proud Of

  1. Successfully Integrating Azure Services – I was able to integrate all the Azure services I needed, from authentication with Azure AD B2C to real-time updates with Azure SignalR, ensuring a seamless and scalable experience.

  2. Innovative Gameplay Design – Image Weaver uniquely blends visual storytelling with word puzzles. Using a single image with four collages to represent one word adds a fresh twist to the classic word puzzle format.

  3. Seamless React Native & Azure Integration – Bringing together React Native for a smooth mobile UI and Azure services for backend functionality was a major achievement. This combination ensures a fast and dynamic gameplay experience.

  4. Implementing Complex Features – Developing features like unlocking random letters and hints required intricate logic and seamless execution. With the help of GitHub Copilot, I was able to streamline complex problem-solving, ensuring these mechanics work flawlessly and enhance the overall player experience.

  5. Effective Use of AI – Using Bing AI to generate collages was a big win. Ensuring that AI-generated images effectively represent words while maintaining visual appeal took careful fine-tuning.

  6. Developing an Engaging Online Tournament Mode – Creating a real-time tournament where players compete to solve puzzles first adds a fun social and competitive element to the game.

  7. Balancing Game Design and Difficulty – Successfully adjusting puzzle difficulty to make the game both challenging and accessible was crucial in making Image Weaver engaging for all players.

Here’s a detailed version of what you learned during the development of Image Weaver:

What I Learned

  1. Using Azure Services
    Throughout the development of Image Weaver, I leveraged a variety of Azure services to power key features of the game:

    • Azure AD B2C was used for user authentication, allowing players to securely sign up and log in to the game. This integration simplified user management and helped ensure data privacy.
    • For real-time interaction in the tournament mode, I integrated Azure SignalR, which enabled players to compete in live tournaments, with real-time score updates and tournament status broadcasts. This service helped ensure smooth communication and synchronization between clients in multiplayer environments.
    • Azure Functions were used to handle critical backend operations, such as creating tournaments, authenticating users, updating scores, and handling tournament logic. These serverless functions provided scalability and flexibility, especially for handling fluctuating player traffic.
    • I used Azure Cosmos DB to store tournament and game data efficiently, offering low-latency reads and writes for fast-paced gameplay.
    • To manage static image files, Azure Blob Storage was used to store and serve the images used in the game. This allowed for seamless access to visual assets for players while minimizing load times.

  2. Using GitHub Copilot
    GitHub Copilot was a huge asset during the development process, especially for solving complex logic. I used it extensively to accelerate my coding, both on the frontend and backend, by offering code suggestions, automating repetitive tasks, and helping me write more efficient functions. Copilot made it easier to implement complex features like random letter unlocking, hint systems, and game logic handling. It also helped me write and debug intricate backend logic, such as tournament creation, player management, and real-time score updates. This significantly improved my productivity and problem-solving capabilities, helping me focus on refining the game’s features and overall design.

  3. Technical Integration
    Integrating React Native with a real-time backend was a valuable learning experience. I had to manage complex state updates and synchronize data efficiently between the client (mobile app) and the backend (Azure services). This taught me how to handle real-time data synchronization, ensuring that score updates, tournament status, and other dynamic elements were reflected across all devices instantly. I also gained experience in managing complex state in a mobile environment, keeping the user interface responsive and ensuring that changes from the backend were reflected in real-time.

  4. User Experience Design
    Creating a game that is both challenging and accessible taught me a lot about user experience (UX) design. I learned how to balance complexity, ensuring that players of all skill levels could enjoy the game without feeling overwhelmed. This involved carefully designing the difficulty curve, adjusting puzzle complexity, and creating an intuitive interface for game controls, hints, and features. It was important to consider how to keep players engaged without making the puzzles either too easy or too frustrating.

  5. AI and Creative Design
    Working with AI-generated collages deepened my understanding of the intersection of technology and creativity. I learned how to leverage Bing AI to generate collages that conveyed the intended words while maintaining visual appeal. This required fine-tuning AI outputs to ensure they fit the game’s thematic requirements and provided intuitive clues to the player. It was a unique challenge to blend creativity with functionality, and I’m proud of how the AI-generated images enhanced the game’s visual storytelling.

  6. Real-Time Tournament Management
    Developing the online tournament mode taught me a great deal about managing real-time player interactions and competitive features. I learned how to create a fair and engaging competitive environment where players could join tournaments, compete in solving puzzles, and have their scores updated in real-time. This involved managing connections, ensuring smooth communication via SignalR, and handling issues like latency and data consistency during the competition. The experience helped me build a dynamic, fun, and interactive tournament mode.

  7. Problem-Solving and Adaptability
    Throughout the development process, I encountered numerous technical and design challenges. From solving complex feature logic to overcoming integration hurdles with Azure services, I had to constantly adapt and find creative solutions. This experience significantly improved my problem-solving skills and taught me to stay flexible in the face of unexpected issues. Whether it was debugging backend functions or adjusting game mechanics for better balance, the challenges I faced helped me grow as a developer.

Overall, this project provided a comprehensive learning experience, from integrating advanced cloud services to balancing game design and enhancing creativity with AI. I’m proud of how much I’ve learned and how these skills have contributed to the development of Image Weaver. 🚀

Final Thoughts

I’m incredibly proud of how Image Weaver has evolved into a unique and visually captivating word puzzle game. The seamless integration of innovative gameplay, advanced Azure services, and AI-driven design has created an engaging, competitive, and rewarding experience for players. This project has been a tremendous learning journey, and I'm excited about the potential it holds for players to enjoy and compete! 🚀

What's Next for Image Weaver

I’m excited about expanding Image Weaver to reach a broader audience. By leveraging React Native, I can ensure the game will be available seamlessly on both Android and iOS, offering a high-quality experience across mobile platforms.

In addition to platform expansion, my focus will be on further development in the following areas:

  1. Feature Enhancements: I’ll introduce new gameplay features, such as additional puzzle types, creative hint mechanics, and customization options for tournaments, to keep the game fresh and engaging for players.

  2. User Feedback and Improvements: Gathering valuable player feedback is key. I plan to listen to the community and continuously refine the game, addressing issues and improving gameplay based on user suggestions.

  3. Performance Optimization: Ensuring smooth gameplay on various devices is a priority. I'll work on optimizing the game’s performance, fixing bugs, and enhancing stability for a seamless experience on all devices.

  4. Marketing and Community Building: To grow the player base, I’ll invest in marketing efforts and engage with the Image Weaver community across social media. I aim to build a positive and active community, promoting the game through multiple channels.

  5. Expanding Content: I’ll continue adding new collages, words, and themes to keep the game exciting and challenging for players. Regular updates will keep the experience fresh and encourage ongoing player engagement.

  6. Introducing a Shop Feature: A new shop will allow players to purchase in-game currencies like coins and gems, which can be used to unlock hints, reveal random letters, and create tournaments. This will give players more customization and strategic options to enhance their experience.

Overall, I’m committed to continually improving Image Weaver, ensuring it becomes a standout word puzzle game that provides a fun, engaging, and unique experience for players around the world.

Built With

Share this project:

Updates