它是如何制作的：I/O FLIP 为具有生成 AI 的经典纸牌游戏增添了变化

https://developers.googleblog.com/2023/05/how-its-made-io-flip-adds-twist-to.html

作者：Flutter & Dart 产品营销经理 Jay Chang 和机器学习产品营销经理 Glenn Cameron

I/O FLIP 是一款由 AI设计的经典纸牌游戏，由 Google 提供支持，旨在激发开发人员尝试使用 Google 的新生成 AI 技术实现的可能性。使用DreamBooth  on  Muse预先生成了数以千计的自定义角色图像 ，并使用PaLM API 编写了它们的描述 。游戏的 UI 和后端是用 Flutter 和 Dart 构建的，一套 Firebase 工具用于托管和共享，Cloud Run 用于帮助扩展。

当用户玩 I/O FLIP 时，他们：

1. 选择一个角色类别和一个力量来生成一包 12 张卡片
2. 从包中选择三张卡片来创建他们的团队
3. 加入一场比赛并赢得三局两胜
4. 连续赢得多场比赛以创造连胜纪录，从而有机会进入排行榜
5. 与来自全球各地的玩家分享他们的套牌

让我们深入了解一下我们是如何构建游戏的。

Flutter 和 Dart： 用户界面、全息图效果和后端

I/O FLIP 的游戏逻辑和 UI 建立在 Flutter Casual Games Toolkit功能提供的基础上，包括音频功能和通过 go_router 包进行的应用程序导航。由于 FLIP 是一个网络应用程序，它的响应性很重要  ——根据用户的屏幕大小调整大小，并且它从各种设备、移动设备、平板电脑和台式机接收输入。

FLIP 中的大部分逻辑都基于游戏卡，因此它们是一个很好的起点。每张卡片都包含四个 Google 吉祥物之一的图像：Dash、Sparky、Dino 和 Android，以及描述——两者的灵感都来自用户在游戏开始时选择的职业和力量。卡片还随机分配了一种元素力量（空气、水、火、金属、地球）和一个 10-100 之间的数字，表示卡片的强度。元素力量可以在比洞赛中相互影响，如下图所示。

元素的力量不只是为了表演。如上图所示，如果卡片位于元素匹配的错误端，它们将受到 10 分的惩罚。

说到对决，每场比赛都是三局两胜制。赢家继续用他们选择的手牌开始（或继续）他们的连胜，而输家可以分享他们的手牌或选择新手牌再次尝试。

新的 Flutter 和 Dart 功能帮助我们快速实现了这一点：例如， 记录，一个在 Flutter Forward 上宣布的 Dart 功能，帮助我们渲染基于卡片元素的框架，Flutter 对 网络片段着色器的官方支持 帮助我们创建一些卡片上的特殊全息图效果，这是游戏中唯一有 100 点的卡片。

Muse 和 PaLM API 上的 Dreambooth：  AI 生成的图像和描述

I/O FLIP 中的每张卡片都是独一无二的，因为它包含 AI 生成的图像和描述。

图像是使用 Google Research 开创的两项技术预先生成的：  Muse，一种来自 Imagen 模型系列的文本到图像 AI 模型，以及 DreamBooth，一种运行在 Muse 之上的技术，允许您个性化文本到-图像模型，使用您自己的一小组图像进行训练，生成特定主题的新颖图像。

 卡片描述在 MakerSuite 中制作原型，并使用访问 Google 大型语言模型的PaLM API预先生成 。根据玩家在游戏开始时选择的力量，您可能会得到一张卡片描述，为图像提供背景信息，包括角色的特殊力量，例如：“Dash the Wizard 和他的宠物龙住在城堡里。他喜欢施法，喜欢逗人笑。” 在此处加入 PaLM API 和 MakerSuite 候补名单 。

Flutter 用于使用 GameCard 小部件根据名称、描述、图像和电源组合卡片。创建卡片后，将应用指示其元素的边框。如果您有幸获得一张全息卡片，设计中将应用特殊的箔着色器效果。

Firebase： 游戏托管、共享和实时游戏

Cloud Storage for Firebase 存储生成玩家牌组的所有图像、描述、元素和数字。 Firestore 跟踪“最高连胜”的排行榜，并使用 firedart 包添加新的领导者。

在 Flutter 应用程序直接访问 Firestore 的所有情况下，我们都使用 App Check 来确保只允许我们自己编写的代码，并且我们使用 Firebase 安全规则来确保代码只能访问数据并进行更改授权给。

Dart Frog： 在后端和前端之间共享代码

I/O FLIP 需要更多的方法来防止作弊。这就是 Dart Frog 派上用场的地方。它允许我们将游戏逻辑（例如每一轮的获胜者）保留在后端，并且在 Flutter 前端和 Firestore 后端之间共享此代码，这不仅有助于防止作弊，还可以让团队移动只是快了一点，因为我们用同一种语言编写后端和前端代码。

I/O FLIP 在很多玩家在线玩的时候最有趣。通过将 I/O FLIP Dart Frog 服务器部署到 Cloud Run，该游戏可以利用自动缩放等功能，从而可以同时处理许多玩家。

最后，Dart Frog 还支持在社交媒体上下载或分享卡片。在一轮结束时，玩家可以选择下载或分享到 Twitter 或 Facebook。当用户点击分享按钮时，Dart Frog 会生成一个预填充的帖子，其中包含要分享的文本和一个指向带有相应手牌或卡片的网页的链接，以及一个供访问者玩游戏的按钮！

自己试试

我们希望您有机会尝试 I/O FLIP  ，并希望它能激发您思考如何安全、负责任地在您的产品中使用生成式 AI。我们已经 开源了 I/O FLIP 的代码 ，因此您也可以更深入地了解我们是如何构建它的。如果您想尝试使用 I/O FLIP 中的一些生成式 AI 技术，请收听 Google I/O 以了解更多信息。