I/O FLIP adalah permainan kartu klasik yang dirancang dengan menggunakan AI, didukung oleh Google, dan dibuat untuk menginspirasi developer bereksperimen dengan berbagai hal yang dapat dilakukan dengan teknologi AI generatif Google. Ribuan gambar karakter khusus telah dibuat sebelumnya dengan DreamBooth di Muse dan deskripsinya ditulis menggunakan PaLM API. UI dan backend game ini dibuat dengan Flutter dan Dart, rangkaian alat Firebase digunakan untuk hosting serta berbagi, dan Cloud Run digunakan untuk membantu meningkatkan kapasitas.
Ketika pengguna memainkan I/O FLIP, mereka:
Mari kita pelajari tentang cara kami membuat game ini.
Logika game dan UI I/O FLIP dibangun di atas fondasi yang disediakan oleh fitur-fitur dari Flutter Casual Games Toolkit, termasuk fungsionalitas audio dan navigasi aplikasi melalui paket go_router. Karena FLIP adalah aplikasi web, maka sangatlah penting bahwa aplikasi ini responsif – mengubah ukuran bergantung pada ukuran layar pengguna dan menerima input dari berbagai perangkat, baik seluler, tablet, maupun desktop.
Sebagian besar logika dalam FLIP berdasar pada kartu permainan, jadi di sinilah tempat yang baik untuk memulai. Setiap kartu terdiri dari gambar salah satu empat maskot Google: Dash, Sparky, Dino, dan Android, serta sebuah deskripsi – keduanya terinspirasi dari kelas dan kekuatan yang dipilih pengguna di awal permainan. Kartu juga secara acak diberi kekuatan elemen (udara, air, api, logam, tanah) dan angka antara 10-100 yang menunjukkan kekuatan kartu. Kekuatan elemen dapat mempengaruhi satu sama lain dalam pertandingan, seperti yang ditunjukkan pada gambar di bawah ini.
Kekuatan elemen bukan hanya untuk pajangan. Kartu menerima penalti 10 poin jika berada di posisi yang merugikan dalam pertarungan elemen, seperti yang dijelaskan pada gambar di atas.
Berbicara tentang pertarungan, setiap pertandingan bersistem best-of-3. Pemenang terus bermain dengan kartu yang mereka pilih untuk memulai (atau melanjutkan) kemenangan beruntun mereka, sementara yang kalah dapat membagikan kartu mereka atau memilih kartu baru untuk mencobanya lagi.
Fitur Flutter dan Dart baru membantu kami dengan cepat mewujudkannya: Sebagai contoh, catatan, fitur Dart yang diumumkan di Flutter Forward, membantu kami merender bingkai berdasarkan elemen kartu, dan dukungan resmi Flutter untuk fragment shader di web membantu kami membuat efek hologram khusus pada beberapa kartu, yang merupakan satu-satunya kartu di dalam game yang memiliki 100 poin.
Setiap kartu dalam I/O FLIP bersifat unik karena berisi gambar dan deskripsi yang dibuat AI.
Gambar-gambar tersebut dibuat sebelumnya menggunakan dua teknologi yang dipelopori Tim Riset Google: Muse, model AI teks-ke-gambar dari keluarga model Imagen, dan DreamBooth, sebuah teknik yang berjalan di atas Muse yang memungkinkan Anda mempersonalisasi model teks-ke-gambar untuk membuat gambar baru dari subjek tertentu menggunakan sekumpulan kecil gambar Anda sendiri untuk pelatihan.
Deskripsi kartu dibuat prototipenya di MakerSuite dan dibuat sebelumnya menggunakan PaLM API yang mengakses model bahasa besar Google. Berdasarkan kekuatan yang dipilih pemain di awal permainan, Anda bisa mendapatkan deskripsi kartu yang memberikan konteks pada gambar, termasuk kekuatan khusus karakter seperti: "Dash si Penyihir tinggal di kastel bersama naga peliharaannya. Dia suka merapal mantra dan membuat orang tertawa." Bergabunglah dengan daftar tunggu PaLM API dan MakerSuite di sini.
Flutter digunakan untuk menyusun kartu dari nama, deskripsi, gambar, dan kekuatan menggunakan widget GameCard. Setelah kartu dibuat, batas yang menunjukkan elemennya diterapkan. Jika Anda cukup beruntung untuk mendapatkan kartu hologram, efek foil shader khusus akan diterapkan pada desain.
Cloud Storage for Firebase menyimpan semua gambar, deskripsi, elemen, dan angka yang menyusun dek kartu pemain. Firestore melacak papan peringkat untuk "Kemenangan Beruntun Tertinggi" dengan posisi teratas baru yang ditambahkan menggunakan paket firedart.
Dalam semua kasus ketika aplikasi Flutter mengakses Firestore secara langsung, kami menggunakan App Check untuk memastikan bahwa hanya kode yang kami tulis sendiri yang diizinkan, dan kami menggunakan aturan keamanan Firebase untuk memastikan bahwa kode tersebut hanya dapat mengakses data dan membuat perubahan yang diizinkan.
I/O FLIP membutuhkan lebih banyak cara untuk mencegah kecurangan. Di sinilah Dart Frog sangat berguna. Dart Frog memungkinkan kami menyimpan logika permainan, seperti pemenang setiap putaran, di backend, tetapi juga membagikan kode ini antara frontend Flutter dan backend Firestore, yang tidak hanya membantu mencegah kecurangan, tetapi juga memungkinkan tim untuk bergerak sedikit lebih cepat, karena kami menulis kode frontend dan backend dalam bahasa yang sama.
I/O FLIP paling menyenangkan ketika banyak pemain online dan bermain. Dengan men-deploy server I/O FLIP Dart Frog ke Cloud Run, game bisa memanfaatkan fitur seperti autoscaling, yang memungkinkannya menangani banyak pemain sekaligus.
Terakhir, Dart Frog juga memungkinkan download atau berbagi kartu di media sosial. Di akhir ronde, pemain bisa memilih untuk mendownload atau membagikannya ke Twitter atau Facebook. Ketika pengguna mengklik tombol bagikan, Dart Frog akan membuat postingan yang terisi otomatis yang berisi teks untuk dibagikan dan link ke halaman web dengan kartu yang sesuai serta tombol bagi pengunjung untuk memainkan permainan ini juga!
Kami harap Anda memiliki kesempatan untuk mencoba I/O FLIP dan ini menginspirasi Anda untuk memikirkan berbagai cara agar AI generatif dapat digunakan di produk Anda, dengan aman dan bertanggung jawab. Kami telah menyediakan kode open source untuk I/O FLIP sehingga Anda dapat melihat lebih mendalam mengenai cara kami membuatnya. Jika Anda ingin mencoba beberapa teknologi AI generatif yang digunakan di I/O FLIP, buka Google I/O untuk mempelajari lebih lanjut.