Detalhes da criação: o I/O FLIP dá um toque especial a um jogo clássico de cartas com IA generativa

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

O I/O FLIP é uma versão feita com IA de um jogo clássico de cartas, desenvolvido pelo Google e criado para inspirar os desenvolvedores a experimentar o que é possível com as novas tecnologias de IA generativa do Google. Milhares de imagens personalizadas de personagens foram pré-geradas com o DreamBooth no Muse, e as descrições foram escritas usando a API PaLM. A IU e o back-end do jogo foram criados no Flutter e no Dart, um conjunto de ferramentas do Firebase foi usado para hospedagem e compartilhamento, e o Cloud Run foi usado para ajudar na escala.

Ações realizadas pelo usuário ao jogar o I/O FLIP:

  1. Selecionar uma classe de personagem e um poder para gerar um pacote de 12 cartas
  2. Selecionar três cartas do pacote para criar a equipe
  3. Participar de uma partida e vencer uma melhor de 3
  4. Vencer várias partidas seguidas para criar uma série de vitórias e ter a chance de entrar na tabela de classificação
  5. Compartilhar o conjunto de cartas com jogadores de todo o mundo

Vamos conferir os detalhes sobre como o jogo foi criado.

Flutter e Dart: interface do usuário, efeitos de holograma e back-end

A lógica do jogo e a IU do I/O FLIP foram criadas com base em recursos do Flutter Casual Games Toolkit, incluindo funcionalidade de áudio por meio do pacote go_router. Como o FLIP é um app da Web, era importante que ele fosse responsivo, redimensionando de acordo com o tamanho da tela do usuário e da entrada de vários dispositivos, celulares, tablets e computadores.

Grande parte da lógica do FLIP é baseada nas cartas do jogo, então vamos começar por elas. Cada carta consiste em uma imagem de um dos quatro mascotes do Google (Dash, Sparky, Dino e Android) e uma descrição. A imagem e a descrição são inspiradas na classe e no poder que o usuário seleciona no início do jogo. As cartas também recebem aleatoriamente um poder elemental (ar, água, fogo, metal, terra) e um número entre 10-100 indicando a força da carta. Os poderes elementais podem impactar uns aos outros em partidas, conforme indicado na imagem abaixo.

ioflip

Os poderes elementais não são apenas ilustrativos. As cartas recebem uma penalidade de 10 pontos se estiverem no lado errado de uma combinação de elementos, como explicado nas imagens acima.

As partidas são organizadas em turnos de melhor de 3. O vencedor continua jogando com a mão escolhida para iniciar (ou continuar) a sequência, enquanto o perdedor pode compartilhar a mão ou escolher uma nova mão para tentar novamente.

Os novos recursos do Flutter e do Dart nos ajudaram a dar vida a isso rapidamente: por exemplo, os registros, um recurso do Dart anunciado no Flutter Forward, nos ajudaram a renderizar um quadro com base no elemento da carta, e o suporte oficial do Flutter para shaders de fragmento na Web foi útil para criarmos um efeito especial de holograma em algumas cartas, que são as únicas do jogo que possuem 100 pontos.

DreamBooth no Muse e API PaLM: imagens e descrições geradas por IA

ioflip2

Cada carta no I/O FLIP é única porque contém uma imagem e uma descrição geradas por IA.

As imagens foram pré-geradas usando duas tecnologias pioneiras no Google Research: o Muse, um modelo de texto para imagem gerado por IA da família de modelos Imagen; e o DreamBooth, uma técnica executada no Muse que permite personalizar modelos de texto para gerar novas imagens de um assunto específico usando um pequeno conjunto de suas próprias imagens para treinamento.

As descrições das cartas foram prototipadas no MakerSuite e pré-geradas usando a API PaLM, que acessa os modelos de linguagem grandes do Google. Com base no poder que o jogador seleciona no início do jogo, você pode ter uma descrição da carta para dar contexto à imagem, incluindo os poderes especiais do personagem, como: “Dash, o Mago, vive em um castelo com seu dragão de estimação. Ele adora lançar feitiços e fazer as pessoas rir”. Acesse este link para fazer parte da lista de espera da API PaLM e do MakerSuite.

O Flutter é usado para compor as cartas com base no nome, na descrição, na imagem e no poder, por meio do widget GameCard. Após a criação da carta, é aplicada uma borda indicando o elemento dela. Se você tiver sorte o suficiente para conseguir uma carta de holograma, um efeito de shader especial será aplicado ao design.

Firebase: hospedagem de jogos, compartilhamento e jogabilidade em tempo real

O Cloud Storage para Firebase armazena todas as imagens, descrições, elementos e números que geram conjuntos de cartas para os jogadores. O Firestore mantém o controle da tabela de classificação para "Maior sequência de vitórias" com novos líderes adicionados usando o pacote firedart.

Em todos os casos em que o app Flutter acessa diretamente o Firestore, nós usamos o App Check para garantir que apenas o código que escrevemos seja permitido. Também usamos as regras de segurança do Firebase para garantir que o código só possa acessar dados e fazer alterações para as quais tenha autorização.

Dart Frog: compartilhamento de código entre o back-end e o front-end

O I/O FLIP precisava de mais maneiras de evitar trapaças. É aqui que o Dart Frog é útil. Ele nos permitiu manter a lógica do jogo, como o vencedor de cada rodada, no back-end, mas também compartilhar esse código entre o front-end do Flutter e o back-end do Firestore. Além de evitar trapaças, a equipe teve maior agilidade, já que escrevemos o código de back-end e front-end na mesma linguagem.

O I/O FLIP é mais divertido quando muitos jogadores estão on-line e jogando. Ao implantar o servidor Dart Frog do I/O FLIP para o Cloud Run, o jogo pode aproveitar recursos como escalonamento automático, que permite lidar com muitos jogadores ao mesmo tempo.

O Dart Frog também permite fazer o download ou compartilhar as cartas nas redes sociais. No fim de uma rodada, o jogador pode optar pelo download ou compartilhamento no Twitter ou Facebook. Quando um usuário clica no botão de compartilhamento, o Dart Frog gera uma postagem pré-preenchida com um texto e um link para uma página da Web com a mão ou carta correspondente, além de um botão para os visitantes jogarem também.

Sua vez de tentar

Esperamos que você tenha a chance de jogar o I/O FLIP e que ele inspire a reflexão sobre maneiras como a IA generativa pode ser usada em seus produtos, de forma segura e responsável. Nós disponibilizamos o código aberto do I/O FLIP para você conferir os detalhes da criação do jogo. Se quiser testar algumas das tecnologias de IA generativa usadas no I/O FLIP, confira o Google I/O.