原理大揭秘:I/O FLIP 借助生成式 AI 为经典纸牌游戏注入新元素

五月 09, 2023
Jay Chang Product Marketing Manager for Flutter & Dart and Glenn Cameron, Product Marketing Manager for Machine Learning

I/O FLIP 是一款由 AI 设计的经典纸牌游戏,由 Google 提供技术支持,旨在激励开发者尝试 Google 的全新生成式 AI 技术。该游戏中的数千个自定义角色图像是使用 Muse 上的 DreamBooth 预生成的,其描述是使用 PaLM API 编写的。游戏界面和后端是在 Flutter 和 Dart 中构建的。Firebase 工具套件被用于游戏的托管和共享,而 Cloud Run 则用于帮助游戏进行扩展。

当用户进入 I/O FLIP 游戏后:

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

下面让我们来了解一下我们是如何构建这款游戏的。

Flutter 和 Dart:界面、全息效果和后端

I/O FLIP 的游戏逻辑和界面基于 Flutter 休闲游戏工具包的功能而构建,包括音频功能和通过 go_router 软件包实现的应用导航功能。由于 FLIP 是一个 Web 应用,因此它的响应能力非常重要,它需要能够根据用户的屏幕大小进行调整,并且可以接受来自各种设备(手机、平板电脑和桌面电脑)的输入。

FLIP 中的大部分逻辑都基于游戏卡,因此让我们首先来看看卡牌的构建。每张卡牌包含一个 Google 吉祥物(Dash、Sparky、Dino 和 Android 四者中的任意一个)的图像和相应的描述。这两者的设定主要来自用户在游戏开始时选择的职业和力量。卡牌还随机分配一种元素力量(空气、水、火、金属、土)和一个 10-100 之间的数字(表示卡牌的强度)。元素力量可以在比赛中相互影响,如下图所示。

ioflip

元素力量不是为了美化卡牌。如果卡牌的元素受到克制,那该卡牌将受到 10 分的削弱。如上图所示。

至于对决,每场比赛都是三局两胜制。获胜者可以继续用他们选择的手牌开始(或继续)比赛,而输的一方可以分享他们的手牌或选择新手牌再次开始。

Flutter 和 Dart 的全新功能可帮助我们快速实现上述支持:例如,在 Flutter Forward 上公布的 Dart 功能 records 可渲染基于卡牌元素的帧;Flutter 对网页上片段着色器的官方支持帮助我们在一些卡牌上创建了特殊的全息效果,这些卡牌是游戏中唯一具有 100 分的卡牌。

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

ioflip2

I/O FLIP 中的每张卡牌都很特殊,因为它包含 AI 生成的图像和描述。

卡牌上的图像使用 Google 研究的两项开创性技术预先生成:Muse,一种来自 Imagen 模型系列的文本到图像 AI 模型;DreamBooth,一种在 Muse 之上运行的技术,可让您打造个性化的文本到图像模型,以使用您自己的一小组图像进行训练,生成特定主题的新图像。

卡牌描述在 MakerSuite 中进行了原型设计,并使用可访问 Google 大型语言模型的 PaLM API 进行了预生成。根据玩家在游戏开始时选择的力量,玩家会得到一张卡牌描述。该描述可为图像提供背景信息,包括角色的特殊力量,例如:“Dash 巫师和他的宠物龙住在城堡里。他喜欢施展咒语,逗人发笑。”点击此处加入 PaLM API 和 MakerSuite 的等待列表。

Flutter 用于使用 GameCard Widget,根据名称、描述、图像和能力组合卡牌。创建卡牌后,对应的元素的边框也随之生成。如果您幸运地获得了全息卡牌,那么卡牌还将应用特殊的金属质感效果。

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

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

在所有直接访问 Firestore 的 Flutter 应用中,我们使用了 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 大会以了解更多信息。