Link to Youtube Video (visible only when JS is disabled)
"Purrfect Code" adalah game teka-teki pemrograman dorong-kotak baru, yang didukung oleh Flutter, Dart, dan game engine Flame serta dirancang untuk menantang developer memecahkan teka-teki dengan menulis kode.
Dalam "Purrfect Code," pemain ditugaskan mengupdate pemrograman robot petugas kebersihan di markas stasiun luar angkasa baru Google ketika kiriman kucing datang secara keliru. Tujuan game ini adalah membantu robot mengumpulkan kotak-kotak yang berisi kucing tersebut secara aman dan mendorongnya ke pelat teleporter agar mereka bisa pulang ke rumah. Pemain menulis JavaScript untuk mengontrol gerakan robot sembari mencoba menemukan solusi yang efisien untuk menyelesaikan teka-teki berbasis grid.
Game ini adalah cara yang menyenangkan untuk mengeksplorasi coding, menggunakan kecerdasan dan kreativitas Anda. Setiap level berfokus pada konsep pemrograman dan secara perlahan kompleksitasnya meningkat selama lima level dalam game.
Game loop berjalan seperti berikut ini:
2. Mereka kemudian menjalankan kodenya dan melihat robot mencoba menyelesaikan level tersebut
3. Level ini selesai ketika semua kotak yang berisi kucing didorong ke pelat teleporter
4. Pemain dinilai berdasarkan efisiensi solusinya, termasuk jumlah ruang yang dipindahkan dan keringkasan kodenya
Kami memilih membangun "Purrfect Code" menggunakan Flutter dan Dart, karena keduanya menyediakan framework yang kuat dan fleksibel untuk membuat aplikasi dan game multiplatform. Sistem widget dan model pemrograman reaktif Flutter memungkinkan kami membuat antarmuka pengguna yang responsif untuk berbagai ukuran layar di browser. Fitur pemrograman Dart yang sangat kuat dan berorientasi objek mempermudah penyusunan kode dan menjaga codebase kami tetap bersih. Game engine Flame, yang dibangun berbasis Flutter, menawarkan fondasi yang bagus untuk fitur-fitur dasar yang diperlukan untuk pengembangan game, sehingga kami dapat fokus pada logika gameplay dan berbagai aspek unik dari game ini. Flutter dan Flame adalah pilihan yang tepat untuk project ini karena karakter Purrfect Code yang unik sebagai game/aplikasi hibrida dengan UI yang terinspirasi dari IDE dan tampilan game dengan animasi sprite dan suara.
Setelah menentukan konsep pemrograman untuk game ini, kami harus memilih bahasa pemrograman yang akan digunakan oleh para pemain. Kami menginginkan sesuatu yang familier dan populer di kalangan developer. Awalnya kami mempertimbangkan menggunakan Python sebagai bahasa pemrograman dalam game. Namun, setelah beberapa pertimbangan, kami memutuskan menggunakan JavaScript untuk memanfaatkan dukungan JavaScript bawaan yang disediakan Chrome. Dengan menggunakan JavaScript, kami bisa memanfaatkan kemampuan native browser tanpa perlu memuat penerjemah bahasa tambahan. Keputusan ini tidak hanya menyederhanakan proses pengembangan kami, tetapi juga memastikan pengalaman yang mulus bagi pemain, karena game dapat dimuat secara cepat dengan dependensi minimal.
Rilis Flutter 3.22 di Google I/O tahun ini memperkenalkan dukungan stabil untuk WebAssembly (WASM) yang memungkinkan kami mengoptimalkan bagian performa terpenting dalam game. Dengan mengompilasi logika game tertentu ke WASM, kami memastikan bahwa "Purrfect Code" berjalan secara efisien di browser, memberikan pengalaman bermain game yang mulus dan responsif tanpa mengorbankan performa.
var dir = [moveEast,moveNorth,moveWest,moveSouth];
for(i=0;i<4;i++){
for(j=0;j<5;j++)dir[i]();
}
Untuk menghidupkan "Purrfect Code", kami menggunakan Game Engine Flame, sebuah game engine modular open source berbasis Flutter yang menyediakan banyak fitur yang dibutuhkan untuk pengembangan game. Flame memanfaatkan infrastruktur Flutter yang andal sekaligus menyederhanakan kode yang dibutuhkan untuk membangun project kami. Flame menawarkan implementasi game loop yang sederhana tetapi efektif dan berbagai fungsionalitas penting, seperti pemutaran audio, manajemen sprite, fitur animasi, tabrakan, dan Flame Component System (FCS). Arsitektur berbasis komponen, rendering sprite, dan dukungan animasi dari engine ini memungkinkan kami menciptakan grafik yang menarik secara visual, animasi yang halus, dan elemen gameplay yang interaktif tanpa harus membuat semuanya dari awal. Pemanfaatan Flame, membuat proses pengembangan semakin efisien dengan fitur-fitur penting yang sudah tersedia, sehingga kami dapat fokus untuk menciptakan pengalaman bermain yang menarik bagi pemain.
Sistem rendering sprite dan animasi Flame memungkinkan kami menghidupkan karakter dan lingkungan game tanpa harus menulis kode grafik. Kami bisa membuat sprite sheet, menentukan urutan animasi, dan menganimasikan gerakan karakter serta efek khusus dengan baik. Kami menggunakan sistem prioritas Flame untuk menulis sistem pengurutan visual untuk perspektif game "top down" kami. Artis kami membuat level dengan banyak fitur yang tumpang tindih untuk meningkatkan kesan mendalam pada sprite dan memberikan tampilan game yang tidak terlalu "seperti grid". Kami harus memastikan bahwa ketika robot bergerak di belakangnya, robot tersebut akan tertutupi dengan benar. Sistem prioritas Flame memungkinkan kami menetapkan prioritas pada elemen visual berbeda, yang memastikan bahwa elemen-elemen tersebut digambar dengan urutan yang benar dan saling tumpang tindih dengan tepat. Sistem ini cukup fleksibel bagi kami untuk menyertakan sistem bayangan dengan masing-masing komponen dapat menampilkan animasi bayangan yang mencerminkan tindakan objek dan memberi kesan mendalam sehingga membuat adegan terlihat lebih hidup dan lebih mudah dipahami secara visual.
Class BoxShadow dalam codebase kami adalah contoh bagus untuk hal ini dan menunjukkan bagaimana kami membuat bayangan yang dinamis dan interaktif untuk objek kotak yang bergerak dalam game. Dengan memperluas SpriteAnimationComponent dan mengimplementasikan campuran GridElement dan HasVisibility, kami bisa memuat sprite sheet untuk bayangan kotak dan animasi teleportasi kotak, menentukan beberapa animasi untuk status teleportasi, terbuka, tertutup, dan tidak ada aktivitas, serta mengintegrasikannya ke dalam tata letak berbasis grid. Metode onLoad memuat animasi dan menetapkan posisi awal serta prioritas komponen berdasarkan posisi grid, sementara metode update memastikan bahwa komponen prioritas diupdate secara dinamis jika kotak bergerak di depan atau di belakang objek yang menghalangi. Dengan menggunakan sistem animasi dan prioritas Flame seperti ini, kami dapat menciptakan efek bayangan yang senantiasa membantu pengguna untuk memahami ruang virtual secara visual dan membuatnya lebih realistis serta menghasilkan presentasi visual yang lebih terintegrasi.
Cuplikan dari box_shadow.dart, lihat class lengkapnya di GitHub untuk mempelajari lebih lanjut.
@override
Future<void> onLoad() async {
await _loadAnimations().then((_) => {animation = _boxClosed});
position.add(Vector2(
((gridPosition.x * gridPixelDimensions.x) + gridPixelOffset.x),
((gridPosition.y * gridPixelDimensions.y) + gridPixelOffset.y)));
priority = getLayeredGridValue();
}
@override
void update(double dt) async {
super.update(dt);
if (getLayeredGridValue() != priority) {
priority = getLayeredGridValue();
}
}
Karena kami ingin menjaga cakupan game tetap kecil, dan menerapkannya sebagai halaman web sederhana, kami menghindari pengaturan backend untuk game. Namun, kami menginginkan suatu cara bagi developer untuk mendapatkan reward atas progres mereka, mirip dengan sistem pencapaian di platform game populer. Alih-alih membangun sistem backend terpisah untuk melacak progres dan pencapaian pemain, kami mengintegrasikannya dengan Program Developer Google dengan mengizinkan pemain untuk mengklik link dan mengumpulkan badge di profilnya setelah mereka menyelesaikan sebuah level, sehingga memberikan rasa pencapaian dan pengakuan di dalam komunitas developer.
Selama pengembangan "Purrfect Code", kami memanfaatkan Project IDX Google, ruang kerja berbantuan AI untuk pengembangan aplikasi multi-platform full-stack di cloud. Karena kami sudah merasa nyaman bekerja di VS Code, Project IDX menyediakan lingkungan yang familier untuk pengkodean, debugging, dan pengujian game kami dan memungkinkan kami untuk memulai dan menjalankannya dengan cepat. Dengan Flutter dan Dart yang sudah disiapkan dan siap digunakan di browser, kita dapat langsung terjun ke pengembangan tanpa perlu repot mengonfigurasi lingkungan lokal. Penyelesaian kode yang cerdas, pemeriksaan kesalahan waktu nyata, dan alat debugging terintegrasi yang ditawarkan oleh Project IDX membantu kami menjaga produktivitas tetap tinggi. Jika Anda penasaran, Project IDX adalah cara terbaik untuk mencoba Purrfect Code dengan cepat dan menjelajahi kodenya langsung dari browser Anda. Klik link ini untuk membuka proyek langsung di IDX dan menjalankan proyek sendiri. Pastikan untuk mencentang kotak yang menanyakan apakah ini adalah aplikasi Flutter.
Kami memilih Firebase Hosting untuk memastikan peluncuran Purrfect Code ke seluruh dunia secara aman dan efisien. Platform SSL tanpa konfigurasi ini menjamin konten disalurkan melalui HTTPS sehingga meningkatkan keamanan. Selain itu, dukungannya untuk framework web modern dan build otomatis dari repositori GitHub memungkinkan deployment update yang cepat. Firebase CLI, emulasi lokal, dan URL pratinjau menyederhanakan proses pengujian dan kolaborasi kami. Fitur-fitur ini, ditambah dengan potensi evolusi game di masa depan yang memanfaatkan template contoh Gemini untuk integrasi AI, yang menjadikan Firebase Hosting pilihan ideal untuk meluncurkan game kami.
Purrfect Code menggunakan Web Assembly yang membutuhkan beberapa langkah tambahan selama deployment. Dalam konfigurasi firebase.json, kami menambahkan perintah predeploy yang memungkinkan build web kami dibangun dengan WASM. Argumen “--no-strip-wasm” mencegah kode berjalan melewati satu langkah minimalisasi terakhir yang membuat error semakin sulit dibaca dan di-debug. WASM juga memerlukan cross-origin opener policy dan cross origin embedder policy untuk multi-threading dan berbagi memori.
"hosting": {
"predeploy": "flutter build web --wasm",
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*"
],
"headers": [
{
"source": "**/*",
"headers": [
{
"key": "cross-origin-opener-policy",
"value": "same-origin"
},
{
"key": "cross-origin-embedder-policy",
"value": "require-corp"
}
]
}
]
}
Selama pengembangan "Purrfect Code," kami menggunakan berbagai referensi dan mendapatkan inspirasi dari project-project yang sudah ada, yang diharapkan dapat menambahkan project ini. Berikut adalah beberapa materi pembelajaran dan referensi utama yang kami anggap penting:
Kami menggunakan game Super Dash dan I/O Flip sebagai referensi untuk praktik terbaik dan ide implementasi. Kedua project ini memberikan insight yang penting dalam menyusun game Flutter, menangani status game, dan mengimplementasikan mekanisme game. Super Dash secara langsung relevan karena sederhana dan tidak memerlukan layanan backend, seperti game kami. I/O Flip lebih besar dan mendukung backend serta fitur AI generatif sehingga mungkin menarik bagi developer yang membangun game yang membutuhkan fitur-fitur tersebut. Keduanya merupakan referensi yang penting jika Anda tertarik untuk membuat game di Flutter.
Kami berharap "Purrfect Code" tidak hanya memberikan pengalaman bermain game yang menyenangkan tetapi juga berfungsi sebagai sumber pembelajaran bagi pengembang yang tertarik dalam pengembangan game dengan Flutter dan Flame. Kombinasi Flutter, Flame dan Chrome terbukti sangat cocok untuk game/aplikasi hybrid kami, memberikan kami dasar yang kuat untuk pengembangan UI, rendering grafis, manajemen suara, dan banyak lagi. Kami mendorong Anda untuk menjelajahi kode sumber permainan dan bereksperimen dengan memperluasnya lebih jauh. Ada banyak kemungkinan untuk menambahkan fitur, level, dan mekanisme gameplay baru. Masuk ke basis kode di Project IDX, centang kotak yang menanyakan apakah ini aplikasi Flutter, dan biarkan kreativitas Anda menjadi liar!
Learn to build and run AI powered apps at Firebase Demo Day ‘24
Inferensi dengan Gemma menggunakan Dataflow dan vLLM
Lima Tahun Inovasi: Mahasiswa developer memecahkan masalah di dunia nyata menggunakan teknologi Google
Bagaimana Kami Membuatnya: Teka-teki silang I/O
Rekap Web AI Summit 2024: AI Sisi Klien untuk Developer