I/O FLIP includes a twist to a traditional card video game with generative AI

Published by Jay Chang, Item Marketing Supervisor for Flutter & & Dart and Glenn Cameron, Item Marketing Supervisor for Core ML

I/O FLIP is an AI-designed take on a traditional card video game, powered by Google, and developed to influence designers to explore what is possible with Google’s brand-new generative AI innovations. Countless customized character images were pre-generated with DreamBooth on Muse and their descriptions were composed utilizing the PaLM API The video game’s UI and backend were integrated in Flutter and Dart, a suite of Firebase tools were utilized for hosting, and sharing, and Cloud Run was utilized to assist scale.

When a user plays I/O FLIP, they:

Select a character class and a power to produce a pack of 12 cards

Select 3 cards from the pack to develop their group

Sign up with a match and win a best-of-3

Win numerous matches in a row to develop a streak of wins for a possibility to make the leaderboard

Share their deck with gamers from all over the world

Four phones side by side showing the I/O FLIP game, including drop-downs to select classes and powers for cards and various card battles.

Let’s dig into how we developed the video game.

Flutter and Dart: Interface, Hologram results, and backend

I/O FLIP’s video game reasoning and UI is developed on a structure supplied by functions from the Flutter Casual Games Toolkit, consisting of audio performance and app navigation by means of the go_router plan. Because FLIP is a web app, it was very important that it was responsive— resizing depending upon the user’s screen size which it took input from a range of gadgets, mobile, tablet, and desktop.

Much of the reasoning in FLIP is based upon the video game cards, so they’re an excellent location to begin. Each card includes a picture of among 4 Google mascots: Dash, Sparky, Dino, and Android, and a description– both of which are motivated by the class and power the user chooses at the start of the video game. Cards are likewise arbitrarily designated an essential power (air, water, fire, metal, earth) and a number in between 10-100 suggesting the card’s strength. Essential powers can affect each other in match play, showed in the image listed below.

Five phones side by side showing the I/O FLIP game, including screens including illustrations of the elemental powers and their effects on each other

Essential powers aren’t simply for program. Cards get a 10 point charge if they are on the incorrect end of an aspect match, as described in the images above.

Mentioning matches, each match is a best-of-3. The winner continues having fun with their picked hand to begin (or continue) their streak, while the loser can share their hand or select a brand-new hand to attempt once again.

New Flutter and Dart includes assisted us rapidly bring this life: For example, records, a Dart function revealed at Flutter Forward, assisted us to render a frame based upon the card aspect, and Flutter’s main assistance for piece shaders on web assisted us to develop an unique hologram impact on some cards, which are the only cards in the video game that have 100 points.

A screen recording from I/O FLIP, showing a character card with the shader effect applied

Dreambooth on Muse and PaLM API: AI-generated images and descriptions

Four cards side by side from the I/O FLIP game, including screens

Each card in I/O FLIP is distinct due to the fact that it consists of an AI-generated image and description.

Images were pre-generated utilizing 2 innovations originated out of Google Research Study: Muse, a text-to-image AI design from the Imagen household of designs, and DreamBooth, a strategy working on top of Muse that permits you to individualize text-to-image designs to produce unique pictures of a particular topic utilizing a little set of your own images for training.

Card descriptions were prototyped in MakerSuite and pre-generated utilizing the PaLM API which accesses Google’s big language designs. Based upon the power a gamer chooses at the start of the video game, you might get a card description that offers context to the image, consisting of the character’s unique powers such as: “Rush the Wizard resides in a castle with his animal dragon. He likes to cast spells and make individuals laugh.” Sign Up With the PaLM API and MakerSuite waitlist here

Flutter is utilized to make up the cards from a name, description, image and power utilizing the GameCard widget. When the card is developed, a border suggesting its aspect is used. If you’re fortunate adequate to land a hologram card, an unique foil shader impact will be used to the style.

Firebase: video game hosting, sharing, and real-time video game play

Cloud Storage for Firebase shops all of the images, descriptions, components, and numbers that produce gamers’ card decks. Firestore tracks the leaderboard for “Highest Win Streak” with brand-new leaders included utilizing the firedart plan

In all cases where the Flutter app straight accesses Firestore, we have actually utilized App Inspect to guarantee that just the code that we composed ourselves is permitted, and we utilized Firebase security guidelines to guarantee the code can just gain access to information and make modifications that it is licensed to.

Dart Frog: sharing code in between the backend and frontend

I/O FLIP required more methods to avoid unfaithful. This is where Dart Frog can be found in useful. It permitted us to keep the video game reasoning, such as the winner of each round, on the backend, however likewise share this code in between the Flutter frontend and the Firestore backend, which not just assisted with unfaithful avoidance, however likewise permitted the group to move simply a bit quicker, considering that we were composing our backend and frontend code in the exact same language.

I/O FLIP is most enjoyable when numerous gamers are online and playing. By releasing the I/O FLIP Dart Frog server to Cloud Run, the video game can make the most of functions like autoscaling, which permits it to deal with numerous gamers at the same time.

Lastly, Dart Frog likewise allows downloading or sharing cards on social networks. At the end of a round, a gamer can pick to download or share to Twitter or Facebook. When a user clicks the share button, Dart Frog creates a pre-populated post which contains text to share and a link to a website with the matching hand or card and a button for visitors to play the video game too!

Attempt it yourself

We hope you have actually had a possibility to attempt I/O FLIP which it motivates you to think of methods generative AI can be utilized in your items, securely and properly. We have actually open sourced the code for I/O FLIP so you can take a much deeper take a look at how we developed it too. If you wish to attempt your hand at a few of the generative AI innovations utilized in I/O FLIP, tune in to Google I/O for more information.