We are Agnieszka and Jakub from Appunite, and together with our great friend Clara, we recently participated in the Global Gamers Challenge—a hackathon organized by Google and Global Citizen. We're excited to share that our hard work paid off, and we emerged victorious! This article is a behind-the-scenes look at our journey, from brainstorming a game concept to overcoming challenges and ultimately achieving our goal. This shows how much can be achieved with a small team and the right skills and attitude.
Brainstorming for Impact: Turning Ideas into Reality
The challenge was clear: create a game in eight weeks that addresses global issues like light pollution, microplastics, and the underutilization of green energy. We huddled together for brainstorming sessions, and within two meetings, we had a compelling concept: a game that would educate players about these environmental problems while offering an engaging gameplay experience. It all began with this initial concept:
And eventually evolved into a complete product:
Design and Development: The Key to Our Success
One of the critical factors in our success was the seamless integration of design and development. Clara, our talented designer, not only created stunning visuals but also meticulously crafted detailed Rive files that brought our game to life. Collaborating with Clara was a highlight of the project. From the early stages of the project, we shared ideas, visualized solutions, and discussed the expected behavior of individual game elements. Using our everyday way of working with designers, we were able to achieve well-planned game mechanics, which translated into a unique user experience.
Building the Game: Architecture and Technology Stack
We used two-layered architecture, a simplified concept of clean architecture that we use every day in our company. The persistence layer, also known as the repository or data layer, leveraged Firebase Firestore to manage user data and game logic. The local storage layer stored local data like tutorial completion status and user ID. We used the Flame engine, Rive for creating functional graphics animations, and standard Flutter widgets for the visual representation.
Rive: Breathing Life into Animations
Rive is a powerful animation tool that works across various platforms, including web, mobile, and desktop. It offers several advantages over traditional animation methods like Lottie, including smaller file sizes, faster performance, advanced features like interactivity, a built-in editor, and low memory usage. Crucially, it seamlessly integrates into Flutter and empowers designers to create animations directly, significantly reducing development time.
Flame: A Game Engine Built for Flutter
Flame is a flexible, open-source game engine that runs seamlessly on all platforms. It provides essential functionalities for game development, including a game loop, particle effects, collision detection, controls, gesture support, image and animation rendering, sound management, and more. The Flutter Casual Games Toolkit offers three free templates that come pre-integrated with Flame and controllers, making it easier to jumpstart your game development process.
Firebase: Powering the Backend
Firebase is a comprehensive platform from Google that offers a suite of tools for building mobile and web apps. In our game, we used the following Firebase services:
- Firestore: A cloud-based NoSQL database for storing and synchronizing game data such as the number of points scored from each challenge. It was also used for displaying the leaderboard.
- Storage: For storing game assets like images. Those assets had to be hosted in Firebase Storage because Google Wallet integration requires hosted image links.
- Hosting: To deploy a web version of the game. Thanks to simple FlutterFire CLI commands
flutter initandflutter deploywe released our application in 5 minutes without any problems.
If you're unfamiliar with Firebase, it's a game-changer. Ideal for rapid development, it's free for small projects and packed with features to propel your app to new heights. We rely on Firebase for both small and large-scale applications at our company. It's our go-to tool for essential features like analytics, crash reporting, and social authentication. We even leverage Remote Config for dynamic feature flags and more. Firebase is a versatile platform we wholeheartedly recommend.
The Importance of Pre-Built Packages
While building the game, we extensively utilized various open-source Flutter packages to speed up development. These packages offer pre-built functionalities for common tasks, saving us valuable time and effort. It’s crucial to highlight Flutter's robust ecosystem of packages as a key factor in its efficiency. The amount of free packages from pub.dev makes it exceptionally well-suited for rapid prototyping, Minimum Viable Product (MVP) development, and other time-sensitive projects. You will find over 34,000 packages on the platform. The Flutter team notices many of them and marks them with its logo as worth trying. You can find them on this list: https://pub.dev/packages?q=is%3Aflutter-favorite, Besides Flutter Favorites packages we have other packages which are constantly supported by a large community. Each package is evaluated using a scoring system that assesses factors such as code quality, documentation completeness, static code analysis results, support up-to-date dependencies, and all platform compatibility. Some of the packages we used include:
- device_preview: For previewing the game on different devices during development to ensure responsive design.
- liquid_progress_indicator_vs: To create complicated and visually appealing progress indicators.
- skeletons: To display skeletal layouts while data is loading.
- scratcher: To implement a scratch-off mechanic in the game.
- flutter_native_splash: For creating a native splash screen for the app.
- flutter_launcher_icons: To generate app icons for different platforms.
- confetti: To celebrate in-game achievements with confetti animations.
- lottie: Our main way to display animations was Rive, but we also decided to use Lottie as well. We found hundreds of free animations that we were happy to apply to our app in individual challenges.
Finding the Perfect Soundtrack: Freemium to the Rescue
Thankfully, you don't need a hefty budget to find high-quality music for your game. We found excellent royalty-free music on websites like Freesound.org, Zapsplat.com, and Pixabay.com. For sound effects, we purchased a cost-effective audio pack from Pond5.com. The cost of all audio for the game was $2.50.
Seamless Integration with Google Wallet
For this hackathon, we created a small integration with the newly created Google Wallet API, thanks to which we could build a plain JSON that contained all the information that created a visual representation of our badges in the Google Wallet app. This integration opens up exciting possibilities, such as using in-game currency for virtual goods or tickets for real-world events in your production app!
Beta Testing: The Unsung Hero of Development
Throughout the entire game development process, we conducted rigorous testing to ensure smooth and enjoyable gameplay. We organized weekly testing sessions with the Flutter team in Appunite and created a small event where our colleagues could compete in our app, which helped us identify numerous bugs. As a project from the top 20 of this hackathon, we were assigned to Zoe and Brandon - Mentors from Google, who mentored us and provided valuable feedback, highlighting areas for improvement. The importance of user interviews in creating a product for people is indescribable. We regularly tested the game with friends and family, gathering valuable insights. Understanding how real users interact with our app was crucial for refining the final product.
Taking Ownership: The Heart of Our Success
As a mobile team with a graphic designer, we took ownership of the entire development process. Working at a startup pace, we prioritized efficiency and collaboration. By leveraging Flutter's flexibility, pre-built components, and AI tools, we rapidly developed the game. Our agile approach, combined with a strong team dynamic, enabled us to deliver a high-quality product on time. Everyone was involved in things that went beyond their comfort zone. Getting involved everywhere and having big ownership drives the rest of the team and inspires them to create great things. Even though we didn't have a lot of people on the team and we didn't know the technologies used here before, we managed to build something cool.
Conclusion: Small Teams, Big Impact
Our journey to becoming one of the winners of the Global Gamers Challenge was not only an exciting experience but also a powerful reminder that small teams can deliver incredible results. We learned that even without prior experience in game development or specific technologies, a tight-knit group of passionate individuals can achieve remarkable things. Teamwork, a strong sense of responsibility, and rapid iteration are the keys to success.
This experience taught us that with the right mindset, tools, and collaboration, anyone can create impactful products. We encourage you to embrace challenges, experiment with new technologies, and work closely with others who share your vision. Participating in hackathons and similar initiatives can provide invaluable experience, open up incredible opportunities, and most importantly, demonstrate that size does not limit potential. Whether you're part of a large team or a small one, the ability to think big and execute well is what truly matters.
We want to express our sincere gratitude to the Flutter team and the Global Gamers Challenge organizers for their support and guidance.
If you have any questions about the technology, collaboration, or the hackathon, please don't hesitate to reach out to us on LinkedIn:
Everything is open source, feel free to do something with it 🔥
Link to the web version.
