制作の過程: 生成 AI でクラシックなカードゲームをひとひねりした I/O FLIP

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

Google の I/O FLIP は、クラシックなカードゲームを AI でデザインしたものです。このゲームを作成したのは、Google の新しい生成 AI テクノロジーの可能性をデベロッパーの皆さんに試してもらいたいからです。たくさんのカスタム キャラクター画像は Muse を使った DreamBooth で事前に生成したもので、説明の記述には PaLM API を使いました。ゲームの UI とバックエンドは Flutter と Dart でできており、ホスティングや共有には一連の Firebase ツールを、スケーリングには Cloud Run を利用しています。

I/O FLIP のプレイ方法は次のとおりです。

  1. キャラクターのクラスとパワーを選択し、12 枚のカードのパックを生成する
  2. パックから 3 枚のカードを選んでチームを作る
  3. 試合に参加し、2 点先取の 3 番勝負に勝利する
  4. 試合に連勝すると、リーダーボードに掲載される可能性がある
  5. 世界各国のプレーヤーとデッキを共有する

以下では、どのようにしてこのゲームを開発したかについて詳しく説明します。

Flutter と Dart: ユーザー インターフェース、ホログラム効果、バックエンド

I/O FLIP のゲームロジックと UI は、Flutter カジュアル ゲーム ツールキットの機能(オーディオ機能や go_router パッケージによるアプリのナビゲーションなど)を土台として開発しています。FLIP はウェブアプリなので、レスポンシブであることが重要でした。つまり、ユーザーの画面サイズに応じてサイズを変更し、モバイル、タブレット、デスクトップなどのさまざまなデバイスからの入力を受け取れるようにするということです。

FLIP のほとんどのロジックは、ゲームのカードに基づいているため、この点から始めましょう。各カードには、Dash、Sparky、Dino、Android という 4 つの Google マスコットのいずれかの画像と説明が含まれています。どちらも、ゲーム開始時にユーザーが選択したクラスとパワーが影響しています。カードには、エレメンタル パワー(空気、水、火、金属、土)と、カードの強さを示す 10~100 の数字がランダムに割り当てられます。次の画像で示すように、エレメンタル パワーは試合中にお互いに影響を与え合う可能性があります。

ioflip

エレメンタル パワーは見た目の違いだけではありません。上の画像で説明されているように、対戦時に不利な側に置かれたエレメントには、10 ポイントのペナルティが科されます。

対戦について説明すると、1 つの試合は 2 点先取の 3 番勝負です。勝者は選択した手札でプレイを続け、連勝を開始(または継続)します。一方、敗者は手札を共有したり、新しい手札を選んでもう一度やり直すことができます。

Flutter と Dart の新機能のおかげで、これを短時間で実現することができました。たとえば、Flutter Forward で発表されたレコードという Dart 機能は、カードのエレメントに応じたフレームをレンダリングする際に役立ちました。また、Flutter はウェブでフラグメント シェーダーを正式にサポートしているため、ゲームで 100 ポイントのカードだけに適用される特別なホログラム効果を作ることができました。

Muse と Dreambooth、そして PaLM API: 画像と説明を AI で生成する

ioflip2

I/O FLIP の各カードは 1 枚しか存在しません。画像と説明を AI が生成しているからです。

画像は、Google Research が開発した MuseDreamBooth という 2 つのテクノロジーを使って事前に生成しました。Muse は Imagen モデル ファミリーのテキスト画像変換 AI モデルです。また、DreamBooth は Muse を使って実行する技術で、少数の独自画像でトレーニングすることでテキスト画像変換モデルをパーソナライズし、特定のテーマの新しい画像を生成できます。

カードの説明は MakerSuite を使ってプロトタイプを作成し、Google の大規模言語モデルにアクセスする PaLM API を使って事前に生成しています。プレーヤーがゲーム開始時に選択したパワーに基づいて、キャラクターの特別な能力など、画像に対応した説明が現れます。たとえば、「ダッシュ・ザ・ウィザードはペットのドラゴンと一緒に城に住んでいます。呪文を唱えたり、人を笑わせるのが大好きです」のような説明です。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 で詳細をご確認ください。