Flutter Templates
Membangun Game Multiplatform Menggunakan Flutter dan Back4app

11min
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.
Lingkungan pengembangan Flutter telah disiapkan di mesin lokal Anda. Ikuti panduan instalasi Flutter 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 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:
Dart
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(),
    );
  }
}
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:
Dart
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);
  }
}
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:
Dart
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
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:
Dart
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');
  }
}
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:
Dart
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 [];
  }
}
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:
Dart
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')}'),
          );
        },
      ),
    );
  }
}
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 dan dokumentasi Back4app. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Tutorial Aplikasi Pemesanan Ruang Pertemuan dengan Back4App, Next.js dan Vercel
BERIKUTNYA
Cara Membangun Aplikasi Respon Email AI dengan Flutter dan Back4App