Earlier this month, Erick Zanardo joined Craig Labenz on the Observable Flutter livestream to talk about I/O FLIP, the AI-designed take on a classic card game demoed on-stage at Google I/O. As the tech lead on the project, Erick took us behind the scenes on the origins of the game, how we built it in collaboration with Google, and some of the key learnings from the project.
Here are some of the things they talked about:
Origins of I/O FLIP
At VGV, we’ve worked with Google on a few demos for Google I/O, such as I/O Photo Booth in 2021 and I/O Pinball last year. This year, we teamed up with Google to build for I/O FLIP, a digital card game designed by AI. Erick recounts that the early days of the project were spent on brainstorming. The only requirement the team had was to incorporate AI and machine learning into the game — everything else was up in the air. Some of the early ideas were other games, such as an RPG game with AI-generated quests and assets. Ultimately, the team settled on a card game because it had simple game mechanics and because it wouldn’t take long to play a round, it could encourage players to keep playing.
Flutter brings UI of the game to life
Since this was a Flutter showcase project, Flutter was used for the frontend of I/O FLIP. The Casual Games Toolkit provided a great foundation for both the background music and audio effects within the game via the AudioController class.
Erick took us behind the scenes for the code of the rainbow foil shader that is applied to special cards in I/O FLIP. Craig provided some more context around two key shader widgets: ShaderBuilder, which compiles the shader, and the AnimatedSampler, which renders an element in your app and then applies the shader to that desired element in your app (Craig also teased some shader resources to come later this month 👀).
Building a server-authoritative Game: Dart Frog 🤝 Firestore
The team decided to use Dart Frog to help build the backend of this project: Erick says that they didn’t want to put all of gaming logic on the client because if they did, players could try to take a look an the servers, try to find ways to exploit the game, and take advantage of their opponent.
I/O FLIP is a server-authoritative game, which means it is defined by the backend. All of the logic about which player wins a round, and which player wins the match would be defined by logic on the backend.
Erick recalls that the team considered using Firebase functions to handle these server operations, but ultimately decided to use Dart Frog to be able to share code between the server and the client.
How long did it take to build I/O FLIP?
Erick tells us that I/O FLIP took around three months to go from ideation to final product. There were many phases within where the team explored ideas and created proofs of concept for different approaches. Once they landed on the final idea of the card game, it took about 6 weeks to build.
