Cara Membangun Game Endless Runner Lanjutan Menggunakan Flutter, Toolkit Game Kasual, dan Back4app

50min
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 jika Anda belum mengaturnya.
Pengetahuan Flutter Menengah: Memahami widget Flutter, manajemen status, dan pemrograman asinkron.
Akun Back4app: Daftar untuk akun gratis di Back4app.
Pemahaman tentang Back4app: Pengetahuan dasar tentang membuat proyek dan mengelola data. Rujuk ke panduan memulai Back4app.
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
Bash
git clone https://github.com/flutter/casual-games.git
git clone https://github.com/flutter/casual-games.git
﻿
2.2 Navigasi ke Template Endless Runner
Bash
cd casual-games/templates/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:
Bash
flutter pub get
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:
YAML
dependencies:
  parse_server_sdk_flutter: ^3.1.0
dependencies:
  parse_server_sdk_flutter: ^3.1.0
﻿
Jalankan:
Bash
flutter pub get
flutter pub get
﻿
3.1.2 Siapkan Layanan Autentikasi
Buat lib/services/auth_service.dart:
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();
  }
}
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
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());
}
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:
YAML
dependencies:
  flutter_dotenv: ^5.0.2
dependencies:
  flutter_dotenv: ^5.0.2
﻿
Buat sebuah .env file (tambahkan ke .gitignore):
Text
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
﻿
Perbarui main.dart:
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());
}
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:
YAML
dependencies:
  provider: ^6.0.0
dependencies:
  provider: ^6.0.0
﻿
Jalankan:
Bash
flutter pub get
flutter pub get
﻿
5.2 Buat Manajemen Status Permainan
5.2.1 Buat Kelas Status Permainan
lib/models/game_state.dart:
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();
  }
}
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:
Dart
import 'package:provider/provider.dart';
import 'models/game_state.dart';

void main() async {
  // ... Parse initialization

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => GameState()),
      ],
      child: MyApp(),
    ),
  );
}
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:
Dart
int score = context.watch<GameState>().score;
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.
Dart
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
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:
YAML
dependencies:
  logging: ^1.0.2
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:
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);
  });
}
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:
Bash
flutter build apk --release
flutter build apk --release
﻿
iOS
Buka ios/Runner.xcworkspace di Xcode.
Atur penandatanganan dan kemampuan.
Jalankan:
Bash
flutter build ios --release
flutter build ios --release
﻿
8.3 Pengajuan App Store
Google Play Store: Ikuti panduan resmi.
Apple App Store: Ikuti panduan resmi.
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﻿
﻿Panduan Flutter Back4app﻿
﻿Panduan Server Parse﻿
Selamat coding dan pengembangan game!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Membangun Aplikasi Flutter dengan Integrasi OverlayPortal dan Back4app
BERIKUTNYA
Cara Memvisualisasikan Data di Flutter dengan fl_chart dan Back4App