Posted by Jay Chang, Product Advertising and marketing Supervisor for Flutter & Dart and Glenn Cameron, Product Advertising and marketing Supervisor for Core ML
I/O FLIP is an AI-designed tackle a traditional card recreation, powered by Google, and created to encourage builders to experiment with what is feasible with Google’s new generative AI applied sciences. 1000’s of customized character photos had been pre-generated with DreamBooth on Muse and their descriptions had been written utilizing the PaLM API. The sport’s UI and backend had been in-built Flutter and Dart, a set of Firebase instruments had been used for internet hosting, and sharing, and Cloud Run was used to assist scale.
When a consumer performs I/O FLIP, they:
- Choose a personality class and an influence to generate a pack of 12 playing cards
- Choose three playing cards from the pack to create their workforce
- Be part of a match and win a best-of-3
- Win a number of matches in a row to create a streak of wins for an opportunity to make the leaderboard
- Share their deck with gamers from everywhere in the globe
 |
Let’s dig into how we constructed the sport.
Flutter and Dart: Person Interface, Hologram results, and backend
I/O FLIP’s recreation logic and UI is constructed on a basis supplied by options from the Flutter Informal Video games Toolkit, together with audio performance and app navigation by way of the go_router bundle. Since FLIP is an internet app, it was necessary that it was responsive – resizing relying on the consumer’s display screen measurement and that it took enter from a wide range of units, cell, pill, and desktop.
A lot of the logic in FLIP relies on the sport playing cards, in order that they’re a great place to start out. Every card consists of a picture of one among 4 Google mascots: Sprint, Sparky, Dino, and Android, and an outline – each of that are impressed by the category and energy the consumer selects in the beginning of the sport. Playing cards are additionally randomly assigned an elemental energy (air, water, hearth, steel, earth) and a quantity between 10-100 indicating the cardboard’s power. Elemental powers can influence one another in match play, indicated within the picture beneath.
 |
Elemental powers aren’t only for present. Playing cards obtain a ten level penalty if they’re on the improper finish of a component matchup, as defined within the photos above.
Talking of matchups, every match is a best-of-3. The winner continues taking part in with their chosen hand to start out (or proceed) their streak, whereas the loser can share their hand or decide a brand new hand to attempt once more.
New Flutter and Dart options helped us shortly convey this life: For example, data, a Dart characteristic introduced at Flutter Ahead, helped us to render a body primarily based on the cardboard component, and Flutter’s official help for fragment shaders on internet helped us to create a particular hologram impact on some playing cards, that are the one playing cards within the recreation which have 100 factors.
 |
Dreambooth on Muse and PaLM API: AI-generated photos and descriptions
 |
Every card in I/O FLIP is exclusive as a result of it incorporates an AI-generated picture and outline.
Pictures had been pre-generated utilizing two applied sciences pioneered out of Google Analysis: Muse, a text-to-image AI mannequin from the Imagen household of fashions, and DreamBooth, a method operating on prime of Muse that means that you can personalize text-to-image fashions to generate novel photos of a particular topic utilizing a small set of your personal photos for coaching.
Card descriptions had been prototyped in MakerSuite and pre-generated utilizing the PaLM API which accesses Google’s massive language fashions. Based mostly on the ability a participant selects in the beginning of the sport, chances are you’ll get a card description that gives context to the picture, together with the character’s particular powers comparable to: “Sprint the Wizard lives in a fort together with his pet dragon. He likes to forged spells and make individuals chuckle.” Be part of the PaLM API and MakerSuite waitlist right here.
Flutter is used to compose the playing cards from a reputation, description, picture and energy utilizing the GameCard widget. As soon as the cardboard is created, a border indicating its component is utilized. In case you’re fortunate sufficient to land a hologram card, a particular foil shader impact shall be utilized to the design.
Firebase: recreation internet hosting, sharing, and real-time recreation play
Cloud Storage for Firebase shops the entire photos, descriptions, components, and numbers that generate gamers’ card decks. Firestore retains monitor of the leaderboard for “Highest Win Streak” with new leaders added utilizing the firedart bundle.
In all circumstances the place the Flutter app instantly accesses Firestore, we have used App Examine to make sure that solely the code that we wrote ourselves is allowed, and we used Firebase safety guidelines to make sure the code can solely entry knowledge and make adjustments that it’s approved to.
Dart Frog: sharing code between the backend and frontend
I/O FLIP wanted extra methods to stop dishonest. That is the place Dart Frog got here in helpful. It allowed us to maintain the sport logic, such because the winner of every spherical, on the backend, but additionally share this code between the Flutter frontend and the Firestore backend, which not solely helped with dishonest prevention, but additionally allowed the workforce to maneuver just a bit bit sooner, since we had been writing our backend and frontend code in the identical language.
I/O FLIP is most enjoyable when many gamers are on-line and taking part in. By deploying the I/O FLIP Dart Frog server to Cloud Run, the sport can benefit from options like autoscaling, which permits it to deal with many gamers directly.
Lastly, Dart Frog additionally permits downloading or sharing playing cards on social media. On the finish of a spherical, a participant can select to obtain or share to Twitter or Fb. When a consumer clicks the share button, Dart Frog generates a pre-populated publish that incorporates textual content to share and a hyperlink to a webpage with the corresponding hand or card and a button for guests to play the sport too!
Attempt it your self
We hope you’ve had an opportunity to attempt I/O FLIP and that it evokes you to consider methods generative AI can be utilized in your merchandise, safely and responsibly. We’ve open sourced the code for I/O FLIP so you’ll be able to take a deeper have a look at how we constructed it too. In case you’d wish to attempt your hand at a few of the generative AI applied sciences utilized in I/O FLIP, tune in to Google I/O to be taught extra.
