Membangun Game Multiplatform Menggunakan Flutter dan Back4app

pendahuluan flutter adalah kerangka kerja sumber terbuka yang serbaguna dari google yang memungkinkan pengembang untuk membangun aplikasi yang dikompilasi secara native untuk perangkat mobile, web, desktop, dan embedded dari satu basis kode meskipun flutter terutama dikenal untuk pengembangan aplikasi tradisional, ia semakin banyak digunakan untuk pengembangan game karena kinerjanya, ekosistem paket yang luas, dan fungsionalitas hot reload dalam panduan ini, kita akan membahas cara mengembangkan game gaya flappy bird multiplatform menggunakan flutter dan flame, sebuah mesin game yang dirancang untuk game 2d di flutter selain itu, kita akan menghubungkan game ke back4app, sebuah platform backend as a service (baas), untuk menyimpan skor pengguna dan menampilkan papan peringkat pada akhir panduan ini, anda akan memiliki versi game yang berfungsi yang berjalan di platform mobile dan web, dan akan menyimpan dan mengambil skor tinggi dari back4app prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan akun back4app daftar untuk akun gratis di back4app com https //www back4app com lingkungan pengembangan flutter telah disiapkan di mesin lokal anda ikuti panduan instalasi flutter https //flutter dev/docs/get started/install jika anda belum menyiapkannya pengetahuan dasar tentang dart, widget flutter, dan konsep pengembangan game langkah 1 – menyiapkan backend back4app anda buat proyek back4app masuk ke akun back4app https //dashboard back4app com/ anda dan buat proyek baru buat kelas parse untuk tutorial ini, kami akan menyiapkan backend sederhana untuk mengelola data terkait permainan di proyek back4app anda, buat dua kelas parse bernama pemain dan gamescore pemain menyimpan informasi pemain seperti nama pengguna, level, dan pencapaian gamescore menyimpan skor dan peringkat untuk permainan dapatkan kredensial back4app anda arahkan ke pengaturan proyek anda untuk mengambil id aplikasi dan kunci klien anda, yang anda perlukan untuk menghubungkan permainan flutter anda ke back4app langkah 2 – menyiapkan proyek flutter anda buat proyek flutter baru buka terminal atau command prompt anda dan jalankan tambahkan dependensi buka pubspec yaml dan tambahkan dependensi berikut inisialisasi parse di aplikasi anda di lib/main dart , impor sdk parse dan inisialisasi di fungsi main import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flame/flame dart'; import 'package\ flame/game dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(mygameapp()); } class mygameapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home gamescreen(), ); } } ganti 'your back4app app id' dan 'your back4app client key' dengan kredensial back4app anda yang sebenarnya langkah 3 – menyiapkan permainan menggunakan flame buat kelas permainan flame adalah mesin permainan sumber terbuka yang dibangun di atas flutter ini menyediakan alat dan api untuk membangun permainan 2d buat kelas permainan sederhana menggunakan flame import 'package\ flame/game dart'; import 'package\ flame/components dart'; class mysimplegame extends flamegame { @override future\<void> onload() async { super onload(); add(playercomponent()); } } class playercomponent extends positioncomponent { @override future\<void> onload() async { // load player sprite or set up player visuals here size = vector2(50, 50); // set size of the player position = vector2(100, 100); // set initial position // optionally, add sprite or animations } @override void update(double dt) { // update player state here } @override void render(canvas canvas) { super render(canvas); // draw player visuals final paint = paint() color = colors blue; canvas drawrect(size torect(), paint); } } 2\ buat layar permainan perbarui gamescreen widget untuk menampilkan permainan class gamescreen extends statelesswidget { @override widget build(buildcontext context) { return scaffold( body mysimplegame() widget, ); } } 3\ jalankan permainan anda sekarang dapat menjalankan aplikasi anda menggunakan flutter run untuk melihat permainan sederhana anda beraksi anda harus melihat kotak biru yang mewakili pemain langkah 4 – mengelola data permainan dengan back4app menyimpan data pemain selanjutnya, mari kita buat fungsi untuk menyimpan data pemain ke back4app ketika pemain naik level atau mencapai sesuatu future\<void> saveplayerdata(string username, int level, list\<string> achievements) async { final player = parseobject('player') set('username', username) set('level', level) set('achievements', achievements); final response = await player save(); if (response success) { print('player data saved successfully'); } else { print('failed to save player data'); } } 2\ mengambil skor tinggi anda juga dapat mengambil skor tinggi untuk permainan anda dari back4app untuk ditampilkan di papan peringkat future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } 3\ tampilkan papan peringkat gunakan listview\ builder dalam widget flutter untuk menampilkan 10 skor teratas class leaderboardscreen extends statefulwidget { @override leaderboardscreenstate createstate() => leaderboardscreenstate(); } class leaderboardscreenstate extends state\<leaderboardscreen> { list\<parseobject> highscores = \[]; @override void initstate() { super initstate(); fetchhighscores() then((scores) { setstate(() { highscores = scores; }); }); } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('leaderboard')), body listview\ builder( itemcount highscores length, itembuilder (context, index) { final score = highscores\[index]; return listtile( title text(score get\<string>('playerid') ?? 'unknown player'), subtitle text('score ${score get\<int>('score')}'), ); }, ), ); } } langkah 5 – menambahkan fitur lanjutan dengan flame jika anda ingin menambahkan mekanik permainan yang lebih kompleks, animasi, atau interaksi, anda dapat memperluas penggunaan flame dengan memperkenalkan komponen tambahan seperti sprite, fisika, dan deteksi tabrakan flame juga mendukung integrasi dengan firebase, memungkinkan fitur multiplayer, pembelian dalam aplikasi, dan lainnya kesimpulan dalam tutorial ini, anda belajar bagaimana menggunakan flutter dan flame untuk membangun permainan multiplatform sederhana dan bagaimana mengintegrasikan back4app untuk mengelola data permainan seperti profil pemain dan skor tinggi kemampuan flutter untuk diterapkan ke berbagai platform dari satu basis kode, dikombinasikan dengan layanan backend back4app yang kuat, menjadikannya tumpukan yang kuat untuk mengembangkan dan menskalakan permainan baik membuat permainan kasual sederhana atau pengalaman interaktif yang lebih kompleks, flutter dan back4app menyediakan alat untuk membangun, menerapkan, dan mengelola permainan anda dengan efisien untuk informasi lebih lanjut, lihat dokumentasi flutter https //flutter dev/docs dan dokumentasi back4app https //www back4app com/docs selamat coding!