More
Cara Membangun Game Endless Runner Lanjutan Menggunakan Flutter, Toolkit Game Kasual, dan Back4app
50 mnt
pendahuluan permainan kasual populer karena kesederhanaannya dan gameplay yang menarik, sering kali memikat audiens yang luas dengan mekanik yang mudah dipelajari dalam tutorial lanjutan ini, kita akan mengembangkan permainan pelari tanpa akhir yang sepenuhnya fungsional menggunakan toolkit permainan kasual flutter kita akan mengintegrasikan back4app untuk mengelola backend permainan, menyimpan data pengguna seperti skor tertinggi, profil pemain, dan pencapaian kita juga akan membahas topik lanjutan seperti manajemen status, optimisasi kinerja, dan strategi penyebaran pada akhir tutorial ini, anda akan memiliki permainan pelari tanpa akhir yang sudah dipoles siap untuk disebarkan di android dan ios, lengkap dengan persistensi data dan fitur yang ditingkatkan prasyarat sebelum anda mulai, pastikan anda memiliki hal hal berikut lingkungan pengembangan flutter terinstal dan dikonfigurasi ikuti panduan instalasi flutter resmi https //flutter dev/docs/get started/install jika anda belum mengaturnya pengetahuan flutter menengah memahami widget flutter, manajemen status, dan pemrograman asinkron akun back4app daftar untuk akun gratis di back4app https //www back4app com pemahaman tentang back4app pengetahuan dasar tentang membuat proyek dan mengelola data rujuk ke panduan memulai back4app https //www back4app com/docs/get started/welcome akun github untuk mengkloning repositori dan mengelola kontrol versi pengalaman dengan perpustakaan manajemen status seperti provider atau bloc familiaritas dengan pengujian dan penyebaran pemahaman dasar tentang menulis tes dan menyebarkan aplikasi flutter langkah 1 – menyiapkan backend back4app 1 1 buat proyek baru di back4app masuk ke akun back4app anda klik "buat aplikasi baru" dan beri nama "permainan pelari tanpa akhir lanjutan" 1 2 siapkan kelas untuk data pengguna kami akan membuat kelas untuk pengguna , skor , dan prestasi kelas pengguna bidang username (string) password (string) email (string) profilepicture (file) kelas skor bidang pengguna (pointer ke pengguna) skortinggi (nomor) level (nomor) kelas prestasi bidang pengguna (pointer to user) achievementname (string) dateachieved (date) 1 3 konfigurasi keamanan dan izin atur izin tingkat kelas untuk mengamankan data pengguna pastikan hanya pengguna yang terautentikasi yang dapat membaca dan menulis data mereka sendiri 1 4 tambahkan data contoh isi kelas dengan data contoh untuk menguji integrasi nanti langkah 2 – mengkloning dan menyiapkan template endless runner 2 1 kloning repositori flutter casual games toolkit git clone https //github com/flutter/casual games git 2 2 navigasi ke template endless runner cd casual games/templates/endless runner 2 3 buka proyek di ide anda gunakan visual studio code, android studio, atau ide pilihan lainnya pastikan bahwa plugin flutter dan dart terinstal 2 4 perbarui ketergantungan buka pubspec yaml dan perbarui ketergantungan ke versi terbaru jalankan flutter pub get langkah 3 – meningkatkan permainan dengan fitur lanjutan 3 1 implementasi autentikasi pengguna kami akan membiarkan pemain mendaftar, masuk, dan mengelola profil mereka 3 1 1 tambahkan sdk parse server di pubspec yaml dependencies parse server sdk flutter ^3 1 0 jalankan flutter pub get 3 1 2 siapkan layanan autentikasi buat lib/services/auth service dart import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class authservice { future\<parseuser> signup(string username, string password, string email) async { var user = parseuser(username, password, email); var response = await user signup(); if (response success) { return response result; } else { throw exception(response error! message); } } future\<parseuser> login(string username, string password) async { var user = parseuser(username, password, null); var response = await user login(); if (response success) { return response result; } else { throw exception(response error! message); } } future\<void> logout() async { var user = await parseuser currentuser() as parseuser; await user logout(); } } 3 1 3 buat layar autentikasi layar daftar lib/screens/signup screen dart layar masuk lib/screens/login screen dart gunakan widget flutter untuk membuat formulir untuk input pengguna 3 2 tingkatkan ui/ux terapkan animasi kustom menggunakan animationcontroller tambahkan tema kustom di lib/theme dart 3 3 tambahkan prestasi dan papan peringkat buat komponen ui untuk menampilkan prestasi terapkan layar papan peringkat untuk menampilkan skor tertinggi secara global langkah 4 – mengintegrasikan back4app dengan permainan 4 1 inisialisasi parse di main dart void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } 4 2 simpan kredensial dengan aman gunakan flutter dotenv untuk mengelola variabel lingkungan di pubspec yaml dependencies flutter dotenv ^5 0 2 buat sebuah env file (tambahkan ke gitignore ) app id=your app id client key=your client key perbarui main dart import 'package\ flutter dotenv/flutter dotenv dart'; void main() async { widgetsflutterbinding ensureinitialized(); await dotenv load(filename " env"); final keyapplicationid = dotenv env\['app id']!; final keyclientkey = dotenv env\['client key']!; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, ); runapp(myapp()); } langkah 5 – mengimplementasikan manajemen status 5 1 pilih solusi manajemen status kami akan menggunakan provider untuk kesederhanaan 5 1 1 tambahkan ketergantungan provider di pubspec yaml dependencies provider ^6 0 0 jalankan flutter pub get 5 2 buat manajemen status permainan 5 2 1 buat kelas status permainan lib/models/game state dart import 'package\ flutter/foundation dart'; class gamestate extends changenotifier { int score = 0; int get score => score; void incrementscore() { score++; notifylisteners(); } void resetscore() { score = 0; notifylisteners(); } } 5 2 2 sediakan status permainan di main dart import 'package\ provider/provider dart'; import 'models/game state dart'; void main() async { // parse initialization runapp( multiprovider( providers \[ changenotifierprovider(create ( ) => gamestate()), ], child myapp(), ), ); } 5 2 3 konsumsi status permainan di widget di layar permainan anda int score = context watch\<gamestate>() score; langkah 6 – mengoptimalkan kinerja 6 1 kinerja permainan manajemen sprite gunakan lembar sprite untuk mengurangi penggunaan memori optimasi frame rate batasi frame rate untuk menyeimbangkan kinerja dan masa pakai baterai 6 2 optimasi jaringan caching data implementasikan mekanisme caching untuk mengurangi panggilan jaringan batch requests gunakan operasi batch saat berkomunikasi dengan backend 6 3 profiling kode gunakan devtools flutter untuk memprofil aplikasi identifikasi dan perbaiki bottleneck kinerja langkah 7 – penanganan kesalahan yang kuat dan pengujian 7 1 penanganan kesalahan blok try catch bungkus panggilan asinkron untuk menangani pengecualian try { var result = await someasyncfunction(); } catch (e) { // handle error } umpan balik pengguna tampilkan pesan yang ramah pengguna saat kesalahan terjadi 7 2 pencatatan gunakan paket logging untuk mencatat kesalahan dan peristiwa penting di pubspec yaml dependencies logging ^1 0 2 7 3 pengujian 7 3 1 pengujian unit tulis pengujian untuk model dan layanan anda contoh pengujian di test/game state test dart import 'package\ flutter test/flutter test dart'; import 'package\ your app/models/game state dart'; void main() { test('score increments correctly', () { final gamestate = gamestate(); gamestate incrementscore(); expect(gamestate score, 1); }); } 7 3 2 pengujian integrasi uji ui dan interaksi aplikasi gunakan kerangka pengujian integrasi flutter langkah 8 – menerapkan permainan 8 1 mempersiapkan untuk penerapan ikon aplikasi dan layar splash sesuaikan untuk branding id bundel aplikasi tetapkan pengenal unik untuk android dan ios 8 2 membangun versi rilis android perbarui android/app/build gradle dengan konfigurasi penandatanganan anda jalankan flutter build apk release ios buka ios/runner xcworkspace di xcode atur penandatanganan dan kemampuan jalankan flutter build ios release 8 3 pengajuan app store google play store ikuti panduan resmi https //developer android com/distribute/console apple app store ikuti panduan resmi https //developer apple com/app store/submit/ kesimpulan dalam tutorial lanjutan ini, kami telah membangun permainan pelari tanpa akhir yang kaya fitur menggunakan toolkit permainan kasual flutter dan mengintegrasikan back4app untuk layanan backend kami telah membahas autentikasi pengguna memungkinkan pemain untuk mendaftar, masuk, dan mengelola profil manajemen status menggunakan provider untuk manajemen status yang efisien optimisasi kinerja meningkatkan kinerja game dan jaringan penanganan kesalahan dan pengujian menerapkan penanganan kesalahan yang kuat dan menulis pengujian penerapan mempersiapkan dan mengirimkan aplikasi ke toko aplikasi pendekatan komprehensif ini membekali anda dengan keterampilan untuk mengembangkan aplikasi flutter berkualitas profesional dengan integrasi backend yang andal anda dapat lebih memperluas game dengan menambahkan lebih banyak fitur, seperti berbagi sosial memungkinkan pemain untuk membagikan pencapaian di media sosial pembelian dalam aplikasi menghasilkan uang dari game dengan item atau peningkatan yang dapat dibeli dukungan multiplayer menerapkan fungsionalitas multiplayer waktu nyata atau berbasis giliran untuk informasi lebih lanjut tentang flutter dan integrasi back4app, lihat dokumentasi flutter https //flutter dev/docs panduan flutter back4app https //www back4app com/docs/flutter/overview panduan server parse https //docs parseplatform org selamat coding dan pengembangan game!